Dynamics CRM in the Field

Information from the Microsoft Dynamics CRM PFE team working in the field

How to Create a Silverlight Web Resource that Interacts with CRM 2011 Forms

How to Create a Silverlight Web Resource that Interacts with CRM 2011 Forms

Rate This
  • Comments 13

Scenario:

The CRM users need the ability to retrieve, update, and Save form data from within a custom page on the CRM Form.  To accomplish this request we will be developing a Silverlight Web Resource.

The Silverlight Web Resource will be displayed on the CRM form to provide the user interface for retrieving and updating the data on the Account Form.

 

 Requirements:

-          CRM 2011

-          Visual Studio 2010

-          CRM 2011 SDK

http://www.microsoft.com/downloads/en/details.aspx?FamilyID=420f0f05-c226-4194-b7e1-f23ceaa83b69

Create a Silverlight Application

Step by Step

1.       Create a new Silverlight Project:

a.       Open Visual Studio 2010.

b.       Click File | New | Project.

c.        Under Installed Templates, click Visual C# | Silverlight and choose Silverlight Application. Name the project "SilverlightAccountPage". Click OK.

image

d.       Click Ok on the next window which will automatically create an Web project to host the Silverlight Application.

image

2.       Add a TextBox and Buttons to the MainPage.xaml page.

a.       Within Solution Explorer right click on the MainPage.xaml page and choose View Designer.

 

b.       Click View|Toolbox. When the toolbox window opens click the pin icon to keep the window open.

image

c.        Find the TextBox control within the Toolbox window. Drag the TextBox control onto the MainPage.xaml. This creates a single Textbox on the page.

image

d.       Right click the TextBox control and choose Properties. The properties window will display on your right hand side.

image

e.       At the top of the Properties window change the name to txtAccountName.

image

f.         Find the Button control within the Toolbox window. Drag the Button control onto the MainPage.xaml page under the textbox. This creates a single Button on the page.

image

g.       Right click the Button control on the MainPage.xaml page and choose Properties. The properties window will display on your right hand side.

image

h.       At the top of the Properties window change the name to btnUpdateData and update the Content property to “Update Data”.

image

i.         Add one more button to the page with the name of btnSaveData and Content property of “Save Data”.

image

 

 

3.       Add code to the Button’s Click Event.

a.       Double-Click the Set Data Button control on the MainPage.xaml page. This will take you to the MainPage.xaml.cs file where we can see the btnSetData_Click method.

image

b.        Add the following code within the btnSetData_Click code method.  This updates the name attribute on the Account form.

private void btnSetData_Click(object sender, EventArgs e)

    {

            //Update Account Name attribute on the form.

            dynamic xrm = (ScriptObject)HtmlPage.Window.GetProperty("Xrm");

            xrm.Page.data.entity.attributes.get("name").setValue(txtAccountName.Text);

    }

c.        Double-Click the Save Data Button control on the MainPage.xaml page. This will take you to the MainPage.xaml.cs file where we can see the btnSaveData_Click method.

image

d.        Add the following code within the btnSetData_Click code method. This fires the save action similar to Save button on the form.

private void btnSaveData_Click(object sender, EventArgs e)

    {

            //Fire Save method to commit form changes.

            dynamic xrm = (ScriptObject)HtmlPage.Window.GetProperty("Xrm");

            xrm.Page.data.entity.save()    

    }

e.       Add the following code within the MainPage method. This retrieves the current account name value when the page is loaded.  

public void MainPage()

    {

           InitializeComponent();

           //Populate textbox with current account name value.

           dynamic xrm = (ScriptObject)HtmlPage.Window.GetProperty("Xrm");

           txtAccountName.Text = xrm.Page.data.entity.attributes.get(“name”).getValue();

    }

 

4.       Add the Microsoft.CSharp assembly as reference.

a.       Locate the Solution Explorer, right-click References and choose Add Reference.

image

b.       In the Add Reference browser window, click the .NET tab.

