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:

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.

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

 

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

 

The original color is back!

 

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.