Saturday 26 May 2012

Open Silverlight application on click of custom ribbon button in CRM 2011

In this post we will see how we can open a Silverlight application on click of a custom button in CRM 2011.

First of all create a Silverlight web application which you want to execute on button click in CRM application.

Compile your Silverlight Application. In the web project of your application you will find a ClientBin folder. When you compile your application a xap file is created under the ClientBin folder. Create a webresource of type xap and upload the xap file created under ClientBin folder.

Now second step is to embed the Silverlight application in an html file. Create an html file within your Silverlight application web project and add this code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 
<head>
    <title>ExpenseNote</title>
    <style type="text/css">
    html, body {
        height: 100%;
        overflow: auto;
    }
    body {
        padding: 0;
        margin: 0;
    }
    #silverlightControlHost {
        height: 100%;
        text-align:center;
    }
    </style>
    <script type="text/jscript" src="../../ClientGlobalContext.js.aspx"></script>
   1:  
   2:     <script type="text/javascript" src="../JavaScripts/Silverlight.js">
   1: </script>
   2:     <script type="text/javascript">
   3:       function onSilverlightError(sender, args) {
   4:         
   5:             var appSource = "";
   6:             if (sender != null && sender != 0) {
   7:               appSource = sender.getHost().Source;
   8:             }
   9:             
  10:             var errorType = args.ErrorType;
  11:             var iErrorCode = args.ErrorCode;
  12:  
  13:             if (errorType == "ImageError" || errorType == "MediaError") {
  14:               return;
  15:             }
  16:  
  17:             var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
  18:  
  19:             errMsg += "Code: "+ iErrorCode + "    \n";
  20:             errMsg += "Category: " + errorType + "       \n";
  21:             errMsg += "Message: " + args.ErrorMessage + "     \n";
  22:  
  23:             if (errorType == "ParserError") {
  24:                 errMsg += "File: " + args.xamlFile + "     \n";
  25:                 errMsg += "Line: " + args.lineNumber + "     \n";
  26:                 errMsg += "Position: " + args.charPosition + "     \n";
  27:             }
  28:             else if (errorType == "RuntimeError") {           
  29:                 if (args.lineNumber != 0) {
  30:                     errMsg += "Line: " + args.lineNumber + "     \n";
  31:                     errMsg += "Position: " +  args.charPosition + "     \n";
  32:                 }
  33:                 errMsg += "MethodName: " + args.methodName + "     \n";
  34:             }
  35:  
  36:             throw new Error(errMsg);
  37:         }
  38:     
</script>
</head>
<body>
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
      <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
          <param name="source" value="../XAP/ExpenseNote.xap"/>
          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="4.0.50826.0" />
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.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>
</html>

Note:

1) In the source parameter specify the path of your xap webresource correctly.
Here name of the webresource is ink_/XAP/ExpenseNote.xap and so the value for source is “../XAP/ExpenseNote.xap”, a relative path.

2) Also add the SilverLight.js file as a webresource. You can find the Silverlight.js file in sdk in the Silverlight example projects.

Now create a webresource and upload this html file. We have named this html webresource as CreateExpenseNote.html.

Now we need to open this html file on click of a button.

For this we will create a button. You can create button using the Visual Ribbon editor. To use Visual Ribbon Editor refer this link http://ankit.inkeysolutions.com/2012/01/crm-2011-how-to-use-visual-ribbon.html

In the Visual Ribbon Editor define the action for the button as given below:

clip_image002[4]

In Action you can either directly specify a URL which will be accessed on button click or you can specify a javascript function which is defined within a webresource of type javascript file. In this example we would be using a javascript function defined within a webresource.

Here OpenSilverLightControl is the function that contains code to open the CreateExpenseNote.html file and OpenExpenseNote.js is the webresource within which the function is defined.

function OpenSilverLightControl()
 {
var serverUrl = Xrm.Page.context.getServerUrl();          window.showModalDialog(serverUrl+'/WebResources/ink_/html/CreateExpenseNote.html', " ","dialogWidth:800px ; dialogHeight:600px; center:yes;resizable:yes");
}

So on button click the CreateExpenseNote.html file which embeds the Silverlight application, is displayed as a ModalDialog .

7 comments:

  1. Good article.
    i have a question regarding Silverlight and CRM.

    I have created a Silverlight app sourcing data from CRM and updating CRM.
    When using in IE and clicking on the icon, opens a new window and the user is already logged into CRM.
    However via an outlook online, clicking the icon requires the User to log into LiveID (sometimes multiple times).

    Do you have any suggestions or thoughts?

    ReplyDelete
  2. Excellent article. Many useful tips on Silverlight and Ribbons.

    Congratulations,
    Adriano Zanini

    ReplyDelete
  3. Hello Ankit,

    One of my friend needs to enter in the world of Dynamics CRM.
    Need your guidance on how to start it.

    Plz reply

    regards.

    ReplyDelete
  4. Hi,
    It's not working for me. Where did you get the folder structure from? ink_/html, ink_/XAP (I presume ink_ would be new_ in case i havent change de prefix, correct?). Is it default structure?

    Thanks,
    Sander

    ReplyDelete
    Replies
    1. yes, ink_ will be new_ in your case.

      could you please share more details about an error?

      Delete
    2. I have a weird error where it says that the silverlight app could not be downloaded, or something.
      The thing is that the XAP works just fine inside the form, just that, when trying to run it from html from ribbon, i get the error.
      Again I ask, if you don't mind, that structure you're mentioning (/html, /xap) are they default paths on the server?
      Thanks

      Delete
    3. /html. /Xap are not the default paths on the server.
      Whenever you add a web resource with such path CRM creates those folder on server.
      Practically, there will be a web resources folder on server. Then inside that there will be a folder of your prefix and then your file name of web resource.
      like '/WebResources/ink_/CreateExpenseNote.html'

      We just added one more folder in above path to keep web resources in their separate folder based on their type. So our path will be,
      '/WebResources/ink_/html/CreateExpenseNote.html'

      I hope it is clear now.

      Delete