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:
- One for the FlyoutAnchor
- One for the ColorPicker
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.