Search This Blog

Friday, December 23, 2011

CRM 2011 Ribbon: Using other controls than just Group and Button : ColorPicker!

Hi,

As you might know, I developed some tools for ribbon usage (even if some of them are not really usable right now). Yesterday, I tried to use a ColorPicker control to check the behavior of my ribbon editor and found some inconstancy in the SDK.

Anyway, I wanted to try a ColorPicker control and try it in real life scenario (or something useful for your/my customers).

Here is the scenario: I want to be able to flag an account with a color (just like Outlook categories for email, appointment, etc.). For this, I will add a color picker on the ribbon and update the color of the form header (thanks to customer effective for this part: Changing the form header and footer colors).

The final look I expect:

CRM 2011 [En fonction] - Oracle VM VirtualBox_2011-12-22_22-39-31

What I need:

A solution with an image for my button, a script for changing header color, jQuery library to ease the write of scripts. The entity account is here since I apply the ColorPicker to this entity.

CRM 2011 [En fonction] - Oracle VM VirtualBox_2011-12-23_09-00-34

Script content:

function ApplyColorToHeader(commandProperties)
{
var filter = "";

if(commandProperties.Color != "#FFFFFF")
{
filter = "progid:DXImageTransform.Microsoft.Gradient(startColorstr=" + commandProperties.Color + ",endColorstr=#f6f8fa);";
}

$(".ms-crm-Form-HeaderContainer").css("filter", filter);
}

RibbonDiffXml:

<RibbonDiffXml>
<CustomActions>
<CustomAction
Id="ColorPicker.CustomAction"
Location="Mscrm.Form.account.MainTab.Actions.Controls._children"
Sequence="100">
<CommandUIDefinition>
<FlyoutAnchor
Id="McTools.Form.account.MainTab.Actions.ColorPicker.Flyout"
Sequence="130"
Alt="Color this form"
LabelText="Color this form"
Command="McTools.Form.account.MainTab.Actions.ColorPicker.Command"
PopulateDynamically="false"
PopulateOnlyOnce="true"
TemplateAlias="o1"
Image32by32="$webresource:mctools_/ColorPicker/Icon32.png"
ToolTipTitle="Color this form"
ToolTipDescription="Apply a color to this form header">
<Menu Id="McTools.Form.account.MainTab.Actions.ColorPicker.Menu">
<MenuSection
Id="McTools.Form.account.MainTab.Actions.ColorPicker.Menu.MenuSection"
Title="Choose a color">
<Controls Id="Ribbon.ListItem.Workflow.Controls.CPFlyout.Menu.MenuSection.Controls">
<ColorPicker
Id="McTools.Form.account.MainTab.Actions.ColorPicker.Menu.MenuSection.ColorPicker"
Command="McTools.Form.account.MainTab.Actions.ColorPicker.CommandPicker">
<Colors>
<Color Title="Red" DisplayColor="#FF0000" Color="#FF0000" />
<Color Title="Green" DisplayColor="#00FF00" Color="#00FF00" />
<Color Title="Blue" DisplayColor="#0000FF" Color="#0000FF" />
<Color Title="Cancel Color" DisplayColor="#FFFFFF" Color="#FFFFFF" />
</Colors>
</ColorPicker>
</Controls>
</MenuSection>
</Menu>
</FlyoutAnchor>
</CommandUIDefinition>
</CustomAction>
</CustomActions>
<Templates>
<RibbonTemplates Id="Mscrm.Templates">
</RibbonTemplates>
</Templates>
<CommandDefinitions>
<CommandDefinition Id="McTools.Form.account.MainTab.Actions.ColorPicker.Command">
<EnableRules />
<DisplayRules />
<Actions />
</CommandDefinition>
<CommandDefinition Id="McTools.Form.account.MainTab.Actions.ColorPicker.CommandPicker">
<EnableRules />
<DisplayRules />
<Actions>
<JavaScriptFunction
Library="$webresource:mctools_/ColorPicker/jQuery_1_7_1.js"
FunctionName="load" />
<JavaScriptFunction
Library="$webresource:mctools_/ColorPicker/Scripts.js"
FunctionName="ApplyColorToHeader">
<CrmParameter Value="CommandProperties" />
</JavaScriptFunction>
</Actions>
</CommandDefinition>
</CommandDefinitions>
<RuleDefinitions>
<TabDisplayRules />
<DisplayRules />
<EnableRules />
</RuleDefinitions>
<LocLabels />
</RibbonDiffXml>

Some explanations:

The ribbonDiffXml is made of a FlyoutAnchor that inclues the ColorPicker.

Then, we need two CommandDefinition items:


  • One for the FlyoutAnchor
  • One for the ColorPicker

 

The ColorPicker’s CommandDefinition calls the JavaScript function “ApplyColorToHeader” passing Crm parameter “CommandProperties”. This JavaScript object contains the property “Color” that contains the value of the attribute “Color” of the clicked Color item.

 

Result:

 

After having clicked on Green color

CRM 2011 [En fonction] - Oracle VM VirtualBox_2011-12-22_22-40-13

 

To switch back to the normal form color, I can click on the white color

Sans titre (100%) - Paint.NET v3.5

 

The original color is back!

CRM 2011 [En fonction] - Oracle VM VirtualBox_2011-12-22_22-42-18

 

Next steps:

To finish the scenario, it would be necessary to store the selected color in a hidden field. Then, in OnLoad event, the header should also be changed with the color selected.

Friday, December 2, 2011

The path to fame: New version of CRM 2011 SDK

Microsoft just released a new version of CRM 2011 SDK!

If you look deeply into it to gather information about the SiteMap, you could find my name somewhere Sourire

 image

Look the page here