Geeks With Blogs
Nilesh Baviskar
Here is the screenshot of final output.

OutPut

Here is what PoC is doing
1.       There is Silverlight application hosted in CRM on custom area-subarea. This in-turn needs two web resources
2.       There is Custom button added in Ribbon
3.       Third web resource is hosting JavaScript function
4.       On click of Custom Button on CRM Ribbon function in JavaScript web resource is called which in-turn calls the method in C# code of Silverlight application. String input is passed to this method
5.       C# method is converting the input string to upper case and returning it.
6.       Finally alert is displayed with upper case string.
Here are the details to create the PoC
1.       Created new solution in CRM
2.       Created new Area and Sub-Area for this PoC by editing Site Map XML. Here is the snapshot of XML changes.
<AreaId="RibbonPoCArea"
            Title="Custom Area For RibbonPoC"
            ShowGroups="false"
            Icon="/_imgs/ico_18_9600.png">
        <GroupId="RibbonPoCGroup">
          <SubAreaId="RibbonPoCSubArea"
                   Title="Custom Sub-Area For RibbonPoC"
                   Url="$webresource:new_/RibbonPocTestPage.html" />
        </Group>
      </Area>
 
3.       Added custom button in Application Ribbon. Here is the updated XML for Ribbon
<RibbonDiffXml>
    <CustomActions>
      <CustomActionId="RibbonPoc.BasicHomeTab.Tools.CustomButton.CustomAction"
                    Location="Mscrm.BasicHomeTab.Tools.Controls._children"                     
                    Sequence="101">
        <CommandUIDefinition>
          <ButtonId="RibbonPoc.BasicHomeTab.Tools.CustomButton"
                  Command="RibbonPoc.BasicHomeTab.Tools.CustomButton.Command"
                  Sequence="101"
                  LabelText="$LocLabels:RibbonPoc.Form.CustomButton.LabelText"
                  ToolTipTitle="$LocLabels:RibbonPoc.Form.CustomButton.LabelText"
                  ToolTipDescription="$LocLabels:RibbonPoc.Form.CustomButton.ToolTip"
                  TemplateAlias="isv"Image16by16="/_imgs/ico_18_129.gif"
                  Image32by32="/_imgs/resourcecenter_24x24.gif" />
        </CommandUIDefinition>
      </CustomAction>
    </CustomActions>
    <Templates>
      <RibbonTemplatesId="Mscrm.Templates"></RibbonTemplates>
    </Templates>
    <CommandDefinitions>
      <CommandDefinitionId="RibbonPoc.BasicHomeTab.Tools.CustomButton.Command">
        <EnableRules />
        <DisplayRules />
        <Actions>
          <JavaScriptFunctionFunctionName="CallSilverlightMethod"
                              Library="$webresource:new_RibbonTestJavaScript" />
        </Actions>
      </CommandDefinition>
    </CommandDefinitions>
    <RuleDefinitions>
      <TabDisplayRules />
      <DisplayRules />
      <EnableRules />
    </RuleDefinitions>
    <LocLabels>
      <LocLabelId="RibbonPoc.Form.CustomButton.ToolTip">
        <Titles>
          <Titlelanguagecode="1033"description="Custom Button." />
        </Titles>
      </LocLabel>
      <LocLabelId="RibbonPoc.Form.CustomButton.LabelText">
        <Titles>
          <Titlelanguagecode="1033"description="Custom Button" />
        </Titles>
      </LocLabel>
    </LocLabels>
 </RibbonDiffXml>
 
