Previous blogs

Widget Extensions Introduction

Widget Extensions Click Event

 

This blog we will take a quick look at making a new Date Picker Widget

 

I'm not going to worry about styles just the basics of getting the widget defined and able to place in the Composer canvas.

As in previous blogs we have to decide on a name, we will use DatePicker

Because we don't want to write all of the logic that has been written many times will use a jquery datepicker https://jqueryui.com/datepicker/ which has a lot options.

 

The simple syntax is $(#myDate).datepicker() which will do most of the work.

The $ is the jquery reference an the  #myDate is the id where the datapicker will render and the datepicker is the function worker.

 

Before we get into the renderHtml I realize I need to quickly talk about the widgetProperties function in the ide.js. This where we set what properties can be defined and whether they are dynamic. For example the thought it useful to have a Title , Date and some simple css style configurable options. Inside the widgetProprties we have properties section (json) and the basic  pattern is


PropertyName

  • baseType
  • defaultValue
  • isBindingTarget


Setting the isBindTarget to true allows for dynamic setting in the composer.

 

 

Below is the complete definition for the widgetProperties

 

 

 

 

Next we set up the design time (ide)  renderhtml

 

 

And finally we define the  runtime renderHtml which looks like this

 

 

 

Deploy it and you have a basic Data Picker.

 

 

 

 

There is more work to do on this to provide better styling but  its a start!