Building Silverlight Web Resources for CRM 2011

Building Silverlight Web Resources for CRM 2011

Microsoft CRM 2011 Beta has been out for a number of weeks now and there has been a lot of great feedback from the community. Every single day, new resources and tutorials on CRM 2011 were published to help getting everyone up to speed with all the new features of CRM 2011.

One of the coolest feature from CRM 2011 is Web Resources. Web Resources allows you to store client side code such as HTML pages, Javascripts, CSS, or even Silverlight xap file. Once you create a web resource, you can use it across multiple entities. So it’s like, you deploy it once and use everywhere. Yes, you can also reference Web Resources from other solutions.

Also, if you have users running Outlook Client, it will automatically push these Web Resources (including any future updates) to each user machines. And the best thing of all, you don’t have to write a single code to do this. It’s all done taken care of by the CRM Outlook Client.

This blog post will cover building your first Silverlight Web Resource for CRM 2011. I will go through the step by step from building your “CRM Hello World” Silverlight application in Visual Studio, deploying it to CRM 2011 Online as Web Resource, and integrating it into theContact entity form. On top of displaying the standard “Hello World”, the Silverlight app will also show the CRM Server Url that it’s running on as well as the current Record Id.

Prerequisites:

- CRM 2011 Online Beta or OnPremise (VHD). If you don’t have either of these, please sign up to the CRM 2011 Online Beta (it’s free!)

- Visual Studio 2010 with Silverlight 4 Tools for Visual Studio 2010 installed

So here it is….

Step 1 – Create New Silverlight Project in Visual Studio

Select Silverlight Application and type in the Project Name

Go with the default settings. For this particular demo, we will not be using WCF RIA Services.

Add 3 textblocks in the MainPage.xaml so that the code looks like this.

"CrmSilverlightApp.MainPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    "LayoutRoot" Background="White">

            "CRM Hello World" />

            "CrmServerUrl" />

            "CrmRecordId" />

In the Loaded event of MainPage.xaml.cs, we populate the value of CrmServerUrl and CrmRecordId textblocks. On the next part of this series, we will use the CrmServerUrl value to interact with the CRM 2011 REST API.

using System.Windows; using System.Windows.Controls;  namespace CrmSilverlightApp {     public partial class MainPage : UserControl     {         public MainPage()         {             InitializeComponent();             Loaded += MainPage_Loaded;         }          private void MainPage_Loaded(object sender, RoutedEventArgs e)         {             CrmServerUrl.Text = ServerUtility.GetServerUrl();             CrmRecordId.Text = ServerUtility.GetRecordId().ToString();         }     } }

The ServerUtility class used in the above code is what does all the work to get the CRM Server Url. It does so by invoking the “Xrm.Page.context.getServerUrl” javascript. By default, the Silverlight application has no knowledge about the “Xrm.Page” context. In order for the Silverlight app to access the “Xrm.Page” context, you will need to referenceClientGlobalContext.js.aspx in the HTML page that hosts the Silverlight app. SeeCrmSilverlightApp.html in the attached code for more details.

Step 2 – Deployment time!

So, we’ve created a simple Silverlight application and now it’s time to deploy it to CRM 2011. For this particular demo, I’ll use my instance of CRM 2011 Online Beta.

Login to your CRM 2011 instance and browse to Settings – Solutions. In real world scenario, you probably want to consider deploying it into your own Solution. But for this post, I’ll just use the Default solution.

Once you have the Default solution open, browse to the Web Resources menu and click Newto create new web resource. The best practice is to create two web resources. One for the Silverlight app and the other one for the HTML page that hosts the Silverlight app. That way, if we need to reference external javascript files (eg: ClientGlobalContext.js.aspx), we can do so easily by modifying the hosting HTML page.

Let’s create the first Web Resource for the Silverlight app. BIG NOTE: when you are entering the name, ensure that you put leading forward slash at the start. So the name becomes /ClientBin/CrmSilverlightApp.xap. This is to ensure that your Silverlight app will work on both Online and OnPremise.

Click Save and Close after that. Now, move on to creating the second Web Resource for the hosting HTML page. Again, the same rule applies for the Name field here.

Once you’ve saved the form, click Publish All Customizations and we’re done deploying it to CRM 2011. It’s pretty easy right?

Step 3 – Integrating to Account entity

So we’ve deployed the two web resources to CRM 2011, but how do we see it working?

Integrating Web Resources into a CRM form is relatively simple. Open up the Account form and select Web Resource from the Insert ribbon tab.

Browse to the CrmSilverlightApp.html page (not the actual Silverlight application) and enter both Name and Label information. Ensure that you untick the “Restrict Cross Site Scripting” and check the “Pass record objects type code and unique identifiers as parameters”.

Click OK and you should see new Web Resource appeared on the form.

Save and publish the form.

Now, when you open up the Account form, you will see the Silverlight application loaded and display the Hello World message along with the CRM Server Url and the current Record Id.

Cheers!!

If any issue please let me know.