[NoBrainer] Changing LightSwitch HTML Cascading choiceLists with JayData

Today I show you how you can quickly use “JayData” to modify the contents of a LightSwitch HTML “drop-down list” (aka “choiceList”). Though it does not really offer all the blows and whistles as other controls such as “select2” it has some advantages like easy setup and good visual integration. And now with the use of JayData (and certainly with the built-in object model as well) you can easily fill and modify the contents of these controls with a simple registration to a ChangeListener event. And here is how:

So imagine we have an “Add” screen called “AddFuncensteinScreen” with two “drop-down lists” with “FuncomaticListControl” being the parent choiceList and “FuncyChildListControl” being the child (cascaded) choiceList control. And whenever the contents of the paren control changes we would to populate the child control with some data that is filtered depending on the parent control value.
0. We use JayData and dynamically bind the “ApplicationData.svc” model to the (global) variable “ctxApplicationData”.
1. We then register our function “addChangeListenerFuncomaticListControl” to the change listener event.
2. Within the change event function we get the current value of the ChoiceList and do a query to the child table “FuncyItems” where we pass the current value as the search criteria.
2a. The result then gets ordered by its “Name” property and we return (“map”) the whole entity and pass the result as an array to the “renderData” inline function.
Note: you have to use the “it.Name” syntax to create the actual search phrase.
3. The “renderData” function has an implicit input variable “_list” holding our returned data that we use to build a new array holding the data structure required by the ChoiceList control.
Note: you have to pass in the name/value pair as a dictionary with “value”/”stringValue” keys.
4. We then look up our child control “FuncyChildListControl” and bind our freshly constructed array to it.
5. We issue to dispatchEvents (for the “choiceList” and the “value”) to update the child control.

That’s all it takes – almost too easy.

In case the code is not displayed correctly you can view it at: https://gist.github.com/dfch/d64cfb6e21892dc8cc26

There is a drawback to this approach: you potentially query the same data over and over again. For larger data sets this might be quite bandwidth consuming. Furthermore there is no infinite scrolling available in this control.

Note: When you define the control in the screen designer you can either prefill the control with name/value pairs or have them filled in the “control_postRender” method. There is a small catch in that the UI title the name/value pair as “Value”/”Display Name”, but the object model internally uses a “value”/”stringValue” notation (with the “Display Name” being the “stringValue”). I would suggest that you do the initial loading of the control via code as well. As you are querying a data set anyway you then do not have to update the values in two different places (data set and the designer).

Trackbacks

  1. […] we have to initialize our JayData context. We use a dynamically generated context as described in [NoBrainer] Changing LightSwitch HTML Cascading choiceLists with JayData. To do this, create a common.js file with following code and add this to your script […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: