In this post I quickly describe how you can use the select2 plugin with LightSwitch HTML client and present data from ODATA sources via jaydata.
LightSwitch has builtin capabilities for selecting related entities via the ‘Modal Data Picker’ control. You can also have drop down or choice lists with static data, however they lack the convenient search and filter mechanisms which render them unusable with large data sets. Luckily there is a plugin called ‘select2’ that does enhance the standard select boxes with searching and other gimmicks for you. And the good thing is you can even combine it with jaydata to grab other data sources and have server side sorting and filtering applied without the hassle of coding ODATA REST calls manually.
So below you find a snippet which renders a ‘select2’ box and have jaydata query some data source and load it into the control. The search term from the ‘select2’ control is send over to jaydata which will pass it as a parameter to the ODATA service and have filtering applied on the server (it will generate a ‘$filter’ query string for you).
Grabbing the effectively selected data is then done via the “change” event and inserted into ‘contentItem.value’ (via grabSelectedValue() which is not shown here). And there you are – that’s all.
Note: ‘select2’ is not really jQuery mobile aware. So when using it with LightSwitch you have to define the control with ‘data-role: none’. Otherwise it will render in a pretty ugly way.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function searchData(svcUrl, data, searchTerm) { | |
| var context = new LightSwitchApplication.ApplicationData({ | |
| name: 'oData', | |
| oDataServiceHost: svcUrl | |
| }); | |
| return context | |
| .EntitySet | |
| .filter(function (entity) { | |
| return entity.Name.startsWith(this.q); | |
| }, { q: searchTerm }) | |
| .forEach(function (entity) { | |
| data.results.push({ id: entity.Id, text: entity.Name }); | |
| }); | |
| } | |
| function _addSelect2Control(svcUrl, $parentElement, $element, contentItem, options) { | |
| try { | |
| var items = { results : [] }; | |
| $element | |
| .select2({ | |
| placeholder: options["placeholder"], | |
| quietMillis: options["quietMillis"], | |
| minimumInputLength: options["minimumInputLength"], | |
| page_limit: options["page_limit"], | |
| width: '90%', | |
| query: function (query) { | |
| items.length = 0; | |
| var promise = searchData(svcUrl, items, query.term) | |
| .then(function () { | |
| query.callback(items); | |
| }); | |
| }, | |
| dropdownCssClass: options["dropdownCssClass"] | |
| }) | |
| .on("change", function (e) { | |
| contentItem.value = getSelectedValues($parentElement); | |
| }); | |
| } catch (e) { | |
| console.log(e.message + " description: " + e.description); | |
| } | |
| } |
In case your browser does not render the Gist correctly you can view the code directly at: https://gist.github.com/dfch/f2d1df81136f1dff6b10.
Ronald Rink
I am a senior auditor and consultant at d-fens for business processes and information systems.
d-fens GmbH 
2 Comments »