4.       Created Silverlight Application. You can look at my Article Hosting Silverlight 4.0 application in Dynamics CRM 2011
Here is important C# code. Note System.Windows.Browser.HtmlPage.RegisterScriptableObject("SilverlightCode", this); and [ScriptableMember]
public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            System.Windows.Browser.HtmlPage.RegisterScriptableObject("SilverlightCode", this);                               
        }
 
        // After the Frame navigates, ensure the HyperlinkButton representing the current page is selected
        private void ContentFrame_Navigated(object sender, NavigationEventArgs e)
        {
            foreach (UIElement child in LinksStackPanel.Children)
            {
                HyperlinkButton hb = child as HyperlinkButton;
                if (hb != null && hb.NavigateUri != null)
                {
                    if (hb.NavigateUri.ToString().Equals(e.Uri.ToString()))
                    {
                        VisualStateManager.GoToState(hb, "ActiveLink", true);
                    }
                    else
                    {
                        VisualStateManager.GoToState(hb, "InactiveLink", true);
                    }
                }
            }
        }
 
        // If an error occurs during navigation, show an error window
        private void ContentFrame_NavigationFailed(object sender, NavigationFailedEventArgs e)
        {
            e.Handled = true;
            ChildWindow errorWin = new ErrorWindow(e.Uri);
            errorWin.Show();
        }
 
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show(CustomMethod("Silverlight Button Clicked !"));
        }
 
        //This method will be called from JavaScript on click of Ribbon Button
        //This method needs to be Public
        [ScriptableMember]
        public string CustomMethod(string message = "")
        {
            //MessageBox.Show(message, "Message", MessageBoxButton.OK);
            return message.ToUpper();
        }
    }
 
SLCode
 
Here is important HTML code. Note the <object id="SLFromJS"…
<body>
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
        <object id="SLFromJS" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 <param name="source" value="ClientBin/RibbonPoC.xap"/>
 <param name="onError" value="onSilverlightError" />
 <param name="background" value="white" />
 <param name="minRuntimeVersion" value="4.0.50401.0" />
 <param name="autoUpgrade" value="true" />
 <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50401.0" style="text-decoration:none">
   <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 </a>
    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
    </form>
</body>
 
5.       Hosted Silverlight Application in CRM. For this we need to create two web resources – one to host HTML and second for XAP.
6.       Created one more web resource to host JavaScript function. Developer tools (F12) in IE 8 helped me to find exact location of my Silverlight Object (SLFromJS) in HTML DOM. Here is the JavaScript – Note window.frames['contentIFrame'].document.forms['form1'].SLFromJS;
function CallSilverlightMethod(sender) {
    alert('Inside JS1!');
    var slc = window.frames['contentIFrame'].document.forms['form1'].SLFromJS;
    alert('Inside JS2!');
    if (slc != null) {
        alert('Inside if!');
        alert(slc.Content.SilverlightCode.CustomMethod('Msg From JavaScript'));
        alert('Going out of if!');
    }
    alert('Out of if!');
}
 
My CRM solution looks like following now
CRMSolu
7.       Done! Now test the work by opening link of HTML web resource.
Thanks to following blog posts which I referred.
 

 

Posted on Thursday, August 25, 2011 3:17 AM | Back to top


Comments on this post: Call C# code inside Silverlight application on click of Custom Ribbon Button - Dynamics CRM 2011

# re: Call C# code inside Silverlight application on click of Custom Ribbon Button - Dynamics CRM 2011
Requesting Gravatar...
I need help..
I did all the steps meansion here, but still I am getting error message when I load page.
Left by Hiren Gandi on Apr 15, 2012 7:30 AM

# re: Call C# code inside Silverlight application on click of Custom Ribbon Button - Dynamics CRM 2011
Requesting Gravatar...
Hi Hiren,

What is the error you are getting?

-Nilesh
Left by Nilesh on Apr 15, 2012 8:12 AM

# re: Call C# code inside Silverlight application on click of Custom Ribbon Button - Dynamics CRM 2011
Requesting Gravatar...
I follow all the steps you meansion in this artical, but pages in not loading. When I try from VS 2010 my silverlight solution running fine, but when I try from CRM 2011 I am able to see entry to Sitmap and sub group but the right side frame is not show my silverlight page.

Thank you for your help.
Left by Hiren Gandhi on Apr 15, 2012 11:53 AM

# re: Call C# code inside Silverlight application on click of Custom Ribbon Button - Dynamics CRM 2011
Requesting Gravatar...
Hiren - Check my post of - Hosting Silverlight 4.0 application in Dynamics CRM 2011 at http://geekswithblogs.net/Nilesh/archive/2011/08/30/hosting-silverlight-4.0-application-in-dynamics-crm-2011.aspx. I guess your problem is in hosting the Silverlight Application and not Javascript.
Left by Nilesh on Apr 16, 2012 7:46 AM

Your comment:
 (will show your gravatar)
 


Copyright © Nilesh | Powered by: GeeksWithBlogs.net | Join free