Over a million developers have joined DZone.

How to Write a WinJS Custom Control - Take Two

DZone's Guide to

How to Write a WinJS Custom Control - Take Two

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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.




Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}