Ad Code

Thursday, February 23, 2017

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…


dialog1.PNG
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.

Capture.PNG
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");  
       }  
     }  
   }  
 };  

dialog-with-color.PNG
Fig- Drop-down with background-color on Values


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 😊

2 comments:

  1. Hi,
    If I am creating two different color fields in the same dialog and using the same class "bgColor" for both the fields, then the second field is overriding the first one. Whaat can be the possible solution in order to avoid this overriding??

    ReplyDelete
  2. Hi,
    If I am creating two different color fields in the same dialog and using the same class "bgColor" for both the fields, then the second field is overriding the first one. Whaat can be the possible solution in order to avoid this overriding??

    ReplyDelete