hi suresh,
I assume that you already have Windows Azure Subscription account to complete this walkthrough. In case you don’t you may want to sign up for the free trial here: www.windowsazure.com/.../free-trial
Now let’s review the process step-by-step!
Mobile services
Currently I don’t have any Mobile service, so I’m going to create one for Case management
New Mobile service (1)
Here I’ll specify a name and the fact that I’ll be using SQL database to store case data in the Cloud
New Mobile service (2)
Here I’ll specify database settings which include name of the database and login credentials
Mobile services
My Windows Azure Mobile Service for Case management has been created. The creation process takes only couple of minutes and your Mobile Services is up and running
This mobile service is up and running
Mobile service (Case management)
Once my Mobile Service has been created I can now focus on defining a database structure to support cases tracking and also creating a client application using programming language I prefer (C# in my case)
Get started
Get started page allows you to download a sample app which is already pre-configured to work with your mobile service
Download
You can download this sample app as zip archive
But before we write a client application we’ll first define the structure of the database to allow us to track cases
SQL database (casemanagement_db)
Please note that casemanagement_db database has been already created as a part of Mobile Service creation
Mobile service (casemanagement) - Data
Currently I don’t have any tables related to casemanagement Mobile Service, so I’m going to create table called “case” to track cases
Create new table
Here I’ll specify table name and appropriate permissions
Mobile service (casemanagement) - Data
Now once I have created a new table “case” I can define necessary columns in order to store case data by switching to the database design experience (Manage). SQL Database Management URL schematically will look like (this URL is not real): database.windows.net$database=casemanagement_db
SQL Database Management
SQL Database Management Portal
In SQL Database Management Portal I’ll switch to Design mode to define the structure of “case” table
SQL Database Management Portal - Design
SQL Database Management Portal - Design
In “case” table ID field was created automatically and I created one more field called “Description”
Now if I get back to Windows Azure Portal I’ll see the reflection of changes I made in SQL Database Management Portal on Mobile Service page
Mobile service - Columns
We just finished with the database portion and it’s time to get back to the client application
I’ve already downloaded zip archive with sample app, then I’ll unzip it and make appropriate code changes
casemanagement Client app
Solution Explorer
The structure of sample C#.NET project is depicted in Solution Explorer
This app is already preconfigured to work with Case management Mobile Service
// This MobileServiceClient has been configured to communicate with your Mobile Service's url
// and application key. You're all set to start working with your Mobile Service!
public static MobileServiceClient MobileService = new MobileServiceClient(
"casemanagement.azure-mobile.net/",
""
);
Please note that Mobile Service Application key is the second parameter in MobileServiceClient class constructor
Manage Access Keys
You can retrieve Mobile Service Application Key from Mobile Service page (Access Keys) in Windows Azure Portal
Now we’ll make appropriate changes to the business logic and markup in order to track cases
Please see the source code below
C# (Business Logic)
using Microsoft.WindowsAzure.MobileServices;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace casemanagement
{
public class Case
{
public int Id { get; set; }
[JsonProperty(PropertyName = "description")]
public string Description { get; set; }
}
public sealed partial class MainPage : Page
{
private MobileServiceCollection<Case, Case> caseItems;
private IMobileServiceTable<Case> caseTable = App.MobileService.GetTable<Case>();
public MainPage()
{
this.InitializeComponent();
}
private async void InsertCase(Case caseItem)
{
// This code inserts a new case into the database. When the operation completes
// and Mobile Services has assigned an Id, the item is added to the CollectionView
await caseTable.InsertAsync(caseItem);
caseItems.Add(caseItem);
}
private async void RefreshCases()
{
MobileServiceInvalidOperationException exception = null;
try
{
// This code refreshes the entries in the list view by querying the cases table.
caseItems = await caseTable.ToCollectionAsync();
}
catch (MobileServiceInvalidOperationException e)
{
exception = e;
}
if (exception != null)
{
await new MessageDialog(exception.Message, "Error loading cases").ShowAsync();
}
else
{
ListItems.ItemsSource = caseItems;
}
}
private void ButtonRefresh_Click(object sender, RoutedEventArgs e)
{
RefreshCases();
}
private void ButtonSave_Click(object sender, RoutedEventArgs e)
{
var caseItem = new Case { Description = DescriptionInput.Text };
InsertCase(caseItem);
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
RefreshCases();
}
}
}
XAML (Markup)
<Page
x:Class="casemanagement.MainPage"
IsTabStop="false"
xmlns="schemas.microsoft.com/.../presentation"
xmlns:x="schemas.microsoft.com/.../xaml"
xmlns:local="using:casemanagement"
xmlns:d="schemas.microsoft.com/.../2008"
xmlns:mc="schemas.openxmlformats.org/.../2006"
mc:Ignorable="d">
<Grid Background="White">
<Grid Margin="50,50,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0" Grid.ColumnSpan="2" Margin="0,0,0,20">
<StackPanel>
<TextBlock Foreground="#0094ff" FontFamily="Segoe UI Light" Margin="0,0,0,6">WINDOWS AZURE MOBILE SERVICES</TextBlock>
<TextBlock Foreground="Gray" FontFamily="Segoe UI Light" FontSize="45" >casemanagement</TextBlock>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<StackPanel>
<local:QuickStartTask Number="1" Title="Insert a case" Description="Enter some description below and click Save to insert a new case into your database" />
<StackPanel Orientation="Horizontal" Margin="72,0,0,0">
<TextBox Name="DescriptionInput" Margin="5" MinWidth="300"></TextBox>
<Button Name="ButtonSave" Click="ButtonSave_Click">Save</Button>
</StackPanel>
</StackPanel>
</Grid>
<Grid Grid.Row="1" Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel>
<local:QuickStartTask Number="2" Title="Query and Update Data" Description="Click refresh below to load cases from your database" />
<Button Margin="72,0,0,0" Name="ButtonRefresh" Click="ButtonRefresh_Click">Refresh</Button>
</StackPanel>
<ListView Name="ListItems" Margin="62,10,0,0" Grid.Row="1">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Name="TextBlockDescription" Text="{Binding Description}" Margin="10,0" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Grid>
</Grid>
</Page>
As the result our client app will look like this
Case management Client app
Case management client app will display the list of cases stored in the database and will allow you to create a new case by providing a description. When I create new case in Case management Client app I can review the data in Windows Azure Portal on Mobile Service page (Browse)
Mobile service (case) - Browse
The next step will be to integrate Case management Mobile Service with Microsoft Dynamics AX 2012. This can be done by means of Windows Azure Service Bus. Please see more details about Developing mobile apps for Microsoft Dynamics AX 2012 here: www.microsoft.com/.../details.aspx
Service bus
Currently I don’t have Service bus for integration and I’m going to create one
Create a namespace
Here I’ll specify namespace name and preferred data center location
Service bus
As the result in couple of minutes my Service bus will be ready to go
Service bus - Queues
Case management Mobile Service will send messages to Microsoft Dynamics AX 2012 by means of Service bus Queue, that’s why I’ll need to create a queue for the integration
Create queue
Here I’ll specify queue name and preferred data center location
Service bus - Queue
Finally Cases queue has been created. And now I can review Service bus Connection information
Access connection information
Now we can write a script which will be executed every time we insert a record into “case” table
Mobile service - Script
Please note that I use Default Key in the code that connects to the Service bus queue. In particular, Default Key is a second parameter in createServiceBusService method
Source code:
function insert(item, user, request) {
var insertInQueue = function() {
var azure = require('azure');
var serviceBusService = azure.createServiceBusService('casemanagement', ' ');
serviceBusService.createQueueIfNotExists('cases', function(error) {
if (!error) {
serviceBusService.sendQueueMessage('cases', JSON.stringify(item), function(error) {
if (!error) {
console.log('sent message: ' + item.id);
}
});
}
});
};
request.execute({
success: function () {
insertInQueue();
request.respond();
}
});
}
In the code I also check if there’s a queue called “cases” and create this queue programmatically if necessary
If I create new case in Case management Client app now, the new record will be written into Service bus Queue
Case management Client app
Mobile service - Browse
New record is create in “case” table
Service bus - Queue
As well as new record has been written into Service bus queue. You can see that Queue length is 1 now. You may also ask Can I manipulate Service bus queue in Visual Studio 2012? Yes, you can. In order to do that I’ll first install Windows Azure SDL for .NET (Visual Studio 2012)
Windows Azure SDK for .NET (VS 2012)
Windows Azure SDK for Visual Studio 2012 gives you an ability to access Windows Azure Subscription details from within Visual Studio 2012
Server Explorer
In order to connect to your Windows Azure Subscription account you will need to import Subscription settings file in Import Windows Azure Subscriptions dialog
Import Windows Azure Subscriptions
You can initially download Subscription settings file from Windows Azure Portal
When connected you will be able to see the details about your Windows Azure Service bus Queues
Server Explorer
After case record has been written to Service bus Queue it will be synchronized to Microsoft Dynamics AX 2012 by means of Microsoft Dynamics AX Connector for Mobile Apps. Details about configuration of Microsoft Dynamics AX Connector for Mobile Apps will be provided in a separate article for the sake of clarity. Please find more information about Configuring Microsoft Dynamics AX 2012 Connector for Mobile Apps here: www.microsoft.com/.../details.aspx
As the result information about case will be synchronized to Microsoft Dynamics AX 2012
Microsoft Dynamics AX 2012
Please note that Windows Azure Mobile Services also support custom APIs
As you can see Windows Azure Mobile Services provides a modern development experience for developing mobile apps which may be integrated with Line of Business (LOB) applications.
