Custom Colorpicker in AEM 6.1 – Touch-UI Dialog

Actually with the awesome stuff we can do trough CSS3 and HTML5, everyone knows the important of a good looking website, then designs good websites needs good tools for the developer or the person who builds a website, and that’s exactly why a colorPicker is essential tool for our aem’s authors.

The Problem:
With the AEM 6.0 release we saw the implementation of Granite platform as part of its stack, this was a pretty cool and interesting advantage for develop touch-ui dialogs nevertheless our good ExtJS was sadly not compatible with this.

Although AEM provides a pretty solid colorPicker implemented in ExtJS (xtype ColorPicker), the implementation in touch-ui version(granite) is still not good completely(the modes doesnt’ work, customize colors is a pain in the neck, etc).

Many time in our experience the users demand the ability to use components in both: classic and touch-ui, as was explained this is not possible at this time with the not compatible tech and with the not very friendly touch-ui colorPicker.

The Solution:
Here we decide to propose a solution by building our own colorPicker which can be useful both in classic and touch versions, reaping the benefits of HTML5.

Here we go.

1. Create a component
Not big deal. We we’ll create a component named “conexio-colorPicker”, we will change the extension of the main file from .jsp to .html, and finally we just add some HTML code to show the functionality of the colorPicker.


If you don’t have any idea how to do it, you can see adobe references.

2. Create the custom colorPicker
We will create the next structure:



As we can see the image we add a sling:resourceSuperType pointing to: granite/ui/components/foundation/form/ field, this will give us the base for our implementation.

Render.jsp
In the “render.jsp” le using the HTML5 we’ll add a input type color and a hidden field where the selected value color will be stored, with the help of javascript we will ensure the value is updated when the colorPicker changes.

Now for make the component compatible between versions, we need to wrap all the colorPicker in a <span> element and add on it the cq attribute “data-name”. We also added the “name” attribute in hidden field. The value in the span and the hidden field will be the value of the property “name” setting when creating the dialog.



Here we also add an “id” attribute for the color element and the hidden field, this is necessary in case we want to use more than once “colorPicker widget” in the same dialog.

To get the name value we will use the class Config from GraniteUI, something like this:


Here we added 3 variables:
name: As was explained is the value for the wrap of the “colorPicker” and makes possible the compatibility.
value: This is like a default value when the “colorPicker” component is displayed without any color selected (initial value).
unique: This is just like a helper to create a unique id for each “colorPicker” present in the dialog.



3. Adding the author dialogs
After created our custom “colorPicker” we will add the dialogs in our component. First we will create a xtype dialog with the following structure:



Then we will create the cq:dialog with the following structure:



Note the sling:resourceType pointing to the custom colorPicker “conexio- colorPicker/colorpicker/foundation/form/colorpicker” and the trick and the most important thing here is the “name” property in both xtype dialog and cq:dialog has the same value “./color1”


4. Testing the colorPicker
We have everything already did, just we will add a markup to see the options selected by the user in the conexio-colorPicker.html file.


Time to test. Add the component in a page, open the dialog in classic mode and pick a color, then go to touch-ui and open the dialog, you can see the dialog has the colors picked in the classic, Now inverse, select a color in the touch-ui dialog, go to the classic mode refresh the page, open the dialog and you we’ll see the same colors selected.