Rapid Business Apps Development Series – Part 3 (Project Siena)

Rapid Business Apps Development Series – Part 3 (Project Siena)

 

Purpose: The purpose of this series is to illustrate how to rapidly build 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 Communication Infrastructure, and more.

 

Challenge: Small and large companies in the world have employees who use IT systems on a daily basis. These people are Users, Power Users, Business Analysts, etc. Often times they don't have development skills or know a little about it. Would it be great if *I*, for example, as a Business Analyst who understands business inside-out were able to quickly build Windows 8 Apps for business? Probably I would demand this experience to be as simple as just to use Microsoft Excel, for example. I this walkthrough we will consider one of Manufacturing industry workloads 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 customer perspective who may have people with in depth understanding of the business, but maybe without any development skills. In this walkthrough I'll try to be one of those Business Analysts who wants to develop a concept modern Windows 8 App for Production Manager described above within 10 mins or so. All I need in this particular case is a PC running Windows 8.1 and Project Siena App installed on it. Microsoft Project Siena (code name) is a new technology for business experts and other app imagineers. Now, without any programming, you can create apps that harness the power of corporate data and content, and web services.

 

Please note that in this document I assume that the reader may not have any development skills, but certainly has a desire to quickly build modern Windows 8 App for business.

 

Please find more info about Project Siena here: http://www.microsoft.com/en-us/projectsiena/default.aspx

 

Walkthrough

 

Let's begin!

 

In the previous walkthrough (Part 1) we have defined a business scenario for Production Manager App.

 

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 in order to start building my App I'll need to install Project Siena App from Windows Store. Please find more info about Project Siena App here: http://apps.microsoft.com/windows/en-us/app/microsoft-project-siena/5ae47651-e8f3-4e41-aab7-e19ab1b80180

 

In Project Siena I as Business Analyst will be able to design screens for my App, define the data to work with and much more. My goal is still to do this within 10 minutes

 

Let's get to work now

 

First step will be to launch Project Siena App. The first thing you will see will be a blank Screen 1 inviting you to add your first visual element to the App.

 

Screen 1 – Add Visual

 

 

Project Siena provides a wide range of User Interface controls at your fingertips. You can find everything from a simple text label to camera and video player control.

 

Visuals

 

 

Project Siena also provides an extended list of Galleries in order to display and work with lists/groups of items

 

Galleries

 

 

As well as a long list of shapes as described below. Please note that among these shapes we also have "Back arrow" and "Next arrow" to facilitate the organization of navigation

 

Shapes

 

 

Before we get to the actual design of the App screen we'll first define our data set. For the sake of simplicity I'll be using Excel file with information about Production orders as described below. In next walkthroughs we'll cover aspects of how to import and export data to/from Microsoft Dynamics AX 2012 in more details.

 

Data

 

 

Please note that I created Excel table which is currently required so Project Siena Importer can import the data into the App

 

Once Excel file is ready to go we can now Import data into the App using Excel Data Source

 

Data Sources

 

 

Once the data gets imported you can also review it in Project Siena

 

Excel tables (Importer)

 

 

Now it's time to design screens for our App.

 

It is very easy to build the App in Project Siena using its very intuitive drag-n-drop User Interface. So after a few minutes of designing this is what I've got. As you can see I used number of Labels, Image for Hero graphics, Custom Gallery to represent the list of Production orders, and another image and rectangles to design how each list element will look like

 

Manufacturing Companion – Screen 1

 

 

It will also take me only few minutes to design Screen 2 with the details of selected Production order. In this case I used image in Overview section, 2 Labels as section headers and number of Labels with specifics about Production order

 

Manufacturing Companion – Screen 2

 

 

In order to implement navigation from Screen 1 to Screen 2 when particular Production order is selected all you need to do is to define OnSelect behavior (in this case I defined it on image object). You typically don't need to type much because Project Siena will try to suggest you appropriate selections depending on the situation (for example, from the drop-down list) 

 

Behavior

 

 

Another typical task would be to take into account a context – selected list element – in order to display appropriate Production order details. This is very easy to do as well by defining Label Text property based on elements of your data set

 

Dynamic data

 

 

There're couple of things left before our App will become operational. One of them is to provide a "Back button" in order to navigate from Production order Details screen back to Production orders List screen. In this case we'll use "Back button" from the list of Shapes. Similar to our previous example we'll override OnSelect behavior by specifying what Screen we have to navigate to

 

Navigation (Shapes > Back button)

 

 

Finally we'll use Excel-like aggregate function to display statistics about how many Production orders we currently have on the screen ("4 Current orders"). For this task we will override Text property of Label control using "CountRows" built-in function

 

Statistics 

 

 

As the result within 10 minutes we have our Production Manager App ready!

 

When you are ready to publish your App you can use File > Publish function which will create a Published Package to use for App installation. 

 

At the end of this walkthrough we'll also review an anatomy of Project Siena artifacts (more from Developer point of View)

 

Project Siena file contains all info about the structure of you App

 

Project Siena file (App1)

 

 

After you Publish your App the system will create a PublishedPackage folder which will have a subfolder with all necessary artifacts as well as InstallApp file used to install your App on a target machine

 

PublishedPackage folder

 

 

Here's how a typical contents of Artifacts folder looks like

 

SienaApp1 - Artifacts

 

 

If we come back to App1 Project Siena file it is an archive which contains a number of files

 

App1 - Archive 

 

 

For example, Properties.json file contains a general info about your App

 

Properties

 

 

Similarly InstallApp is another archive which contains a number of files

 

InstallApp

 

 

Now you can also compare Project Siena file structure with typical Visual Studio 2013 Windows 8 App file structure in order to see some similarities and differences

 

App1 – Visual Studio 2013 Windows 8 HTML5/JavaScript App (1)

 

 

App1 – Visual Studio 2013 Windows 8 HTML5/JavaScript App (2)

 

 

App1 – Visual Studio 2013 Windows 8 HTML5/JavaScript App (3)

 

 

Summary: This document describes how Business Analysts and other company Users can use Project Siena App to rapidly build modern Windows 8 App implementing a real-world scenarios. Microsoft Project Siena (code name) is the beta release of a new technology for business experts, business analysts, consultants and other app imagineers. It allows you to create powerful, interactive, device-first and cloud-connected apps in a matter of a few hours – as easily as editing a document. I encourage you to check out other examples of Apps you can build using Project Siena on Channel 9 here: http://channel9.msdn.com/Blogs/Microsoft-Project-Siena

 

Author: Alex Anikiev, PhD, MCP

 

Tags: Dynamics ERP, Apps, Windows 8.1, Project Siena, HTML5, CSS, JavaScript, User Interface, Manufacturing, Production Manager.

 

Note: This document is intended for information purposes only, presented as it is with no warranties from the author. This document may be updated with more content to better outline the concepts and describe the examples.