Using JavaScript in a custom button in CRM 2011

Now let us built on our existing example of adding custom button.

http://nishantrana.wordpress.com/2010/11/04/adding-my-first-custom-button-in-crm-2011/

Now on click of the button I want to show alert message “Hello World” i.e. call JavaScript.

This is our existing Button Definition

<Button
Id=“B_MyFirstButton“
LabelText=“My First Button“
ToolTipTitle=“My First Button Tool Tip Title“
ToolTipDescription=“My First Button Tool Tip Description“
TemplateAlias=“o1“
Image16by16=“/_imgs/ribbon/saveandclose16.png“
Image32by32=“/_imgs/ribbon/saveandclose32.png“/>

(Add a new Jscript web resource to the solution named MyJavaScript)

function HelloWorld() {

alert(‘Hello World’);

}

Now add a Command attribute to Button

    <Button Id=”B_MyFirstButton“

Command=”Cmd_JavaScript“

                            LabelText=”My First Button“ ToolTipTitle=”My First Button Tool Tip Title“ ToolTipDescription=”My First Button Tool Tip Description“ TemplateAlias=”o1“ Image16by16=”/_imgs/ribbon/saveandclose16.png“ Image32by32=”/_imgs/ribbon/saveandclose32.png“/>

Now we need to define this Command.

This is how we can define it

<CommandDefinitions>

<CommandDefinition
Id=“Cmd_JavaScript“>

<EnableRules/>

<DisplayRules/>

<Actions>

<JavaScriptFunction
Library=“$webresource:new_MyJavaScript“
FunctionName=“HelloWorld“>

</JavaScriptFunction>

</Actions>

</CommandDefinition>

</CommandDefinitions>

However if we zip and import this solution, the button would appear disabled.

To enable it we need to add EnableRule to it.

<CommandDefinitions>

<CommandDefinition
Id=“Cmd_JavaScript“>

<EnableRules>

<EnableRule
Id=“Mscrm.Enabled“/>

</EnableRules>

<DisplayRules/>

<Actions>

<JavaScriptFunction
Library=“$webresource:new_MyJavaScript“
FunctionName=“HelloWorld“>

</JavaScriptFunction>

</Actions>

</CommandDefinition>

</CommandDefinitions>

Now after importing and publishing it

The final RibbonDiffXml looks like this

<RibbonDiffXml>
<CustomActions>
<CustomAction
Id="CA_MyFirstButton"
Location="Mscrm.Form.account.MainTab.Save.Controls._children"
Sequence="31">
<CommandUIDefinition>
<Button
Id="B_MyFirstButton"
Command="Cmd_JavaScript"
LabelText="My First Button"
ToolTipTitle="My First Button Tool Tip Title"
ToolTipDescription="My First Button Tool Tip Description"
TemplateAlias="o1"
Image16by16="/_imgs/ribbon/saveandclose16.png"
Image32by32="/_imgs/ribbon/saveandclose32.png"/>
</CommandUIDefinition>
</CustomAction>
</CustomActions><Templates>
<RibbonTemplates
Id="Mscrm.Templates"/>
</Templates>
<CommandDefinitions>
<CommandDefinition
Id="Cmd_JavaScript">
<EnableRules>
<EnableRule
Id="Mscrm.Enabled"/>
</EnableRules>
<DisplayRules/>
<Actions>
<JavaScriptFunction
Library="$webresource:new_MyJavaScript"
FunctionName="HelloWorld">
</JavaScriptFunction>
</Actions>
</CommandDefinition>
</CommandDefinitions>
<RuleDefinitions>
<TabDisplayRules/>
<DisplayRules/>
<EnableRules/>
</RuleDefinitions>
<LocLabels/>
</RibbonDiffXml>

Hope it helps!