cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Did you get called away in the middle of writing a post? Don't worry you can find your unfinished post later in the Drafts section of your profile page. X

Widget Extensions Date Picker

100% helpful (1/1)

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!

Version history
Last update:
‎Dec 08, 2017 08:35 PM
Updated by: