US flag RSMUS.com
Dynamics AX

Creating a Simple Windows 8 App for Dynamics AX

By - March 19, 2013

Wouldn’t it be nice to be able to browse your Dynamics AX data directly from Windows 8?

Creating a Simple Windows 8 App- pic1
In this short walkthrough, we will show you how you can quickly create a simple Windows 8 app written in HTML5 that will allow you to do just that, and it’s really not that hard…

Get Windows 8 and Visual Studio 2012

There are two pre-requisites for this walkthrough, but luckily these are available for free as RTM versions.  So if you don’t already have a licensed copy of Windows 8 and Visual Studio 2012, then download them from here:

Windows 8 RTM : Click here for more information.

Visual Studio 2012 Express RTM for Windows 8: Click here for more information.

Creating a Simple Windows 8 App- pic2

Create a Windows 8 Grid App

For this example, there is no need to create an application completely from scratch.  We will use the Windows 8 Grid App template to do most of the work for us.

Creating a Simple Windows 8 App- pic3

After creating the initial project, we will have all of the internal plumbing that we need in the set of steps.

Creating a Simple Windows 8 App- pic4

If we run the application in the simulator we can see the general framework in action.

Creating a Simple Windows 8 App- pic5

Populate the App with AX Data

If we look in the /js folder in the project that we just created, there is a snippet of code that populates the application with sample data.  Rather than use the pre-canned data, we want
to have AX data in the application.

Creating a Simple Windows 8 App- pic6

The easiest way to publish information is through the Odata Document Services.  This feature in AOT allows you to publish any query that you may have created out as a web service.

I want to be able to populate my app with Customer information, and to save time, I am going to use a query that is already in the system.

Creating a Simple Windows 8 App- pic7

The next step is to make use that the query is activated in the Document Data Sources (in the Organizational menu).

Creating a Simple Windows 8 App- pic8

Once you have activated the document source, you can then view all of the published queries by browsing to the ODataQueryService service.

Creating a Simple Windows 8 App- pic9

If you add the document service name to the end of the URL, then you will be able to see that the data is being returned as a feed.

Creating a Simple Windows 8 App- pic10

If you view the source data, or export out the service source to Excel then you will be able to see the structure of the data.

Creating a Simple Windows 8 App- pic11

Here is the raw XML viewed through Excel.

Creating a Simple Windows 8 App- pic12

Now we just need to replace the sample data with AX data.  And the first step in order to do this is to read the web service data into the application:

WinJS.xhr({ url: “http://192.168.252.82:8102/DynamicsAx/Services/ODataQueryService/CustTableMoreInformation” }).then(function (rss) {
var items = rss.responseXML.querySelectorAll(“properties”);
});

Creating a Simple Windows 8 App- pic13

Now that we have the data loaded, we just need to step through the XML file and load the data into a data structure that the application is able to process:

var itemList = new WinJS.Binding.List();
 
for (var n = 0; n < items.length && n < 25; n++) {
var item = {};
var custGroup = items[n].querySelector(“CustTable_1_CustGroup”).textContent;
var accountNum = items[n].querySelector(“CustTable_1_AccountNum”).textContent;
item.group = { key: custGroup, title: custGroup, subtitle: “”, backgroundImage: lightGray, description: “” };
item.title = accountNum;
item.subtitle = “Customer ” + accountNum;
item.content = “”;
item.backgroundImage = lightGray;
itemList.push(item);
}

Creating a Simple Windows 8 App- pic14

Finally we just need to push the items that we read from AX into the list that will be shown by the application:

itemList.forEach(function (item) {
list.push(item);
});

Creating a Simple Windows 8 App- pic15

To tidy up the application we just borrowed a little bit of code from the sample data code snippet to give the tiles a consistent background.

Creating a Simple Windows 8 App- pic16

All in all, this is the code that we need to add to the application.

WinJS.xhr({ url: “http://192.168.252.82:8102/DynamicsAx/Services/ODataQueryService/CustTableMoreInformation” }).then(function (rss) {
var items = rss.responseXML.querySelectorAll(“properties”);
 
var itemList = new WinJS.Binding.List();
 
var darkGray =
“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0I
Ars4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0c
PoPAANMAcOba1BlAAAAAElFTkSuQmCC”;
var lightGray =
“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0I
Ars4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp
/AAhpA3h+ANDKAAAAAElFTkSuQmCC”;
var mediumGray =
“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0I
Ars4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ
/AAY/AsAlWFQ+AAAAAElFTkSuQmCC”;
 
for (var n = 0; n < items.length && n < 25; n++) {
var item = {};
var custGroup = items[n].querySelector(“CustTable_1_CustGroup”).textContent;
var accountNum = items[n].querySelector(“CustTable_1_AccountNum”).textContent;
item.group = { key: custGroup, title: custGroup, subtitle: “”, backgroundImage: lightGray, description: “” };
item.title = accountNum;
item.subtitle = “Customer ” + accountNum;
item.content = “”;
item.backgroundImage = lightGray;
itemList.push(item);
}
 
itemList.forEach(function (item) {
list.push(item);
});
});

 

Our New Windows 8 Application in Action

Creating a Simple Windows 8 App- pic17

And our new 60 second application is up and running.

Creating a Simple Windows 8 App- pic18

With drill downs.

Creating a Simple Windows 8 App- pic19

How cool is that.

 

 

Popular Articles

Role center and dashboard basics in Microsoft Dynamics AX

January 30, 2015

Dynamics AX 2012 – How to Correct a Posted Invoice

October 25, 2016

Setup and process for intercompany trade in Microsoft Dynamics AX 2012 R3

September 2, 2015

Dynamics 365 for Finance and Operations: Using the Excel Data Connector

July 20, 2017

Using the Dynamics AX Collection Classes

August 28, 2014

Receive Posts by Email

Subscribe and receive notifications of new posts by email.

The Power of Being Understood Audit | Tax | Consulting

Links

Social

Copyright © 2023 RSM US LLP. All rights reserved. RSM US LLP is a limited liability partnership and the U.S. member firm of RSM International, a global network of independent audit, tax and consulting firms. The member firms of RSM International collaborate to provide services to global clients, but are separate and distinct legal entities that cannot obligate each other. Each member firm is responsible only for its own acts and omissions, and not those of any other party. Visit for more information regarding RSM US LLP and RSM International.

Terms of Use | Privacy Policy | Cookie Policy