Introduction

Most organizations use a set of brand colours on their website. A dropdown colour picker for AEM helps implement this by restricting the colour choices available to authors. However, once this list of colours increases and goes beyond a particular number, it becomes difficult to keep track of exactly which colour each name refers to.

Requirement

Find a quicker and simpler way to select colours so that authors don’t have to rely on trial-and-error.

Analysis

A full colour picker would help the author preview the colour they are about to choose but would fail to restrict them to the set of brand colours. It would be ideal to have the best of both worlds: the choice-restriction of a dropdown, and the preview capability of a colour picker.

Proposed Solution

A dropdown with each option has the respective colour as background (fig. 2). This fulfils both the requirements and has the best of both worlds.

Discovery

Component dialogs’ behaviour and styling is handled by the ‘cq.authoring.dialog’ clientlib by default. This makes it quite easy to modify default dialog behaviour, since all that’s needed is to create a clientlib with ‘cq.authoring.dialog’ category.

Implementation

NOTE: The following has been implemented and tested in AEM 6.2

To add background colours to each option in the dropdown, store the hex value of the colour as the value of each option in the dropdown, and finally set the background through JS.

1. Add a class “colorfulDropdown” to the select field in the component dialog:

   

2. Create a clientlib like so: “/etc/designs/argilDX/colorPickerClientLib” and add a category with value “cq.authoring.dialog” :

   

3. Create a file called “js.txt” under your new clientlib and add the following lines:

#base=js

drop-down.

jscolorPickDropdown.js

4. The following files should be placed under the clientlib folder in the “js” folder

drop-down.js

//To set the color of the select button on dialog load
$(document).on("foundation-contentloaded", function(e) {
    bgColorSelect.colorfulSelector();
});

//To change the color of the select button on option select
$(document).on ("click", ".colorfulDropdown ul", function(e) { 
    bgColorSelect.colorfulSelector(); 
});

colorPickDropdown.js

let bgColorSelect = {
       colorfulSelector : function() {
    	//The dropdown itself
        let dropdown = $('.colorfulDropdown ul');
        //The select button for opening the dropdown
        let selectButton = $('.colorfulDropdown button');
        //The list of options
        let optionList = dropdown.children();
        if (optionList.length > 0) {
          for (let i = 0; i < optionList.length; i++) {
           //The color's hex valuestored as an option
           let optionValue = optionList[i].getAttribute("data-value");
           if (optionValue) {
             //Set the background of the option
             $(optionList[i]).css("background-color", optionValue);
             //Make the border white
             $(optionList[i]).css("border-style", "solid");
             //Make the select button the same color as the selected option, 
even when the dialog has just been loaded
             if($(optionList[i]).hasClass("is-highlighted") || 
$(optionList[i]).attr("aria-selected")==="true"){
              $(selectButton).css("background-color", optionValue);
            } 
          }
          else {
            //If the option has no value, make the background transparent
            $(selectButton).css("background-color", "transparent");
          }
        }
      }     
    }
};

How to Use:

1. Download the package here
2. Open ‘/crx/packmgr’
3. Upload and install the package. Make sure ‘Force Upload’ is checked
4. Drop the Color Pick Dropdown component (in Home group) on to any page and open the dialog
5. You can see the dropdown colour picker for AEM in action

If you’re interested in other OOTB solutions customized to make your life easier while working on AEM, drop us a message.