Thursday, March 20, 2014

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.

3 comments:

  1. Hi Alex,
    What happened to part 2? Or is “3” just a typo in the headline? Unfortunately I did not have the time yet to follow your tutorial but looking forward to a lazy Saturday afternoon and play with this. Please keep up the great work!


    (You posted part 1 here so far: http://ax2012aifintegration.blogspot.com/2014/03/rapid-business-apps-development-series.html)

    cheers

    ReplyDelete
    Replies
    1. Hi Kim!

      Good catch!

      Part 2 is about Expression Blend experience for Designer. The document is larger than this one, and I just published Part 3 focusing on User (Business Analyst) experience before Part 2
      I'll publish Part 2 today, so we can look at Building modern Windows 8 App from perspective of 3 groups of people at the company also taking into account a collaboration aspect:
      - Developer
      - Designer
      - User (Business Analyst)

      Thanks much for you interest in this topic!

      Best Regards,
      /Alex

      Delete