MS CRM 2011 Integration With SilverLight 4

I was going through some blogs and found some basic integration about MSCRM 2011 with Silverlight 4.

Just thought to replace CRM standard contact page with Silverlight page. Here s the look.

So Now i m showing the demo of Creating contact form in SilverLight and hosting the same in CRM Contact form.

Open Visual Studio (Right click-> Run as Administrator)

1) Select -> File->New->Project

2) Choose “Silverlight” from the left side Visual C# “Templates” and choose “Silverlight Application”. (Make sure that you have installed Silverlight 4 prior to this sample).

Else you will receive the download message, Please click the link and install the required.

3) Make Sure you have selected “.Net Framework 4”.

4) Give Solution name as “SampleCRMSilverlight_Integration” and click “Ok”.

5) Then you will see one dialog box with the project name and Silverlight version details. Click Ok.

Some time you may receive some error “Object reference not set to an instance” after clicking “Ok”. For that I have given solution at the end of this post.

Once opened , you can find this design page. Else, In solution Explorer, Select “MainPage.xaml” Right click and choose “View designer”.

Before adding controls to the page, i am going to add background image.

To do that, Right click the designer and click properties. Move your cursor to “Background” property as mentioned in the below screenshot.

1)      Click  - > Select Image - > Add-> select any image from your local desktop-> Ok.Now you can see this designer with your background image/color.

2)      Now add controls to the page.

My requirement is to fill “Firstname” and “Lastname” and click save in silver light page. So that it will create a record in CRM Contact.

I am gonna show only two controls. You can add the controls as per your need.

You can find the Tool Box from the left side and drag two label , two text box and one button to the designer. Refer below screenshot. (Give the Textbox and Label name as per you need).

3)      Add one more label after “save” button to show the confirmation message after successful save. In Label 3 properties, remove the “Content” value.

Now our design part is over. So you can Build the solution and make sure there is no errors.

 

Adding XRM script to update/retrieve value from CRM.

1)      Right click the “SampleCRMSilverlight_Integration” project and click “Add Reference”.

2)      Check for .Net Reference and select “Microsoft.CSharp”.

3)      Click “Ok” and add to your project. Add this namespace using System.Windows.Browser in MainPage.xaml.cs             

4)      Doube click the “Save” button and write the below code.

        private void button1_Click(object sender, RoutedEventArgs e)

        {

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

            xrm.Page.data.entity.attributes.get("firstname").setValue(textBox1.Text);

            xrm.Page.data.entity.attributes.get("lastname").setValue(textBox2.Text);

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

            label3.Content = "Record Saved";

        }

5)      Next add the below script in public Mainpage(). (After Initialize Component)

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

          if (xrm.Page.data.entity.attributes.get("firstname").getValue() != null)

          {

            textBox1.Text = xrm.Page.data.entity.attributes.get("firstname").getValue();

          textBox2.Text = xrm.Page.data.entity.attributes.get("lastname").getValue();

          }

6)      So you are almost done with Silver light part. Only action left is to Rebuild the Complete solution.

7)      So your final code look like this.

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 SampleCRMSilverlight_Integration

{

    public partial class MainPage : UserControl

    {

        public MainPage()

        {

            InitializeComponent();

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

            if (xrm.Page.data.entity.attributes.get("firstname").getValue() != null)

            {

                textBox1.Text = xrm.Page.data.entity.attributes.get("firstname").getValue();              

                textBox2.Text = xrm.Page.data.entity.attributes.get("lastname").getValue();

            }

        }

        private void button1_Click(object sender, RoutedEventArgs e)

        {

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

            xrm.Page.data.entity.attributes.get("firstname").setValue(textBox1.Text);

            xrm.Page.data.entity.attributes.get("lastname").setValue(textBox2.Text);

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

            label3.Content = "Record Saved";

        }

    }

}

8)      Once you see the Succeed Build, Go to CRM -> Settings->Customization->Customize the system

9)      Then Click “New”->Web Resource.

10)  Give the Web Resource name as “silverLightContact”, Type - > SilverLight(XAP), Language->English.

11)  Click “Browse” from Upload File, route to “ur solution folder/ SampleCRMSilverlight_Integration.Web/ClientBin/ SampleCRMSilverlight_Integration.xap.

12)  Save and Publish the Webresource

13)  Next, Go back to Contact Form Customization- Choose “General” Tab and insert “Webresource”.

14)  Browse the “Webresource” lookup and select the “silverLightContact” Webresource which was created at last step.

15)      Save and publish the contact form.

For testing, you can open any already created contact and see the values automatically flowing to the Silverlight page from CRM page.

For testing purpose, i m keeping the CRM fields visible. You can hide that field and start creating new contact records.

Also you can add some more fields to the Silverlight page and host again.

This is my final screen.

This is the Error message you may receive while creating new project.

Details:

System.NullReferenceException Object reference not set to an instance of an object. at Microsoft.Windows.Design.Platform.SilverlightMetadataContext.SilverlightXamlExtensionImplementations.d__8.MoveNext() at MS.Internal.Design.Metadata.ReflectionProjectNode.BuildSubsumption()
at MS.Internal.Design.Metadata.ReflectionProjectNode.SubsumingNamespace(Identifier identifier) at MS.Internal.Design.Markup.XmlElement.BuildScope(PrefixScope parentScope, IParseContext context) at MS.Internal.Design.Markup.XmlElement.ConvertToXaml(XamlElement parent, PrefixScope parentScope, IParseContext context, IMarkupSourceProvider provider) at MS.Internal.Design.DocumentModel.DocumentTrees.Markup.XamlSourceDocument.FullParse(Boolean convertToXamlWithErrors) at MS.Internal.Design.DocumentModel.DocumentTrees.Markup.XamlSourceDocument.get_RootItem() at Microsoft.Windows.Design.DocumentModel.Trees.ModifiableDocumentTree.get_ModifiableRootItem() at Microsoft.Windows.Design.DocumentModel.MarkupDocumentManagerBase.get_LoadState() at MS.Internal.Host.PersistenceSubsystem.Load() at MS.Internal.Host.Designer.Load() at MS.Internal.Designer.VSDesigner.Load() at MS.Internal.Designer.VSIsolatedDesigner.VSIsolatedView.Load() at MS.Internal.Designer.VSIsolatedDesigner.VSIsolatedDesignerFactory.Load(IsolatedView view) at MS.Internal.Host.Isolation.IsolatedDesigner.BootstrapProxy.LoadDesigner(IsolatedDesignerFactory factory, IsolatedView view) at MS.Internal.Host.Isolation.IsolatedDesigner.BootstrapProxy.LoadDesigner(IsolatedDesignerFactory factory, IsolatedView view) at MS.Internal.Host.Isolation.IsolatedDesigner.Load() at MS.Internal.Designer.DesignerPane.LoadDesignerView()

This is because of silver light 5. Please uninstall and install silver light 4 for silver sdk 4 http://www.microsoft.com/download/en/details.aspx?id=18149

Try this and post your comments.....

Thanks ...............................................................