Blogs

an abstract splash of red, yellow, blue and pink hues on a canvas
Implementing a Dropdown Colour Picker for AEM Dialogs

 

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.

four different colour labels shown in basic colour picker dropdown component in AEM dialogs
Fig. 1: Standard dropdown implementation in AEM.

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.

Absolute blue, Mars Red, Verdant green and bear brown hues shown with labels in a dropdown colour picker dialog box
Fig. 2: The required dropdown in a colour pick dialog box after implementation.

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 colorfulDropdownto the select field in the component dialog:

    code lines to add the colourful dropdown class to a slected field in an AEM 6.2 component dialog
    Fig. 3: Adding the class “colorfulDropdown” to the selected field.
  2. Create a clientlib like so: “/etc/designs/argilDX/colorPickerClientLib” and add a category with value “cq.authoring.dialog” :

    demonstration of the creation of client library and category addition for dropdown colour picker implementation
    Fig. 4: Create a clientlib and add a category with value.
  3. Create a file called “js.txt” under your new clientlib and add the following lines:

#base=js

drop-down.

jscolorPickDropdown.js

javascript file creation in the client library for addition of colour pick dropdown
Fig. 5: “js.txt” file creation and addition of colour pick dropdown under the new clientlib.

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.

Anirudh Garg

July 31, 2019

Related Posts