{"id":7194,"date":"2019-07-31T16:24:21","date_gmt":"2019-07-31T10:54:21","guid":{"rendered":"https:\/\/www.argildx.us\/?p=7194"},"modified":"2020-08-17T11:43:34","modified_gmt":"2020-08-17T06:13:34","slug":"implementing-a-dropdown-colour-picker-for-aem-dialogs","status":"publish","type":"post","link":"https:\/\/www.argildx.us\/innovation\/implementing-a-dropdown-colour-picker-for-aem-dialogs\/","title":{"rendered":"Implementing a Dropdown Colour Picker for AEM Dialogs"},"content":{"rendered":"

Introduction<\/strong><\/p>\n

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.<\/p>\n

\"four
Fig. 1: Standard dropdown implementation in AEM.<\/figcaption><\/figure>\n

Requirement<\/strong><\/p>\n

Find a quicker and simpler way to select colours so that authors don\u2019t have to rely on trial-and-error.<\/p>\n

Analysis<\/strong><\/p>\n

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.<\/p>\n

Proposed Solution<\/strong><\/p>\n

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.<\/p>\n

\"Absolute
Fig. 2: The required dropdown in a colour pick dialog box after implementation.<\/figcaption><\/figure>\n

Discovery<\/strong><\/p>\n

Component dialogs\u2019 behaviour and styling is handled by the \u2018cq.authoring.dialog\u2019 clientlib by default. This makes it quite easy to modify default dialog behaviour, since all that\u2019s needed is to create a clientlib with \u2018cq.authoring.dialog\u2019 category.<\/p>\n

Implementation<\/strong><\/p>\n

NOTE<\/strong>: The following has been implemented and tested in AEM 6.2<\/p>\n

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.<\/p>\n

    \n
  1. Add a class \u201c<\/em>colorfulDropdown\u201d <\/em><\/strong>to the select field in the component dialog:\n

    \"code
    Fig. 3: Adding the class “colorfulDropdown” to the selected field.<\/figcaption><\/figure><\/li>\n
  2. Create a clientlib like so: \u201c\/etc\/designs\/argilDX\/colorPickerClientLib<\/strong>\u201d and add a category with value \u201ccq.authoring.dialog\u201d :<\/strong>\n

    \"demonstration
    Fig. 4: Create a clientlib and add a category with value.<\/figcaption><\/figure><\/li>\n
  3. Create a file called \u201cjs.txt\u201d under your new clientlib and add the following lines:<\/li>\n<\/ol>\n

    #base=js<\/p>\n

    drop-down.<\/p>\n

    jscolorPickDropdown.js<\/p>\n

    \"javascript
    Fig. 5: \u201cjs.txt\u201d file creation and addition of colour pick dropdown under the new clientlib.<\/figcaption><\/figure>\n

    4. The following files should be placed under the clientlib folder in the \u201cjs<\/strong>\u201d folder<\/p>\n

    drop-down.js<\/strong><\/p>\n

    \/\/To set the color of the select button on dialog load<\/span>\n$(document).on(\"foundation-contentloaded\"<\/span>, function<\/span>(e) {\n    bgColorSelect.colorfulSelector();\n});\n\n\/\/To change the color of the select button on option select\n<\/span>$(document).on (\"click\"<\/span>, \".colorfulDropdown ul\"<\/span>, function<\/span>(e) { \n    bgColorSelect.colorfulSelector(); \n});<\/code><\/pre>\n
    colorPickDropdown.js<\/strong><\/p>\n
    let<\/span> bgColorSelect = {\n       colorfulSelector : function<\/span>() {\n    \t\/\/The dropdown itself<\/span>\n        let<\/span> dropdown = $('.colorfulDropdown ul'<\/span>);\n        \/\/The select button for opening the dropdown<\/span>\n        let<\/span> selectButton = $('.colorfulDropdown button'<\/span>);\n        \/\/The list of options<\/span>\n        let<\/span> optionList = dropdown.children();\n        if<\/span> (optionList.length > 0) {\n          for<\/span> (let<\/span> i = 0; i < optionList.length; i++) {\n           \/\/The color's hex valuestored as an option<\/span>\n           let<\/span> optionValue = optionList[i].getAttribute(\"data-value\"<\/span>);\n           if<\/span> (optionValue) {\n             \/\/Set the background of the option<\/span>\n             $(optionList[i]).css(\"background-color\"<\/span>, optionValue);\n             \/\/Make the border white<\/span>\n             $(optionList[i]).css(\"border-style\"<\/span>, \"solid\"<\/span>);\n             \/\/Make the select button the same color as the selected option, \neven when the dialog has just been loaded<\/span>\n             if<\/span>($(optionList[i]).hasClass(\"is-highlighted\"<\/span>) || \n$(optionList[i]).attr(\"aria-selected\"<\/span>)===\"true\"<\/span>){\n              $(selectButton).css(\"background-color\"<\/span>, optionValue);\n            } \n          }\n          else<\/span> {\n            \/\/If the option has no value, make the background transparent<\/span>\n            $(selectButton).css(\"background-color\"<\/span>, \"transparent\"<\/span>);\n          }\n        }\n      }     \n    }\n};\n<\/code><\/pre>\n
    How to Use:<\/strong><\/p>\n
      \n
    1. Download the package here<\/a><\/li>\n
    2. Open \u2018\/crx\/packmgr\u2019<\/li>\n
    3. Upload and install the package. Make sure \u2018Force Upload\u2019 is checked<\/li>\n
    4. Drop the Color Pick Dropdown component (in Home group) on to any page and open the dialog<\/li>\n
    5. You can see the dropdown colour picker for AEM in action<\/li>\n<\/ol>\n
      If you’re interested in other OOTB solutions customized to make your life easier while working on AEM, drop us a message<\/a>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
      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 … Read more<\/a><\/p>\n","protected":false},"author":29,"featured_media":7217,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"
      Introduction:<\/strong><\/p>
      Most organizations use a set of brand colours within their website. A dropdown (fig. 1) colour picker in 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.<\/p>[caption id=\"attachment_7197\" align=\"aligncenter\" width=\"297\"]\"four Fig. 1: Standard dropdown implementation in AEM.[\/caption]
      Requirement<\/strong><\/p>
      Find a quicker and simpler way to select colours so that authors don\u2019t have to rely on trial-and-error.<\/p>
      Analysis<\/strong><\/p>
      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.<\/p>
      Proposed Solution<\/strong><\/p>
      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.<\/p>[caption id=\"attachment_7198\" align=\"aligncenter\" width=\"300\"]\"Absolute Fig. 2: The required dropdown in a colour pick dialog box after implementation.[\/caption]
      Discovery<\/strong><\/p>
      Component dialogs\u2019 behaviour and styling is handled by the \u2018cq.authoring.dialog\u2019 clientlib by default. This makes it quite easy to modify default dialog behaviour, since all that\u2019s needed is to create a clientlib with \u2018cq.authoring.dialog\u2019 category.<\/p>
      Implementation<\/strong><\/p>
      NOTE<\/strong>: The following has been implemented and tested in AEM 6.2<\/p>
      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.<\/p>
      1. Add a class \u201c<\/em>colorfulDropdown\u201d <\/em><\/strong>to the select field in the component dialog:[caption id=\"\" align=\"aligncenter\" width=\"300\"]\"code Fig. 3: Adding the class \"colorfulDropdown\" to the selected field.[\/caption]
        \u00a0<\/p><\/div><\/li>
      2. Create a clientlib like so: \u201c\/etc\/designs\/argilDX\/colorPickerClientLib<\/strong>\u201d and add a category with value \u201ccq.authoring.dialog\u201d :<\/strong>[caption id=\"attachment_7200\" align=\"aligncenter\" width=\"300\"]\"demonstration Fig. 4: Create a clientlib and add a category with value.[\/caption]<\/li>
      3. Create a file called \u201cjs.txt\u201d under your new clientlib and add the following lines:
        #base=js<\/p>
        drop-down.js<\/p>
        colorPickDropdown.js<\/p>[caption id=\"\" align=\"aligncenter\" width=\"300\"]\"javascript Fig. 5: \u201cjs.txt\u201d file creation and addition of colour pick dropdown under the new clientlib.[\/caption]
        \u00a0<\/p><\/div><\/li>
      4. The following files should be placed under the clientlib folder in the \u201cjs<\/strong>\u201d folder<\/li><\/ol>
        drop-down.js<\/strong><\/p>
        \u00a0<\/p>","_et_gb_content_width":"","content-type":"","footnotes":""},"categories":[316],"tags":[25,301,909,908,907],"yst_prominent_words":[895,893,897,900,894,896,891,913,889,898,917,914,912,899,901,890,910,916,892,888],"acf":[],"yoast_head":"\nDropdown Colour Picker for AEM | Choose Your Brand Colours Easily<\/title>\n<meta name=\"description\" content=\"With the dropdown colour picker for AEM dialogs, authors will easily identify their brand colours from the dropdown as the hues will be shown with labels.\" \/>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.argildx.us\/innovation\/implementing-a-dropdown-colour-picker-for-aem-dialogs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dropdown Colour Picker for AEM | Choose Your Brand Colours Easily\" \/>\n<meta property=\"og:description\" content=\"With the dropdown colour picker for AEM dialogs, authors will easily identify their brand colours from the dropdown as the hues will be shown with labels.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.argildx.us\/innovation\/implementing-a-dropdown-colour-picker-for-aem-dialogs\/\" \/>\n<meta property=\"og:site_name\" content=\"Argil DX\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-31T10:54:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-08-17T06:13:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.argildx.us\/wp-content\/uploads\/2019\/07\/dropdown-colour-picker-header-image1-1024x385.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"385\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.argildx.us\/#website\",\"url\":\"https:\/\/www.argildx.us\/\",\"name\":\"Argil DX\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.argildx.us\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.argildx.us\/innovation\/implementing-a-dropdown-colour-picker-for-aem-dialogs\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.argildx.us\/wp-content\/uploads\/2019\/07\/dropdown-colour-picker-header-image1.png\",\"width\":1349,\"height\":507,\"caption\":\"an abstract splash of red, yellow, blue and pink hues on a canvas\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.argildx.us\/innovation\/implementing-a-dropdown-colour-picker-for-aem-dialogs\/#webpage\",\"url\":\"https:\/\/www.argildx.us\/innovation\/implementing-a-dropdown-colour-picker-for-aem-dialogs\/\",\"name\":\"Dropdown Colour Picker for AEM | Choose Your Brand Colours Easily\",\"isPartOf\":{\"@id\":\"https:\/\/www.argildx.us\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.argildx.us\/innovation\/implementing-a-dropdown-colour-picker-for-aem-dialogs\/#primaryimage\"},\"datePublished\":\"2019-07-31T10:54:21+00:00\",\"dateModified\":\"2020-08-17T06:13:34+00:00\",\"author\":{\"@id\":\"https:\/\/www.argildx.us\/#\/schema\/person\/1c5b6f3f2f7218d9acb851588b98551f\"},\"description\":\"With the dropdown colour picker for AEM dialogs, authors will easily identify their brand colours from the dropdown as the hues will be shown with labels.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.argildx.us\/innovation\/implementing-a-dropdown-colour-picker-for-aem-dialogs\/\"]}]},{\"@type\":[\"Person\"],\"@id\":\"https:\/\/www.argildx.us\/#\/schema\/person\/1c5b6f3f2f7218d9acb851588b98551f\",\"name\":\"Argil DX Media\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.argildx.us\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0ccbc04705942d1269cdf9f789e58484?s=96&d=mm&r=g\",\"caption\":\"Argil DX Media\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts\/7194"}],"collection":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/users\/29"}],"replies":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/comments?post=7194"}],"version-history":[{"count":0,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/posts\/7194\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/media\/7217"}],"wp:attachment":[{"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/media?parent=7194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/categories?post=7194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/tags?post=7194"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.argildx.us\/wp-json\/wp\/v2\/yst_prominent_words?post=7194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}