Custom granite component banner

Custom color picker component in Granite UI in AEM 6.1


Working with Touch UI is always exciting and needless to say it provides a great experience for your customers. Just to enhance the experience a bit more I will be showing a custom color picker component for Granite UI.

Touch UI Color Picker Dialog

Created with the integration of jQuery Color picker enables author to choose color from large number of variations available.

In order to use, select the color from outer circle, from inner box select any variations of color. Take a moment to watch the video which will help you to get the idea of how easy authoring experience would be

Code look up…

Similar to the way you have a granite UI component for textfield, I have also created one for color picker which can be used anywhere just as any normal granite component by specifying it in sling:resourceType

When creating custom granite component AEM documentations steps can be followed. They have shown this in very simple ways. I have summarized them below for you :-

  1. Your granite component will have two modules, a server side script and clientlibs.
  2. Server side script will be of name render.jsp which will contain all logic for your granite field.
  3. Create client lib at same location with categories as cq.authoring.dialog

Below content structure might help you to get an idea.

Custom granite component

Here is what our render.jsp contains..

Once you have completed the setup of the granite component, you are good to go for its usage.

When you open your touch ui component you will see a color icon next to field which will open the pop up as shown in above video.

Color Picker Component Touch UI dialog

How to use it..

1. Download the package from here granite-ui-color-picker-1.0

2. Set sling:resourceType as /apps/custom-components/custom-colorpicker to get this working

Color Picker Component dialog configurations

You can also find step by step for the development on Adobe Helpx forum

Comment below if you need any help in implementation or find bugs.

7 thoughts on “Custom color picker component in Granite UI in AEM 6.1

  1. The palette doesn’t show the wheel as expected, seems 3 resource files are missing.
    wheel.png / mask.png / marker.png

    Will you please offer these pictures?

    Thanks & BR.

  2. yeah vast is correct…i tried to add one more filed and enable the color picker for that field.Its not working.If it is single filed then its working but when we have more than one field then its stops working.

  3. yeah Vasim is correct…i tried to add one more filed and enable the color picker for the newly added field.Its not working.If it is single filed then its working but when we have more than one field then its stops working.

  4. I know this is very old but after a lot of workarounds, I got it working with multiple input fields. Here is the code change which is required in render.jsp:

    Config cfg = cmp.getConfig();
    ValueMap vm = (ValueMap) request.getAttribute(Field.class.getName());
    Field field = new Field(cfg);

    boolean isMixed = field.isMixed(cmp.getValue());

    String name = cfg.get("name", String.class);

    Tag tag = cmp.consumeTag();
    AttrBuilder attrs = tag.getAttrs();

    attrs.add("id", cfg.get("id", String.class));
    attrs.addClass(cfg.get("class", String.class));
    attrs.addRel(cfg.get("rel", String.class));
    attrs.add("title", i18n.getVar(cfg.get("title", String.class)));

    attrs.add("value", cfg.get("value", String.class));

    // Use JCR standard date format for storage
    // FIXME data-stored-format is a bad name; use data-value-format
    if (isMixed) {

    attrs.addOthers(cfg.getProperties(), "id", "class", "rel", "title", "name", "value", "emptyText", "type", "displayedFormat", "minDate", "maxDate", "displayTimezoneMessage", "fieldLabel", "fieldDescription", "renderReadOnly", "ignoreData");

    AttrBuilder attrsInput = new AttrBuilder(request, xssAPI);
    attrsInput.addClass("coral-InputGroup-input coral-Textfield colorField");
    attrsInput.add("name", name);

    attrsInput.addDisabled(cfg.get("disabled", false));
    attrsInput.add("type", cfg.get("type", "text"));

    if (isMixed) {
    attrsInput.add("placeholder", i18n.get("”));
    } else {
    attrsInput.add(“value”, vm.get(“value”, String.class));“Current value:” + vm.get(“value”, String.class)+”:”);
    attrsInput.add(“placeholder”, i18n.getVar(cfg.get(“emptyText”, String.class)));

    if (cfg.get(“required”, false)) {
    attrsInput.add(“aria-required”, true);

    AttrBuilder typeAttrs = new AttrBuilder(request, xssAPI);
    typeAttrs.add(“type”, “hidden”);
    typeAttrs.add(“value”, “Color”);
    if (name != null && name.trim().length() > 0) {
    typeAttrs.add(“name”, name + “@TypeHint”);

    %><div >

    <input id="color” >
    <button data-toggle="popover" data-target=".picker" class="coral-Button coral-Button–square customColorButton" type="button" title="”>

    $(document).ready(function() {
    var f = $.farbtastic(‘.picker’);
    input = $(this).prev(‘input’);
    $(‘.colorField’).each(function () {
    }).focus(function () {


Leave a Reply

Your email address will not be published. Required fields are marked *