How to start a Dialog from Application Ribbon (CRM 2011)

To start the Dialog from the Application Ribbon, you need to 3 things

1. Application Ribbon Button (and Button Images)
2. JavaScript to call the Dialog
3. Dialog

I have attached the unmanaged solution here. The solution contains the following components

• “Application Ribbons” contains the definition of the button.
• “new_custom16x16” and “new_custom32x32” are image files for the button.
• “new_dialogjavascript” is a JavaScript web Resource. It contains the JavaScript code to open the dialog.
• “Sales Call” is dialog script

Detail Explanation

Application Ribbon

   1:  <RibbonDiffXml>

   2:      <CustomActions>
   3:        <CustomAction Id="Sample.{!EntityLogicalName}.MainTab.MyURL.CustomAction" Sequence="41" Location="Mscrm.HomepageGrid.{!EntityLogicalName}.MainTab.Workflow.Controls._children">
   4:          <CommandUIDefinition>
   5:            <Button Id="Sample.{!EntityLogicalName}.MainTab.MyURL.Button" Command="javascript.Command" LabelText="Sales Call" ToolTipTitle="Sales Call" ToolTipDescription="Sales Call" TemplateAlias="o1" Image16by16="$webresource:new_custom16x16" Image32by32="$webresource:new_custom32x32" />
   6:          </CommandUIDefinition>
   7:        </CustomAction>
   8:      </CustomActions>
   9:      <Templates>
  10:        <RibbonTemplates Id="Mscrm.Templates"></RibbonTemplates>
  11:      </Templates>
  12:      <CommandDefinitions>
  13:        <CommandDefinition Id="javascript.Command">
  14:          <EnableRules>
  15:            <EnableRule Id="Mscrm.Enabled"/>
  16:          </EnableRules>
  17:          <DisplayRules />
  18:          <Actions>
  19:            <JavaScriptFunction
  20:                Library="$webresource:new_dialogjavascript"
  21:                FunctionName="callDialog">
  22:            </JavaScriptFunction>
  23:          </Actions>
  24:        </CommandDefinition>
  25:      </CommandDefinitions>
  26:      <RuleDefinitions>
  27:        <TabDisplayRules />
  28:        <DisplayRules />
  29:        <EnableRules />
  30:      </RuleDefinitions>
  31:      <LocLabels />
  32:    </RibbonDiffXml>

• “CustomAction” tag define the location of the button ( which entity, which group, sequence etc).
• “Button” tag defines the text, images, tooltip of the button. The most import attribute of “Button” tag is “Command”. In this solution Command = javascript.Command.
• “CommandDefinition” tag defines the javascript.Command mentioned in “Button” tag.
• <EnableRule Id="Mscrm.Enabled"/> this line makes the button enabled on the ribbon.
• “Actions” tag defines which JavaScript webresource and which function in that webresource will be called on button click.

Note: If you already a custom app ribbon button in your solution and you import any other unmanaged solution with “Application Ribbon” file in it. it will over write your custom button. Take a backup of your solution before you import any unmanaged solution.

    function getOrg() {
        ///<summary>
        /// get organisation
        ///</summary>
      
        var Org = "";
        if (typeof GetGlobalContext == "function") {
            var context = GetGlobalContext();
            Org = context.getOrgUniqueName();
        }
        else {
            if (typeof Xrm.Page.context == "object") {
                Org = Xrm.Page.context.getOrgUniqueName();
            }
            else
            { throw new Error("Unable to access Organisation name"); }
        }
       
        return Org;
    }

    function getUser() {
        ///<summary>
        /// get logged in user
        ///</summary>
      
        var User = "";
        if (typeof GetGlobalContext == "function") {
            var context = GetGlobalContext();
            User = context.getUserId();
        }
        else {
            if (typeof Xrm.Page.context == "object") {
                User = Xrm.Page.context.getUserId();
            }
            else
            { throw new Error("Unable to access the UserId"); }
        }
      
        return User;
    }

    function callDialog() {
    
    var url="/" + getOrg() + "/cs/dialog/rundialog.aspx?DialogId=%7bB7D825D7-7EF6-4713-AC11-284546FEB260%7d&EntityName=systemuser&ObjectId=" + getUser();
    window.open(url, "", "status=no,scrollbars=no,toolbars=no,menubar=no,location=no");
    //window.open(url);

    }

The JavaScript Webresource has three function

• getOrganisation() – to get context organisation
• getUser()-to get the logged in user
• callDialog()- will call the dialog. you can change the DialogId to call your own dialog.

This example is using a dialog attached to the user entity, so we don’t need to create any record to run the dialog. The code picks up the logged in user and run the process.

Sales Call Dialog

Sales Call dialog is very simple but meaningful dialog process. Steps are as follow.

1. Ask for customers first name and last name
2. Ask if customer exist in the system
• Search for the customer
3. Else ask for address information
4. Ask for the product customer is interested in
5. Ask if sales rep want to create relevant records. if sales rep select yes create the contact and/or opportunity records.

Note: This dialog does not add product to the opportunity.

Here are some screen shots

 

 

 

Bye…………...