Custom Color Picker with Drop Down Menu in AEM 6.2

Hi All,

Dropdown widget having loads of color options which can be selected… it was really a mess to remember those names.

As a developer, I was wondering why author just can’t select the name and configure it…..

Color-picker is definitely not a solution as we wanted to show the restricted number of colors…

Fig- Drop-down with color name options

Finally, we got a better solution for this and gave the background color for drop-down menu option and it resolved the complexity…

Let's see how to achieve this:

1.Add a class "bgColor" on highlighted node of drop-down.

Fig-  Add the class "bgColor" on selected node

2. Create node /apps/aem-learning/components/content/colorPicker/colorPickerClientLib of type cq:ClientLibraryFolder and add a String property categories with value cq.authoring.dialog.

3.Create file (nt:file) /apps/aem-learning/components/content/colorPicker/colorPickerClientLib/js.txt  and add the following js files:

• drop-down.js
• colorPicker.js

drop-down.js

 $(document).on("click", ".bgColor ul", function(e) {  
   touchDialog.colorDropDown();  
 });  
 $(document).on("foundation-contentloaded", function(e) {  
   touchDialog.colorDropDown();  
 });  

colorPicker.js

 var touchDialog = {  
   colorDropDown : function() {  
     var dropdown = $('.bgColor ul');  
     var button = $('.bgColor button');  
     var childlist = dropdown.children();  
     if (childlist.length > 1) {  
       for (i = 0; i < childlist.length; i++) {  
         var attr = childlist[i].getAttribute("data-value");  
         if (attr) {   
           $(childlist[i]).css("background-color", attr);  
           $(childlist[i]).css("border-style", "solid");  
         }  
         if($(childlist[i]).hasClass("is-highlighted")&& attr){  
           $(button).css("background-color", attr);  
         }  
         if(!attr)  
           $(button).css("background-color", "transparent");  
       }  
     }  
   }  
 };  

Fig- Drop-down with background-color on Values

Demo Package Install

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com.

Hope it will help you guys !!👍

Thanks and Happy Learning 😊