The Microsoft Dynamics CRM Blog
News and views from the Microsoft Dynamics CRM Team

Connecting CRM Online and a Windows 8 Tiled App

Connecting CRM Online and a Windows 8 Tiled App

  • Comments 1

Windows 8 has opened up a new world of exciting possibilities for Microsoft Dynamics CRM and App development. Many of you have seen the preview demonstrations of the touch-enabled CRM sales app that is coming, and this is just one example of the powerful capabilities provided by the combination of Windows 8 and Dynamics CRM.

We did a Windows RT Example Blog post last fall that provided a library for authenticating and sending SDK requests to the Dynamics CRM service. This post takes that article a step further, automating the login process to demonstrate a Windows 8 App connecting to Microsoft Dynamics CRM Online and displaying CRM information in the app. The example provided below highlights the basics and is intended to give readers the information they need to modify and build on the code so that they can use the new features of Windows 8 to develop some great CRM apps.

Note: Modifying the app further requires previous Windows 8 C# programming experience, but an exploration of Windows 8 App development is beyond the scope of this article, but some great resources such as downloadable tools, free eBooks, and hands-on-labs are available on the Windows 8 MSDN Site. Also note that the sample presented here works only with Dynamics CRM Online using O365 authentication credentials; modifying the authentication is also beyond the scope of this article.

The associated downloadable project (link at the end of this article) includes all the code that is illustrated in this article, but the detailed steps are laid out for you here. I’d like to thank Jono Lind for his help with the automated authentication pieces!

Here is a screenshot of the Windows 8 App:

Clicking on any of the tiles, such as the Accounts tile, can load another page that shows the CRM data for that record type, but in the example App, only the Accounts and Tasks tiles are enabled (Exercise: modify the App to make other tiles work!). There are tiles for Leads, Opportunities, Accounts, Contacts, and Tasks, and also provided is a “Placeholder” image that can be remove from the app or modified to display other CRM information.

The first step in setting this up is to change the instance and login information so that you can run the app and ensure that you can connect. Start Visual Studio and open the solution, and then open the file “CurrentEnvironment.cs.”

You’ll need to change lines 36-38 to match your instance; for example, with the following information:

Instance Name: CrmDemo
UserName: admin@crmdemo.onmicrosoft.com
Password: pass@word1

The lines would be changed to:

public static Uri OrganizationServiceUri = new
           Uri(@"https://crmdemo.api.crm.dynamics.com/XRMServices/2011/Organization.svc");
public static string UserName = "admin@crmdemo.onmicrosoft.com";
public static string Password = "pass@word1";

This is illustrated in the following graphic:

After making this change, you should be able to run the app and connect.

Now let’s take a look at adding the functionality to the app to display the Accounts in your CRM system. The tasks view uses a List box, so we’ll use the same format for the Accounts. In Visual Studio there are two files involved with displaying the Tasks: the “TaskModel.cs” file in the “Models” folder, and the “TasksView.Xaml” file called in the “Views” folder.

In the Models folder, right-click on the “TaskModel.cs” file, choose Copy, right-click on the Models folder, and then click Paste. This will create a file called “Copy of TasksModel.cs”. Repeat this process in the Views folder for the file “TasksView.xaml” to create a file called “Copy of TasksView.xaml.”

At this point, Solution Explorer should display as follows:

Right-click on the file “Copy of TasksModel.cs”, choose Rename, and rename the file to “AccountsModel.cs”. Repeat this process for the “Copy of TasksView.xaml” file in the “Views” folder, naming the file “AccountsView.xaml.”

Solution Explorer should now display as follows:

 

Double-click “AccountsModel.cs” to open the file, find every instance of the word “Task” and replace it with Account (except in the “using System.Threading.Tasks;” line!). Later on we’ll have to fix the queries and display code, but for now just do the find and replace. Repeat the process for the files “AccountsView.Xaml” and “AccountsView.Xaml.cs” in the “Views” folder.

At this point if you’ve replaced all the words “Task” correctly in the files, you should be able to build the project successfully, although we cannot run it yet as we need to fix the queries and other code.

We’ll keep our retrieval relatively simple - let’s just grab a few fields (such as Name, Annual revenue, and Phone Number) for Account. In CRM, the schema names for those fields are name, revenue, and telephone1. In the file “AccountsModel.cs,” lines 16-18 are:

