WinJS Controls FTW!

I love me some Microsoft, it's true. To get a little more Microsoft in your Nintex Forms, I'll show how to add the Microsoft JavaScript library, WinJS for a very cool new way to interact with your forms.

The Build

After you have created a List and added the columns you wish to collect, we need to snag the CDN links for WinJS. 

In the Nintex Forms designer tab, select Settings > Advanced > Custom CSS includes and place the following link: 

  • https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/css/ui-light.css

Bellow the Custom CSS includes section is the Custom JavaScript Includes section. Please paste the following CDN links in the Custom JavaScript Includes field: 

  • https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/base.js
  • https://cdnjs.cloudflare.com/ajax/libs/winjs/4.4.0/js/ui.js

Next, a Rich Text Control will be added to the Form so we can place some HTML within the form and create our own <div> elements.

The Code

Double click the Rich Text Control on your Nintex Form and then select body of the control. Once you do that you will see the Format Text tab on the ribbon. Click on 'Edit Source' to add the following HTML:

<div class="simple_ItemTemplate" data-win-control="WinJS.Binding.Template" style="display: none;">    
   <div class="overlaidItemTemplate">       
      <img class="image" data-win-bind="src: picture; alt: title" alt=""/>       
      <div class="overlay">          
         <h2 class="win-h2 ItemTitle" data-win-bind="textContent: title">         
         </h2>       
      </div>    
   </div> 
</div> 
<div class="flipView" id="simple_FlipView" data-win-control="WinJS.UI.FlipView" data-win-options="{        itemDataSource: DefaultData.bindingList.dataSource,        itemTemplate: select(&#39;.simple_ItemTemplate&#39;)     }"> &#160;</div>

Save your changes in the Rich Text control and then let's add the CSS to the form settings. In the Nintex Forms tab in the ribbon, select Settings > Custom CSS and add the following CSS:

.flipView {
  width: 100%;
  max-width: 480px;
  height: 270px;
  background-image: url("/images/flipview/Texture.png");
}

.flipViewContent {
  width: 100%;
  max-width: 480px;
  height: 270px;
}

.overlaidItemTemplate {
  width: 100%;
  max-width: 480px;
  height: 270px;
}

.overlaidItemTemplate img {
  width: 100%;
  height: 100%;
}

.overlaidItemTemplate .overlay {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.65);
  height: 40px;
  padding: 20px 15px;
  overflow: hidden;
  width: 100%;
  bottom: 0;
}

.overlaidItemTemplate .overlay .ItemTitle {
  color: rgba(255, 255, 255, 0.8);
}

While still the Form Settings section, right below Custom CSS is Custom JavaScript. In that section add the following JavaScript:

NOTE: You will have to link to whatever images you wish to use. I had some simple icons that I link to in my form, but feel free to change the picture value to the appropriate picture source.

NWF$(document).ready(function(){
    var array = [
    { type: "item", title: "Tech Support", picture: "/SiteAssets/cogwheels12.png" },
    { type: "item", title: "Sales Support", picture: "/SiteAssets/customer%20service11.png" },
    { type: "item", title: "Ask an Executive", picture: "/SiteAssets/help9.png" },
    { type: "item", title: "Facilities Request", picture: "/SiteAssets/hammer6.png" },
    { type: "item", title: "Cloud Workflow", picture: "/SiteAssets/cloud%20computing1.png" }
];
var bindingList = new WinJS.Binding.List(array);WinJS.Namespace.define("DefaultData", {
    bindingList: bindingList,
    array: array
});
WinJS.UI.processAll();
});

The Result

OK, now that we have our code, let's take a look at what is actually going on.

If you were developing Windows App Store Apps with WinJS, you'd notice that all the code is wrapped in a Immediately Invoked Function Expression (IIFE). This is good for two reasons: one it prevents namespace collision and two, it immediately invokes the function. 

However, in our example, we are wrapping the code in the NWF$(document).ready() event. 

So, what did we create? We made a flip view photo gallery that will allow the user to move forward and backward through a set number of images. 

For more information on WinJS, please visit http://try.buildwinjs.com/ and tryout their awesome Playground experience to get more familiar with the available controls. You'll notice that some of this code looks like that of the playground, and that is cause it it! Big shout out to the WinJS team for building such an awesome set of controls to easily blend into your forms or app.