c.        Choose Microsoft.CSharp, and click OK.

image

d.       Add the following using statements at the top of the Default.aspx.cs file.

using System.Windows.Browser;

e.       The completed code should look similar to the following.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using System.Windows.Browser;

 

namespace SilverlightAccountPage

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

           InitializeComponent();            

           //Populate textbox with current account name value.

           dynamic xrm = (ScriptObject)HtmlPage.Window.GetProperty("Xrm");

           txtAccountName.Text = xrm.Page.data.entity.attributes.get("name").getValue();

        }

 

        private void btnSetData_Click(object sender, RoutedEventArgs e)

        {        

        //Update Account Name attribute on the form with value from textbox.

           dynamic xrm = (ScriptObject)HtmlPage.Window.GetProperty("Xrm");

           xrm.Page.data.entity.attributes.get("name").setValue(txtAccountName.Text);

        }

 

        private void btnSaveData_Click(object sender, RoutedEventArgs e)

        {        

           //Fire Save method to commit form changes.

           dynamic xrm = (ScriptObject)HtmlPage.Window.GetProperty("Xrm");

           xrm.Page.data.entity.save();

        }

    }

}

f.         Click Build|Build Solution. If everything is correct you will see it say Build Succeeded at the bottom of the Visual Studio Window.

image

5.       Create the Silverlight Web Resource.

a.       Log into the CRM Website and navigate to Settings | Customizations | Customize the System.

b.       In the Solution Window Click Web Resources from the Components list on the left hand navigation.

c.        Click New.

d.       Populate the new Web Resource information.

Name: /ClientBin/SilverlightAccountPage.xap

Display Name: Silverlight Account Page

Description: Silverlight Application that interacts with Account Form.

Type: Silverlight (XAP)

Language: English

image

e.       Click Save.

f.         Click the Browse Button and select the XAP file that was built within Visual Studio. Path may be similar to the following.

i.e. C:\Users\<UserName>\Documents\Visual Studio 2010\Projects\Silverlight
AccountPage.Web\ClientBin.

g.       Save the Web Resource.

6.       Add Silverlight Web Resource to the Account Form.

a.       Log into the CRM Website and navigate to Settings | Customizations | Customize the System.

b.       In the Solution Window Expand Entities from the Components list on the left hand navigation.

c.        Expand Account from within the Entities List.

d.       Select Forms and Open the Main Form.

e.       Click the Insert Tab at the top of the form and choose Web Resource.

f.         Use the lookup to select the Silverlight web resource that we created in Step 5.

image

g.       Enter a Name and Label for the Web Resource and Click OK.

image

h.       Click Save on the Account Form.

i.         Click Publish on the Account Form.

j.         Open an Existing Account record from the Account view. The Silverlight web resource will be displayed once the Account Form opens. 

image

k.        Change the Account name within the web resource textbox and click Set Data. The new name will be reflected on the form.

image

l.         Click the Save Data button and this will commit the change and refresh the form.  

You can find more information regarding related services we provide here.

Development Workshop

Code Review

  • Great post Jeremy.  :)  

  • Thanks a lot. I was looking for  example  of the simple SilverLight Application. And It works fine.

  • Thanks ... i also was searching for steps to create a web resource in CRM 2011

    this helps a lot

  • It was working fine.bt when try to put that xap file in html it was not working?

    Please tell me the reason..

    Can u please tell me how i display  data from one account to xap hosted html web resources when i click on a button in ribbon of that account.

    And how to bind corresponding extra address data from one account to silverlight combobox?

  • This helped me a lot. Thank you!

  • Very Good Post

  • thanks for this post,this is  really hep full............

  • great post help me a lot

  • Good Post... Got Some basic knowledge aboug Silverlight - CRM 2011 Integration

  • Chance to learn on silverligth as webresource in CRM

  • Great Post! Just what I was looking for

  • Thanx for sharing this.Very helpful and easily understandable

  • Thank you so much for sharing this. Very very good for bigginners. That is what I looking for.  

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