Dynamics AX 2012 Integration using AIF: Rapid Business Apps Development Series

Rapid Business Apps Development Series – Part 1 (Visual Studio Templates)

Purpose: The purpose of this series is to illustrate how to rapidly develop business applications integrated with Microsoft Dynamics AX 2012. In this document we'll focus primarily on User Interface, other documents in this series will cover Web Services and Comminication Infrastructure, and more.

Challenge: Lots of developers in the world enjoy developing Windows 8 Apps for business, as well as lots of organizations in the world enjoy using Windows 8 Apps for business. The question is how quickly *I* can develop a business app. Say one of typical Manufacturing industry workloads could be for Production Manager who wants to review the list of Production orders to be aware of what's going on while he/she is on the go (away from the desk) inside or outside of facility and potentially take some actions.

Solution: Microsoft has a variety of Windows 8 Apps integrated with Microsoft Dynamics AX 2012 available in the Store, as well as published a detailed guidance on how to develop secure mobile apps integrated with Microsoft Dynamics AX 2012. In this document I'll look at things from partner or customer perspective who may have people familiar with HMTL5/JavaScript and web development in house, but maybe never developed Windows 8 Apps before. In this walkthrough I'll try to be one of those web and/or .NET developers who wants to develop a concept modern Windows 8 App for Production Manager described above within 1 hour or so. All I need in this particular case is a PC running Windows 8.1 and Visual Studio 2013 installed on it. In order to very quickly develop a concept modern Windows 8 App I'll leverage Visual Studio Hub template and transform it the way I need to achieve the result. Please note that in this walkthrough I'm playing a Developer role, in other documents in this series I'll explain how Business Users can also quickly create modern Windows 8 Apps using Microsoft technology.

Please note that in this document I assume that the reader has development background, some experience in web development (CSS/HTML/JavaScript) and understanding of the purpose for WinJS libarary.

Please find more info about WinJS here: http://msdn.microsoft.com/en-us/library/windows/apps/br229773.aspx

Important: Before I begin I want to call out the fact that I will provide a lot of source code (CSS/HTML/JavaScript) in this article, however the amount of code I'll actually write by hand will be very minimal because I'll mostly be doing a template transformation. And the reason for providing a source code is solely for your convenience when comparing Before and After some changes have been introduced

Walkthrough

Let's begin with conceptual design of Production Manager App

For this purpose we can use PowerPoint to define 3 main screens for Production Manager App

Overview screen with a list of Production orders

Group screen displaying Production orders for selected group with more details

Production order screen displaying details of selected Production order

Now since we know what we want to build, we can discuss what we will be using to do that

All I'll be given is Windows 8.1 PC and Visual Studio 2013 installed

The idea is to utilize Windows 8 Hub App standard Visual Studio 2013 template which will give me a jump start for Production Manager App development. Please note that most of the work I'll do below will be template transformation with a minimum new code written. Let's see how far we can get with standard Visual Studio Hub App template. My goal is still to do this within 1 hour

Let's get to work now

First step will be to create a Project based on Visual Studio 2013 Hub App template

Visual Studio 2013 – Hub App

Hub App template will give me a desired pages structure, navigation and more right away

Let's review what we've already got

Overview screen (All production orders)

Group screen (Group of production orders)

Item screen (Production order)

Please note that Item screen in Hub App template is empty. Item screen is also empty in Visual Studio 2013 Grid App template

Visual Studio 2013 – Grid App

However I know that Item screen has non-empty layout in Visual Studio 2012 – Grid App template

Visual Studio 2012 – Grid App (Overview screen)

Visual Studio 2012 – Grid App (Group screen)

Visual Studio 2012 – Grid App (Item screen)

So in order to have some initial layout for Item screen I'll borrow the source code for Item screen from Visual Studio 2012 Grid App template into my Visual Studio 2013 Hub App project

All I have to do now is Copy-and-Paste contents of ItemDetail folder from Visual Studio 2012 Grid App into my project

Visual Studio 2013 Hub App	Visual Studio 2012 Grid App

Just for your information this is how Item page source code looks like in 2 projects

Item.css

.itempage .content {

margin-left: 120px;

margin-right: 120px;

}

Item.html

<!DOCTYPE html>

<html>

<head>

<title>itemPage</title>

</head>

<body>

</h1>

</header>

</section>

</div>

</body>

</html>

Item.js

(function () {

"use strict";

WinJS.UI.Pages.define("/pages/item/item.html", {

// This function is called whenever a user navigates to this page. It

// populates the page elements with the app's data.

ready: function (element, options) {

var item = Data.resolveItemReference(options.item);

element.querySelector(".titlearea .pagetitle").textContent = item.title;

// TODO: Initialize the page here.

}

});

})();

ItemDetail.css

.itemdetailpage .content {

-ms-grid-row: 1;

-ms-grid-row-span: 2;

display: block;

height: 100%;

overflow-x: auto;

position: relative;

width: 100%;

z-index: 0;

}

.itemdetailpage .content article {

/* Define a multi-column, horizontally scrolling article by default. */

column-fill: auto;

column-gap: 80px;

column-width: 480px;

height: calc(100% - 183px);

margin-left: 120px;

margin-right: 120px;

margin-top: 133px;

width: 480px;

}

.itemdetailpage .content article header .item-title {

margin-bottom: 19px;

}

.itemdetailpage .content article header .item-subtitle {

margin-bottom: 16px;

margin-top: 0;

}

.itemdetailpage .content article .item-image {

height: 240px;

width: 460px;

}

.itemdetailpage .content article .item-content p {

margin-top: 10px;

margin-bottom: 20px;

}

@media screen and (-ms-view-state: snapped) {

.itemdetailpage .content {

-ms-grid-row: 2;

-ms-grid-row-span: 1;

overflow-x: hidden;

overflow-y: auto;

}

.itemdetailpage .content article {

/* Define a single column, vertically scrolling article in snapped mode. */

-ms-grid-columns: 300px 1fr;

-ms-grid-row: 2;

-ms-grid-rows: auto 60px;

display: -ms-grid;

height: 100%;

margin-left: 20px;

margin-right: 20px;

margin-top: 6px;

width: 280px;

}

.itemdetailpage .content article header .item-title {

margin-bottom: 10px;

}

.itemdetailpage .content article .item-image {

height: 140px;

width: 280px;

}

.itemdetailpage .content article .item-content {

padding-bottom: 60px;

width: 280px;

}

@media screen and (-ms-view-state: fullscreen-portrait) {

.itemdetailpage .content article {

margin-left: 100px;

margin-right: 100px;

}

ItemDetail.html

<!DOCTYPE html>

<html>

<head>

<title>itemDetailPage</title>

</head>

<body>

</h1>

</header>

<div>

</header>

</div>

</article>

</div>

</body>

</html>

ItemDetail.js

(function () {

"use strict";

WinJS.UI.Pages.define("/pages/itemDetail/itemDetail.html", {

// This function is called whenever a user navigates to this page. It

// populates the page elements with the app's data.

ready: function (element, options) {

var item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);

element.querySelector(".titlearea .pagetitle").textContent = item.group.title;

element.querySelector("article .item-title").textContent = item.title;

element.querySelector("article .item-subtitle").textContent = item.subtitle;

element.querySelector("article .item-image").src = item.backgroundImage;

element.querySelector("article .item-image").alt = item.subtitle;

element.querySelector("article .item-content").innerHTML = item.content;

element.querySelector(".content").focus();

}

});

})();

After I copy the source code for Item page from Visual Studio 2012 Grid App into my project I'll have to correct the code appropriately

In particular I'll simply replace (Ctrl+H) "itemdetailpage" with "itempage" in Item.css

Item.css

.itempage .content {

-ms-grid-row: 1;

-ms-grid-row-span: 2;

display: block;

height: 100%;

overflow-x: auto;

position: relative;

width: 100%;

z-index: 0;

}

.itempage .content article {

/* Define a multi-column, horizontally scrolling article by default. */

column-fill: auto;

column-gap: 80px;

column-width: 480px;

height: calc(100% - 183px);

margin-left: 120px;

margin-right: 120px;

margin-top: 133px;

width: 480px;

}

.itempage .content article header .item-title {

margin-bottom: 19px;

}

.itempage .content article header .item-subtitle {

margin-bottom: 16px;

margin-top: 0;

}

.itempage .content article .item-image {

height: 240px;

width: 460px;

}

.itempage .content article .item-content p {

margin-top: 10px;

margin-bottom: 20px;

}

@media screen and (-ms-view-state: snapped) {

.itempage .content {

-ms-grid-row: 2;

-ms-grid-row-span: 1;

overflow-x: hidden;

overflow-y: auto;

}

.itempage .content article {

/* Define a single column, vertically scrolling article in snapped mode. */

-ms-grid-columns: 300px 1fr;

-ms-grid-row: 2;

-ms-grid-rows: auto 60px;

display: -ms-grid;

height: 100%;

margin-left: 20px;

margin-right: 20px;

margin-top: 6px;

width: 280px;

}

.itempage .content article header .item-title {

margin-bottom: 10px;

}

.itempage .content article .item-image {

height: 140px;

width: 280px;

}

.itempage .content article .item-content {

padding-bottom: 60px;

width: 280px;

}

@media screen and (-ms-view-state: fullscreen-portrait) {

.itempage .content article {

margin-left: 100px;

margin-right: 100px;

}

Also I will merge code (copy-and-paste) into Item.html and add <article> tag as shown below

Item.html

<!DOCTYPE html>

<html>

<head>

<title>itemPage</title>

</head>

<body>

</h1>

</header>

<div>

</header>

</div>

</article>

</section>

</div>

</body>

</html>

Similarly I will merge code (copy-and-paste) in Item.js

Item.js

(function () {

"use strict";

WinJS.UI.Pages.define("/pages/item/item.html", {

// This function is called whenever a user navigates to this page. It

// populates the page elements with the app's data.

ready: function (element, options) {

var item = Data.resolveItemReference(options.item);

element.querySelector(".titlearea .pagetitle").textContent = item.title;

element.querySelector("article .item-title").textContent = item.title;

element.querySelector("article .item-subtitle").textContent = item.subtitle;

element.querySelector("article .item-image").src = item.backgroundImage;

element.querySelector("article .item-image").alt = item.subtitle;

element.querySelector("article .item-content").innerHTML = item.content;

element.querySelector(".content").focus();

}

});

})();

The next step will be to change the title of our app

In order to do that I will modify default.html, hub.html and package.appxmanifest replacing (Ctrl+H) "App1" with "Manufacturing Companion"

Now our Overview screen will look like this

Next I'd like to change a color schema

In order to do that I'll modify default.html, hub.html, item.html and section.html replacing "ui-dark.css" to "ui-light.css"

Now we got a light color schema which looks better to me

Next I'll make our app look friendlier and more professional by adding a background image

Here's the image I want to use for my Production Manager App

Please note that I purchased rights to use this background image from one of digital images providers. Then I put the file into images folder

And add it to the project

Now all I need to do is to replace "background-image: url" property in Hub.css

Hub.css (Before)

…

.hubpage .hub .hero {

-ms-high-contrast-adjust: none;

background-size: cover;

margin-left: -80px;

margin-right: 80px;

padding: 0;

width: 780px;

}

…

Hub.css (After)

…

.hubpage .hub .hero {

-ms-high-contrast-adjust: none;

background-size: cover;

margin-left: -80px;

margin-right: 80px;

padding: 0;

width: 780px;

}

…

Now our app looks even better

Please note that our Overview screen currently looks busy and truly all we need for our app is Section 3. That's why on the next step we're going to simply our template

Let's dive into the code more!

In order to simplify Hub page I will simply comment out unwanted Sections 1, 2 and 4

Hub.html

<!DOCTYPE html>

<html>

<head>

<title>hubPage</title>

</head>

<body>

<span class="pagetitle">Manufacturing Companion</span>

</h1>

</header>

</div>

<!--

</div>

</div>

-->

<div class="section3" data-win-control="WinJS.UI.HubSection" data-win-res="{ winControl: {'header': 'Section3'} }"

data-win-options="{ onheaderinvoked: select('.pagecontrol').winControl.section3HeaderNavigate }">

</div>

<div class="itemslist win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{

selectionMode: 'none',

itemTemplate: select('.section3 .itemTemplate'),

itemDataSource: select('.pagecontrol').winControl.section3DataSource,

oniteminvoked: select('.pagecontrol').winControl.section3ItemNavigate

}">

</div>

<!--

</div>

</div>

</div>

-->

</div>

</section>

</div>

</body>

</html>

Now it looks like this is what we need

Now it is time to simplify Section page

In order to do that I'll also comment out appropriate code in HTML and get rid of "headerTemplate" and "groupDataSource"

Section.html

<!DOCTYPE html>

<html>

<head>

<title>sectionPage</title>

</head>

<body>

<!--

</div>

-->

</div>

</h1>

</header>

<div class="itemslist win-selectionstylefilled" aria-label="List of this section's items" data-win-control="WinJS.UI.ListView" data-win-options="{

selectionMode: 'none',

currentItem: {type: WinJS.UI.ObjectType.item, index: 0, hasFocus: true},

itemDataSource: select('.pagecontrol').winControl.itemDataSource,

itemTemplate: select('.itemtemplate'),

oniteminvoked: select('.pagecontrol').winControl.itemInvoked

}">

<!--

groupDataSource: select('.pagecontrol').winControl.groupDataSource,

groupHeaderTemplate: select('.headertemplate'),

-->

</div>

</section>

</div>

</body>

</html>

Now I don't use "groupDataSource" so I'll also need to comment it out in JavaScript

Section.js

(function () {

"use strict";

var ui = WinJS.UI;

ui.Pages.define("/pages/section/section.html", {

/// <field type="WinJS.Binding.List" />

_items: null,

processed: function (element) {

return WinJS.Resources.processAll(element);

// This function is called to initialize the page.

init: function (element, options) {

var group = Data.resolveGroupReference(options.groupKey);

this._items = Data.getItemsFromGroup(group);

var pageList = this._items.createGrouped(

function groupKeySelector(item) { return group.key; },

function groupDataSelector(item) { return group; }

);

//this.groupDataSource = pageList.groups.dataSource;

this.itemDataSource = pageList.dataSource;

this.itemInvoked = ui.eventHandler(this._itemInvoked.bind(this));

// This function is called whenever a user navigates to this page.

ready: function (element, options) {

element.querySelector("header[role=banner] .pagetitle").textContent = options.title;

var listView = element.querySelector(".itemslist").winControl;

listView.element.focus();

unload: function () {

this._items.dispose();

// This function updates the page layout in response to layout changes.

updateLayout: function (element) {

/// <param name="element" domElement="true" />

// TODO: Respond to changes in layout.

_itemInvoked: function (args) {

var item = this._items.getAt(args.detail.itemIndex);

WinJS.Navigation.navigate("/pages/item/item.html", { item: Data.getItemReference(item) });

}

});

})();

Now our Group screen looks like this

Next we'll further modify Hub page

This time we will copy and paste code from Section to Hub to make it look like we need

Let's look at how the source code looked like Before changes

Hub.html

<!DOCTYPE html>

<html>

<head>

<title>hubPage</title>

</head>

<body>

<span class="pagetitle">Manufacturing Companion</span>

</h1>

</header>

</div>

<!--

</div>

</div>

-->

<div class="section3" data-win-control="WinJS.UI.HubSection" data-win-res="{ winControl: {'header': 'Section3'} }"

data-win-options="{ onheaderinvoked: select('.pagecontrol').winControl.section3HeaderNavigate }">

</div>

<div class="itemslist win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{

selectionMode: 'none',

itemTemplate: select('.section3 .itemTemplate'),

itemDataSource: select('.pagecontrol').winControl.section3DataSource,

oniteminvoked: select('.pagecontrol').winControl.section3ItemNavigate

}">

</div>

<!--

</div>

</div>

</div>

-->

</div>

</section>

</div>

</body>

</html>

Hub.css

.hubpage header[role=banner] {

position: relative;

z-index: 2;

}

.hubpage section[role=main] {

-ms-grid-row: 1;

-ms-grid-row-span: 2;

z-index: 1;

}

.hubpage .hub .win-hub-surface {

height: 100%;

}

.hubpage .hub .hero {

-ms-high-contrast-adjust: none;

background-size: cover;

margin-left: -80px;

margin-right: 80px;

padding: 0;

width: 780px;

}

.hubpage .hub .hero:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {

margin-left: 80px;

margin-right: -80px;

}

.hubpage .hub .hero .win-hub-section-header {

display: none;

}

.hubpage .hub .section1 {

width: 420px;

}

.hubpage .hub .section1 .win-hub-section-content {

overflow-y: hidden;

}

.hubpage .hub .section1 .subtext {

margin-bottom: 7px;

margin-top: 9px;

}

.hubpage .hub .section2 {

width: 440px;

}

.hubpage .hub .section2 .win-hub-section-content {

overflow-y: hidden;

}

.hubpage .hub .section2 .item-title {

margin-top: 4px;

margin-bottom: 10px;

}

.hubpage .hub .section2 .article-header {

margin-bottom: 15px;

}

.hubpage .hub .section3 {

}

.hubpage .hub .section3 .itemslist {

height: 100%;

margin-left: -10px;

margin-right: -10px;

margin-top: -5px;

}

.hubpage .hub .section3 .win-container {

margin-bottom: 36px;

margin-left: 10px;

margin-right: 10px;

}

.hubpage .hub .section3 .win-item {

height: 229px;

width: 310px;

}

.hubpage .hub .section3 .win-item img {

height: 150px;

margin-bottom: 10px;

width: 310px;

}

.hubpage .hub .section4 {

width: 400px;

}

.hubpage .hub .section4 .win-hub-section-content {

overflow-y: hidden;

}

.hubpage .hub .section4 .top-image-row {

height: 260px;

margin-bottom: 10px;

width: 400px;

}

.hubpage .hub .section4 .top-image-row img {

height: 100%;

width: 100%;

}

.hubpage .hub .section4 .sub-image-row {

margin-bottom: 20px;

display: -ms-flexbox;

-ms-flex-flow: row nowrap;

-ms-flex-pack: justify;

}

.hubpage .hub .section4 .sub-image-row img {

height: 95px;

width: 130px;

}

Section.html

<!DOCTYPE html>

<html>

<head>

<title>sectionPage</title>

</head>

<body>

<!--

</div>

-->

</div>

</h1>

</header>

<div class="itemslist win-selectionstylefilled" aria-label="List of this section's items" data-win-control="WinJS.UI.ListView" data-win-options="{

selectionMode: 'none',

currentItem: {type: WinJS.UI.ObjectType.item, index: 0, hasFocus: true},

itemDataSource: select('.pagecontrol').winControl.itemDataSource,

itemTemplate: select('.itemtemplate'),

oniteminvoked: select('.pagecontrol').winControl.itemInvoked

}">

<!--

groupDataSource: select('.pagecontrol').winControl.groupDataSource,

groupHeaderTemplate: select('.headertemplate'),

-->

</div>

</section>

</div>

</body>

</html>

Section.css

.sectionpage section[role=main] {

-ms-grid-row: 1;

-ms-grid-row-span: 2;

}

.sectionpage .itemslist {

height: 100%;

position: relative;

width: 100%;

z-index: 0;

}

/* This selector is used to prevent ui-dark/light.css from overwriting changes

to .win-surface. */

.sectionpage .itemslist .win-horizontal.win-viewport .win-surface {

margin-bottom: 35px;

margin-left: 50px;

margin-right: 50px;

margin-top: 128px;

}

.sectionpage .itemslist .win-groupheader {

-ms-grid-columns: 1fr;

-ms-grid-rows: auto auto 1fr;

display: -ms-grid;

height: 100%;

margin-left: 0;

margin-right: 40px;

padding: 0;

width: 480px;

}

.sectionpage .itemslist .win-groupheader:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {

margin-left: 40px;

margin-right: 0;

}

.sectionpage .itemslist .win-groupheader .group-subtitle {

-ms-grid-row: 1;

margin-bottom: 14px;

margin-top: 6px;

max-height: 48pt;

overflow: hidden;

}

.sectionpage .itemslist .win-groupheader .group-image {

-ms-grid-row: 2;

background-color: rgba(147, 149, 152, 1);

height: 240px;

margin: 0;

margin-bottom: 20px;

width: 480px;

}

.sectionpage .itemslist .win-groupheader .group-description {

-ms-grid-row: 3;

margin-bottom: 55px;

overflow: hidden;

}

.sectionpage .itemslist .win-container {

margin-bottom: 11px;

margin-left: 33px;

margin-right: 33px;

margin-top: 5px;

}

.sectionpage .itemslist .item {

-ms-grid-columns: 110px 10px 1fr;

-ms-grid-rows: 1fr;

display: -ms-grid;

height: 110px;

padding: 7px;

width: 480px;

}

.sectionpage .itemslist .item .item-info {

-ms-grid-column: 3;

}

.sectionpage .itemslist .item .item-info .item-title {

margin-top: 4px;

max-height: 20px;

overflow: hidden;

}

.sectionpage .itemslist .item .item-info .item-description {

max-height: 60px;

overflow: hidden;

}

And this is how the source code looks like After changes

Hub.html

<!DOCTYPE html>

<html>

<head>

<title>hubPage</title>

</head>

<body>

<span class="pagetitle">Manufacturing Companion</span>

</h1>

</header>

</div>

<!--

</div>

</div>

-->

<div class="section3" data-win-control="WinJS.UI.HubSection" data-win-res="{ winControl: {'header': 'Section3'} }"

data-win-options="{ onheaderinvoked: select('.pagecontrol').winControl.section3HeaderNavigate }">

<!--

</div>

-->

</div>

<div class="itemslist win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{

selectionMode: 'none',

itemTemplate: select('.section3 .itemTemplate'),

itemDataSource: select('.pagecontrol').winControl.section3DataSource,

oniteminvoked: select('.pagecontrol').winControl.section3ItemNavigate

}">

</div>

<!--

</div>

</div>

</div>

-->

</div>

</section>

</div>

</body>

</html>

Hub.css

.hubpage header[role=banner] {

position: relative;

z-index: 2;

}

.hubpage section[role=main] {

-ms-grid-row: 1;

-ms-grid-row-span: 2;

z-index: 1;

}

.hubpage .hub .win-hub-surface {

height: 100%;

}

.hubpage .hub .hero {

-ms-high-contrast-adjust: none;

background-size: cover;

margin-left: -80px;

margin-right: 80px;

padding: 0;

width: 780px;

}

.hubpage .hub .hero:-ms-lang(ar, dv, fa, he, ku-Arab, pa-Arab, prs, ps, sd-Arab, syr, ug, ur, qps-plocm) {

margin-left: 80px;

margin-right: -80px;

}

.hubpage .hub .hero .win-hub-section-header {

display: none;

}

.hubpage .hub .section1 {

width: 420px;

}

.hubpage .hub .section1 .win-hub-section-content {

overflow-y: hidden;

}

.hubpage .hub .section1 .subtext {

margin-bottom: 7px;

margin-top: 9px;

}

.hubpage .hub .section2 {

width: 440px;

}

.hubpage .hub .section2 .win-hub-section-content {

overflow-y: hidden;

}

.hubpage .hub .section2 .item-title {

margin-top: 4px;

margin-bottom: 10px;

}

.hubpage .hub .section2 .article-header {

margin-bottom: 15px;

}

.hubpage .hub .section3 {

}

.hubpage .hub .section3 .itemslist {

height: 100%;

margin-left: -10px;

margin-right: -10px;

margin-top: -5px;

}

.hubpage .hub .section3 .itemslist .win-container {

margin-bottom: 11px;

margin-left: 33px;

margin-right: 33px;

margin-top: 5px;

}

.hubpage .hub .section3 .itemslist .item {

-ms-grid-columns: 110px 10px 1fr;

-ms-grid-rows: 1fr;

display: -ms-grid;

height: 110px;

padding: 7px;

width: 480px;

}

.hubpage .hub .section3 .itemslist .item .item-info {

-ms-grid-column: 3;

}

.hubpage .hub .section3 .itemslist .item .item-info .item-title {

margin-top: 4px;

max-height: 20px;

overflow: hidden;

}

.sectionpage .itemslist .item .item-info .item-description {

max-height: 60px;

overflow: hidden;

}

.hubpage .hub .section3 .win-container {

margin-bottom: 36px;

margin-left: 10px;

margin-right: 10px;

}

.hubpage .hub .section3 .win-item {

height: 229px;

width: 310px;

}

.hubpage .hub .section3 .win-item img {

height: 150px;

margin-bottom: 10px;

width: 310px;

}

.hubpage .hub .section4 {

width: 400px;

}

.hubpage .hub .section4 .win-hub-section-content {

overflow-y: hidden;

}

.hubpage .hub .section4 .top-image-row {

height: 260px;

margin-bottom: 10px;

width: 400px;

}

.hubpage .hub .section4 .top-image-row img {

height: 100%;

width: 100%;

}

.hubpage .hub .section4 .sub-image-row {

margin-bottom: 20px;

display: -ms-flexbox;

-ms-flex-flow: row nowrap;

-ms-flex-pack: justify;

}

.hubpage .hub .section4 .sub-image-row img {

height: 95px;

width: 130px;

}

This is how Overview screen looks like right now

We did a Copy and paste of code from Section to Hub above. The interesting thing is that we didn't introduce a net new code above as we are still modifying templates. Please also note that in Hub.html "class="itemTemplate"" T (capital T). Substitute ".sectionpage" with ".hubpage .hub .section3"

Our next step is to add Demo Data to Production Manager App

For this purpose we will simply Demo Data in Data.js and introduce groups

Let's review how source code looked like Before changes

Data.js

(function () {

"use strict";

var list = new WinJS.Binding.List();

var groupedItems = list.createGrouped(

function groupKeySelector(item) { return item.group.key; },

function groupDataSelector(item) { return item.group; }

);

// TODO: Replace the data with your real data.

// You can add data from asynchronous sources whenever it becomes available.

generateSampleData().forEach(function (item) {

list.push(item);

});

WinJS.Namespace.define("Data", {

items: groupedItems,

groups: groupedItems.groups,

getItemReference: getItemReference,

getItemsFromGroup: getItemsFromGroup,

resolveGroupReference: resolveGroupReference,

resolveItemReference: resolveItemReference

});

// Get a reference for an item, using the group key and item title as a

// unique reference to the item that can be easily serialized.

function getItemReference(item) {

return [item.group.key, item.title];

}

// This function returns a WinJS.Binding.List containing only the items

// that belong to the provided group.

function getItemsFromGroup(group) {

return list.createFiltered(function (item) { return item.group.key === group.key; });

}

// Get the unique group corresponding to the provided group key.

function resolveGroupReference(key) {

return groupedItems.groups.getItemFromKey(key).data;

}

// Get a unique item from the provided string array, which should contain a

// group key and an item title.

function resolveItemReference(reference) {

for (var i = 0; i < groupedItems.length; i++) {

var item = groupedItems.getAt(i);

if (item.group.key === reference[0] && item.title === reference[1]) {

return item;

}

// Returns an array of sample data that can be added to the application's

// data list.

function generateSampleData() {

var itemContent = "Item Content:";

var itemDescription = "Item Description:";

var groupDescription = "Group Description:";

// These three strings encode placeholder images. You will want to set the

// backgroundImage property in your real data to be URLs to images.

var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";

var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";

var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";

// Each of these sample groups must have a unique key to be displayed

// separately.

var sampleGroups = [

{ key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription },

{ key: "group2", title: "Group Title: 2", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription },

{ key: "group3", title: "Group Title: 3", subtitle: "Group Subtitle: 3", backgroundImage: mediumGray, description: groupDescription },

{ key: "group4", title: "Group Title: 4", subtitle: "Group Subtitle: 4", backgroundImage: lightGray, description: groupDescription },

{ key: "group5", title: "Group Title: 5", subtitle: "Group Subtitle: 5", backgroundImage: mediumGray, description: groupDescription },

{ key: "group6", title: "Group Title: 6", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, description: groupDescription }

];

// Each of these sample items should have a reference to a particular

// group.

var sampleItems = [

{ group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },

{ group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },

{ group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

{ group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },

{ group: sampleGroups[0], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

{ group: sampleGroups[1], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: darkGray },

{ group: sampleGroups[1], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

{ group: sampleGroups[1], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: lightGray },

{ group: sampleGroups[2], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

{ group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: lightGray },

{ group: sampleGroups[2], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: darkGray },

{ group: sampleGroups[2], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: lightGray },

{ group: sampleGroups[2], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

{ group: sampleGroups[2], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: darkGray },

{ group: sampleGroups[2], title: "Item Title: 7", subtitle: "Item Subtitle: 7", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

{ group: sampleGroups[3], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: darkGray },

{ group: sampleGroups[3], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: lightGray },

{ group: sampleGroups[3], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: darkGray },

{ group: sampleGroups[3], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: lightGray },

{ group: sampleGroups[3], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

{ group: sampleGroups[3], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: lightGray },

{ group: sampleGroups[4], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },

{ group: sampleGroups[4], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },

{ group: sampleGroups[4], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: lightGray },

{ group: sampleGroups[4], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

{ group: sampleGroups[5], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },

{ group: sampleGroups[5], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },

{ group: sampleGroups[5], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

{ group: sampleGroups[5], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },

{ group: sampleGroups[5], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: lightGray },

{ group: sampleGroups[5], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

{ group: sampleGroups[5], title: "Item Title: 7", subtitle: "Item Subtitle: 7", description: itemDescription, content: itemContent, backgroundImage: darkGray },

{ group: sampleGroups[5], title: "Item Title: 8", subtitle: "Item Subtitle: 8", description: itemDescription, content: itemContent, backgroundImage: lightGray }

];

return sampleItems;

}

})();

Now we'll look at how source code looks like After changes

Data.js

(function () {

"use strict";

var list = new WinJS.Binding.List();

var groupedItems = list.createGrouped(

function groupKeySelector(item) { return item.group.key; },

function groupDataSelector(item) { return item.group; }

);

// TODO: Replace the data with your real data.

// You can add data from asynchronous sources whenever it becomes available.

generateSampleData().forEach(function (item) {

list.push(item);

});

WinJS.Namespace.define("Data", {

items: groupedItems,

groups: groupedItems.groups,

getItemReference: getItemReference,

getItemsFromGroup: getItemsFromGroup,

resolveGroupReference: resolveGroupReference,

resolveItemReference: resolveItemReference

});

// Get a reference for an item, using the group key and item title as a

// unique reference to the item that can be easily serialized.

function getItemReference(item) {

return [item.group.key, item.title];

}

// This function returns a WinJS.Binding.List containing only the items

// that belong to the provided group.

function getItemsFromGroup(group) {

return list.createFiltered(function (item) { return item.group.key === group.key; });

}

// Get the unique group corresponding to the provided group key.

function resolveGroupReference(key) {

return groupedItems.groups.getItemFromKey(key).data;

}

// Get a unique item from the provided string array, which should contain a

// group key and an item title.

function resolveItemReference(reference) {

for (var i = 0; i < groupedItems.length; i++) {

var item = groupedItems.getAt(i);

if (item.group.key === reference[0] && item.title === reference[1]) {

return item;

}

// Returns an array of sample data that can be added to the application's

// data list.

function generateSampleData() {

var itemContent = "Item Content:";

var itemDescription = "Item Description:";

var groupDescription = "Group Description:";

// These three strings encode placeholder images. You will want to set the

// backgroundImage property in your real data to be URLs to images.

// Each of these sample groups must have a unique key to be displayed

// separately.

var sampleGroups = [

{ key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription },

{ key: "group2", title: "Group Title: 2", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription },

{ key: "group3", title: "Group Title: 3", subtitle: "Group Subtitle: 3", backgroundImage: mediumGray, description: groupDescription },

{ key: "group4", title: "Group Title: 4", subtitle: "Group Subtitle: 4", backgroundImage: lightGray, description: groupDescription },

{ key: "group5", title: "Group Title: 5", subtitle: "Group Subtitle: 5", backgroundImage: mediumGray, description: groupDescription },

{ key: "group6", title: "Group Title: 6", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, description: groupDescription }

];

var sampleGroups = [

{ key: "current", title: "Current orders", subtitle: "Current orders", backgroundImage: darkGray, description: groupDescription },

{ key: "delayed", title: "Delayed orders", subtitle: "Delayed orders", backgroundImage: lightGray, description: groupDescription }