Over a million developers have joined DZone.

How to Write a WinJS Custom Control - Take Two

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

In a previous post, I showed how to create a WinJS custom control that adds support to textbox autocomplete using the HTML5 datalist element. I was asked how I can improve this control to support remote data scenarios so I updated the source code to show how to achieve that. Note that if you are not familiar with WinJS.Promise object which is used in the solution, you can read about it in MSDN before you proceed.

The Updated Control

Here is the source code for the updated control:

(function (WinJS) {
    WinJS.Namespace.define("MyApp.UI", {
        Autocomplete: WinJS.Class.define(function (element, options) {
            if (!element || element.tagName.toLowerCase() !== "input") throw "input type must be provided";
            var that = this;
            options = options || {};
            this._element.winControl = this;
            WinJS.UI.setOptions(this, options);
            if (options.remoteDataSource) {
                options.remoteDataSource.then(function (optionList) {

The main change here is that I expect to get a remoteDataSource WinJS.Promise parameter as part of the options object. If it exists, I use the then function of WinJS.Promise object to wait for the asynchronous remote data retrieval to finish. When it does, I can use the _setOptionList and _createDataList functions.

The Updated Data Source

Now that there is support for both synchronous and asynchronous data retrieval, you can mimic remote data retrieval by creating a fulfilled WinJS.Promise object. Here is the new code in data.js file:

(function () {
    "use strict";

    var citiesList = ["Seattle", "Las Vegas", "New York", "Salt lake City"];

    WinJS.Namespace.define("Data", {
        citiesAsync: new WinJS.Promise(function (complete) {
        cities: citiesList

As you can see, I’m creating the cities list and then return it as a fulfilled WinJS.Promise. The citiesAsync property could be set to the outcome of using WinJS.xhr object or any other asynchronous operation.

The Updated home.html File

To complete the example, you should change the home.html to include another textbox. The new textbox will have the remoteDataSource option property set to Data.citiesAsync:

<input type="text" name="txtCitiesAsync" id="txtCitiesAsync" data-win-control="MyApp.UI.Autocomplete" data-win-options="{ remoteDataSource: Data.citiesAsync }"/>

That is all.


In this post I showed how to change a custom control to support async data retrieval as part of its creation. I use the WinJS.Promise object to do that.




Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.


Published at DZone with permission of Gil Fink, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}