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.

4 comments:

Jamie Miley said...

I would like to get your opinion on the supportability of this solution.

Tanguy said...

Hi Jamie,

Changing the color of the header is clearly unsupported, as the DOM or CSS class names could change with futur releases.

But it does not seem dangerous to apply this kind of unsupported script.

Jonas said...

Hi Tanguy

In the beginning of this post you mention that you found some inconsistencies in the SDK - but I see no other remarks about this.
What is the inconsistency in this case?

Thanks
/Jonas

Skill Quotient said...

Good Posts. Keep posting, all your posts are very helpful.
Microsoft Dynamics CRM Online Training | Sharepoint Online Training