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.

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

In order to use, select the color from the outer circle, from the 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 lookup…

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 like any normal granite component by specifying it in a sling:resourceType

When creating custom granite component AEM documentation steps can be followed. They have shown this in very simple ways. I have summarized them below for you:-
Your granite component will have two modules, a server-side script, and clientlibs.
The server-side script will be of name render.jsp which will contain all logic for your granite field.
Create client lib at the same location with categories as cq.authoring.dialog,

The below content structure might help you to get an idea.


Here is what our render.jsp contains..

<%@include file="/libs/granite/ui/global.jsp" %><%

%><%@page session="false"

          import="com.adobe.granite.ui.components.AttrBuilder,

                  com.adobe.granite.ui.components.Config,

                  com.adobe.granite.ui.components.Field,

                  com.adobe.granite.ui.components.Tag" %>

<%

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.addClass("coral-InputGroup");

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

    if (isMixed) {

        attrs.addClass("foundation-field-mixed");

    }

    

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

    AttrBuilder attrsInput = new AttrBuilder(request, xssAPI);

    attrsInput.addClass("coral-InputGroup-input coral-Textfield");

    attrsInput.add("name", name);

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

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

    if (isMixed) {

        attrsInput.add("placeholder", i18n.get("<Mixed Entries>")); 

    } else {

        attrsInput.add("value", vm.get("value", String.class));

        log.info("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 <%= attrs.build() %> >

<input id = "mycolor"

<%= attrsInput.build() %> >

 <div class = "coral-InputGroup-button" >

 <button data - toggle = "popover"

data - target = "#colorpicker"

class = "coral-Button coral-Button--square"

id = "customColorButton"

type = "button"

title = "<%= xssAPI.encodeForHTMLAttr(i18n.get("Color Picker")) %>" >

 <i class = "coral-Icon coral-Icon--sizeS coral-Icon coral-Icon--colorPalette" > < /i> </button> 

</div> 

</div>

 <div id = "colorpicker"

class = "coral-Popover" > < /div> <

 script type = "text/javascript" >

 $(document).ready(function() {

  $('#colorpicker').farbtastic('#mycolor');

  $("#customColorButton").click(function() {

   $('#colorpicker').toggle();

   var x = $("#mycolor").val();

   if (x.length == 0) {

    $("#mycolor").val("#000000");

   }

  });

 });

</script>

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 a field which will open the pop-up as shown in the above video.


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


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