var query = new QueryExpression {EntityName = "Account", ColumnSet = new ColumnSet()};
query.ColumnSet.Columns.Add("subject”);
query.ColumnSet.Columns.Add("scheduledstart"); 

Change those lines to the following:

var query = new QueryExpression {EntityName = "account", ColumnSet = new ColumnSet()};
query.ColumnSet.Columns.Add("name");
query.ColumnSet.Columns.Add("emailaddress1");
query.ColumnSet.Columns.Add("telephone1");

A little further down in the file (should be lines 35-38), there is the following code:

if (item.Contains("subject") && item.Contains("scheduledstart"))
{
var AccountItem = new AccountClass(item["subject"].ToString(),
(DateTime)item["scheduledstart”]);
AccountsCollection.Add(AccountItem);
}

Change this code to:

if (item.Contains("emailaddress1") && item.Contains("telephone1"))
{
var AccountItem = new AccountClass(item["name"].ToString(),  
                                     item["emailaddress1"].ToString(),   
                                     item["telephone1"].ToString());
AccountsCollection.Add(AccountItem);
}

The next step is to modify the Account class to use the fields we are retrieving. Replace the Account class with this code:

public class AccountClass
{
   public string Name { get; set; }
   public string Email { get; set; }
   public string Phone { get; set; }

   public AccountClass(string nam, string em, string tel)
  {
     Name = nam;
     Email = em;
     Phone = tel;
  }
}

Next, we need to make similar changes to the “AccountsView.xaml.cs” file in the “Views” folder.

In the “OnNavigatedTo” method, change the lines

var query = new QueryExpression {EntityName = "Account", ColumnSet = new ColumnSet()};
query.ColumnSet.Columns.Add("subject");
query.ColumnSet.Columns.Add("scheduledstart");
var order = new OrderExpression {AttributeName = "scheduledstart", OrderType = OrderType.Ascending}; 

To:

var query = new QueryExpression {EntityName = "account", ColumnSet = new ColumnSet()};
query.ColumnSet.Columns.Add("name");
query.ColumnSet.Columns.Add("emailaddress1");
query.ColumnSet.Columns.Add("telephone1");          
var order = new OrderExpression {AttributeName = "name", OrderType = OrderType.Ascending};

In the “RetrieveMultipleComplete” method, change the lines:

if (item.Contains("subject") && item.Contains("scheduledstart"))
{
var AccountItem = new Models.AccountClass(item["subject"].ToString(), 
                                                   (DateTime)item["scheduledstart"]);
AccountsCollection.Add(AccountItem);
}

To:

if (item.Contains("emailaddress1") && item.Contains("telephone1"))
{
var AccountItem = new Models.AccountClass(item["name"].ToString(),    
                                                   item["emailaddress1"].ToString(),
                                                   item["telephone1"].ToString());
AccountsCollection.Add(AccountItem);

Lastly replace the Account class with this code:

public class AccountClass

  public string Name { get; set; }
  public string Email { get; set; }
  public string Phone { get; set; }

  public AccountClass(string nam, string em, string tel)
  {
     Name = nam;
     Email = em;
     Phone = tel;
  }
}

At this point, you should be able to build with no errors so press F6 to test the build. 

We now need to modify the XAML file to show our Account data. Open “AccountsView.xaml” and find the lines:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ScheduledStart}" Margin="3" Grid.Column="0" FontWeight="Bold" FontSize="12" TextWrapping="Wrap" />
<TextBlock Text="{Binding Subject}" Margin="3" Grid.Column="1" TextWrapping="Wrap" />

And change these lines to:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Margin="3" Grid.Column="0" FontWeight="Bold" FontSize="12" TextWrapping="Wrap" />
<TextBlock Text="{Binding Phone}" Margin="3" Grid.Column="1" FontWeight="Bold" FontSize="12" TextWrapping="Wrap" />
<TextBlock Text="{Binding Email}" Margin="3" Grid.Column="2" FontWeight="Bold" FontSize="12" TextWrapping="Wrap" />

The next part is to enable the “Click” of the Accounts tile on the MainPage to show the Accounts in the system. Double-click “MainPage.xaml.cs,” and find the lines:

private void ShowTasks()
{
    NavigateTo(typeof(Tasks));

And add this code directly below that method:

private void ShowAccounts()
{
    NavigateTo(typeof(Accounts));
}

Next find the itemGridView_ItemClick method, and replace the method with these lines:

private void itemGridView_ItemClick(object sender, ItemClickEventArgs e)
{
    MainPageItem selItem = (MainPageItem)e.ClickedItem;
    strItemClicked = selItem.Name;
    if (strItemClicked.Equals("Tasks"))
        this.NavigateTo(typeof(Tasks));
    if (strItemClicked.Equals("Accounts"))
        this.NavigateTo(typeof(Accounts));
}

You should now be able to run the code, and when you click the “Accounts” tile you should get a listing of your Accounts similar to the following:

Now that you have the basics in place, you can modify the Windows 8 Project in whatever way you want! For example, an immediate enhancement that I’ll be working on is to enable Contacts functionality, and I am going to use an Items view to display the Contacts, and perhaps integrate Skype and/or Lync. The sky is the limit for Windows 8 and CRM apps!

Download the full Visual Studio project code from CRM2011WinRtDemo Source. 

Regards,
John Straumann
Senior Technical Product Manager
Dynamics CRM Product Marketing Group

 

  • Great article and good to see MSFT giving a leg up to app development with Windows 8 and CRM.   I am curious why the sample app will only work with CRM Online and not an Internet Facing Deployment of on-premise CRM.  

    Thanks  

    Scott J

Page 1 of 1 (1 items)
Leave a Comment
  • Please add 1 and 1 and type the answer here:
  • Post