I recently needed to allow a user to choose the background colours for a number
of elements that would appear on a Visualforce page. Initially I had
the user entering the hex colour string into an inputtext and showing a preview
on the lower half of the page, but this became unusable once I had more than
five or six inputs, so I started hunting for a simple colour picker.
After a short amount of google, I stumbled on
JSColor, which is very straightforward to integrate, as you just include the
javascript into your page and add the "color" class to any input that you want
the color picker to fire from.
First up, I downloaded the JSColor zip file and uploaded as a static resource
named '
jscolor_1_4_0'. For the purposes of this blog post I then created a
simple custom object named 'Coloured_Text' with four fields - 'Field_1' and
'Field_2' contained the text to be displayed, while 'Colour_1' and 'Colour_2'
defined the colour that the associated text should be displayed in.
I then put together a simple edit/create page for the Coloured_Text custom
object:
<apex:page standardcontroller="Coloured_Text__c">
<apex:includeScript value="{!URLFOR($Resource.jscolor_1_4_0, 'jscolor/jscolor.js')}" />
<apex:form >
<apex:pageBlock title="Colour Picker Edit">
<apex:pageBlockButtons >
<apex:commandButton value="Save" action="{!save}" />
<apex:commandButton value="Cancel" action="{!cancel}" />
</apex:pageBlockButtons>
<apex:pageBlockSection >
<apex:inputField value="{!Coloured_Text__c.Name}" />
<apex:pageBlockSectionItem />
<apex:inputField value="{!Coloured_Text__c.Field_1__c}" />
<apex:inputField styleClass="color" value="{!Coloured_Text__c.Colour_1__c}" />
<apex:inputField value="{!Coloured_Text__c.Field_2__c}" />
<apex:inputField styleClass="color" value="{!Coloured_Text__c.Colour_2__c}" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:form>
</apex:page>
The colour picker is added to the input fields via the "styleClass" attribute
in the '<apex:inputField styleClass="color"
value="{!Coloured_Text__c.Colour_2__c}" />' components.
After overriding the New and Edit buttons for the custom object, clicking the
new button gave me the following page:
I then created the view override visualforce page:
<apex:page standardcontroller="Coloured_Text__c">
<apex:includeScript value="{!URLFOR($Resource.jscolor_1_4_0, 'jscolor/jscolor.js')}" />
<apex:pageBlock title="Colour Picker View">
<apex:pageBlockSection >
<apex:outputField value="{!Coloured_Text__c.Name}" />
<apex:pageBlockSectionItem />
<apex:pageBlockSectionItem >
<apex:outputLabel value="Field 1" />
<apex:outputText style="color: #{!Coloured_Text__c.Colour_1__c}" value="{!Coloured_Text__c.Field_1__c}" />
</apex:pageBlockSectionItem>
<apex:pageBlockSectionItem >
<apex:outputLabel value="Field 2" />
<apex:outputText style="color: #{!Coloured_Text__c.Colour_2__c}" value="{!Coloured_Text__c.Field_2__c}" />
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>
The chosen colours are applied to the text via the "
<apex:outputText style="color: #{!Coloured_Text__c.Colour_2__c}"
value="{!Coloured_Text__c.Field_2__c}" />" component. Viewing my 'Blog
Test' record shows the text in the correct colours:
