Input Box Color Picker

I had the recent requirement to provide an end-user the ability to select a color for a theme.  Using javascript, I was able to convert the regular TextBox component into a color picker.

Symantec Workflow TextBox Component as a Color Picker
Using a body onload javascript event, the regular Workflow TextBox component can be converted into a color picker for some browsers.

In order to best achieve this, measures are taken to initially hide the element.  In this case, I’ve chosen a Theme Style that I’ve named “HiddenDiv” that has the CSS property “visibility” set to “hidden”.  The body onload javascript is then used to set the input type to color, and afterwards to apply the normal class to the element.  Initially hiding the element serves to prevent the unstyled flash.

Illustration - Configuring Body Onload Javascript Events
Right-click any empty space in your form and the “Edit Form” option should be available in the context menu.

And the javascript:

var colorbox = document.getElementById('TestColor1');
colorbox.setAttribute('type', 'color');
colorbox.className = "cTextbox";

For browser availability, it may serve to make the TextBox a bit larger.  When it renders in IE, at least the end user will be able to input a color hex value.

Workflow TextBox Color Type: Compatibility Differences - Chrome vs IE
Chrome renders as a color picker element (top), while Internet Explorer renders as a regular textbox. Entering “#ffffff” results in the same output value as selecting white in the color picker.

On the output path, the data from the color picker resolves as a hex value regardless of the type rendered.  For example, selecting the color “Red” from the color picker will result in the value of that TextBox being a string value “#ff0000”.

More information on input types and browser compatibility can be found here.

incompatible_ie2020compatible_firefox2020compatible_chrome2020incompatible_safari2020compatible_opera2020

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s