Creating a Simple Windows 8 App for Dynamics AX
 

Creating a Simple Windows 8 App for Dynamics AX

on

  • 3,429 views

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

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

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

Statistics

Views

Total Views
3,429
Views on SlideShare
3,427
Embed Views
2

Actions

Likes
4
Downloads
185
Comments
0

1 Embed 2

http://bottlenose.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Creating a Simple Windows 8 App for Dynamics AX Creating a Simple Windows 8 App for Dynamics AX Presentation Transcript

  • Dynamics AX | Windows 8 | HTML5CREATING A SIMPLE WINDOWS 8 APP FORDYNAMICS AX Wouldn’t it be nice to be able to browse your Dynamics AX data directly from Windows 8? In this short walkthrough we will show you how you can quickly create a simple Windows 8 application written in HTML5 that will allow you to do that, and it’s really not that hard… © 2012. All rights reserved.
  • Get Windows 8 andVisual Studio 2012There are two pre-requisites for this walkthrough, butluckily these are available for free as RTM versions. So ifyou don’t already have a licensed copy of Windows 8 andVisual Studio 2012, then download them from here:Windows 8 RTM : http://msdn.microsoft.com/en-US/windows/apps/br229516.aspxVisual Studio 2012 Express RTM for Windows 8:http://msdn.microsoft.com/en-US/windows/apps/br229516.aspx © 2012. All rights reserved.
  • Create A Windows8 Grid AppFor this example, there is no need to create an applicationcompletely from scratch. We will use the Windows 8 GridApp template to do most of the work for us. © 2012. All rights reserved.
  • Create A Windows8 Grid AppAfter creating the initial project, we will have all of theinternal plumbing that we need in the set set of steps. © 2012. All rights reserved.
  • Create A Windows8 Grid AppIf we run the application in the simulator we can see thegeneral framework in action. © 2012. All rights reserved.
  • Populate the Appwith AX DataIf we look in the /js folder in the project that we justcreated, there is a snippet of code that populates theapplication with sample data. Rather than use the pre-canned data, we want to have AX data in the application. © 2012. All rights reserved.
  • Populate the Appwith AX DataThe easiest way to publish information is through theOdata Document Services. This feature in AOT allows youto publish any query that you may have created out as aweb service.I want to be able to populate my app with Customerinformation, and to save time, I am going to use a querythat is already in the system. © 2012. All rights reserved.
  • Populate the Appwith AX DataThe next step is to make use that the query is activated inthe Document Data Sources (in the Organizational menu). © 2012. All rights reserved.
  • Populate the Appwith AX DataOnce you have activated the document source, you canthen view all of the published queries by browsing to theODataQueryService service:http://servername:8101/DynamicsAx/Services/ODataQueryService/ © 2012. All rights reserved.
  • Populate the Appwith AX DataIf you add the document service name to the end of theURL, then you will be able to see that the data is beingreturned as a feed:http://servername:8101/DynamicsAx/Services/ODataQueryService/CustTableMoreInformation © 2012. All rights reserved.
  • Populate the Appwith AX DataIf you view the source data, or export out the servicesource to Excel then you will be able to see the structureof the data. © 2012. All rights reserved.
  • Populate the Appwith AX DataHere is the raw XML viewed through Excel. © 2012. All rights reserved.
  • Populate the Appwith AX DataNow we just need to replace the sample data with AXdata. And the first step in order to do this is to read theweb 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");}); © 2012. All rights reserved.
  • Populate the Appwith AX DataNow that we have the data loaded, we just need to stepthrough the XML file and load the data into a datastructure 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); } © 2012. All rights reserved.
  • Populate the Appwith AX DataFinally we just need to push the items that we read fromAX into the list that will be shown by the application:itemList.forEach(function (item) { list.push(item); }); © 2012. All rights reserved.
  • Populate the Appwith AX DataTo tidy up the application we just borrowed a little bit ofcode from the sample data code snippet to give the tiles aconsistent background. © 2012. All rights reserved.
  • Populate the Appwith AX Data 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,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAA NSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC"; var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAA NSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC"; var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAA NSURBVBhXY5g8dcZ/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); }); });All in all, this is the code that we need to add to theapplication. © 2012. All rights reserved.
  • Our New Windows8 Application InActionNow when we run the app the system will access AX,retaining all of the security constraints that have beenplaced on the data – a much better choice than usingODBC or other direct database connections. © 2012. All rights reserved.
  • Our New Windows8 Application InActionAnd our new 60 second application is up and running. © 2012. All rights reserved.
  • Our New Windows8 Application InActionWith drill downs.How cool is that. © 2012. All rights reserved.
  • AdditionalResources &References http://blogs.msdn.com/b/davrous/archive/2012/06/04/windows-8-html5-metro- style-app-how-to-create-a-small-rss-reader-in-30min-part-1-2.aspx http://dynamics-ax.blogspot.com/2011/08/ax-2012-powerpivot-and-dash-of- odata.htmlNothing is every created in a vacuum, so here are two ofthe blog posts that I referenced as I cobbled together thisexample. © 2012. All rights reserved.
  • AboutMurray Fife