Article summary

Summary

Discusses how to populate an Adobe Experience Manager 6.3 drop-down field (granite/ui/components/coral/foundation/form/select) with images. 

A special thank you to both Sreekanth Choudry Nalabotu (for contributing code)  and Ratna Kumar Kotla (for testing this article to ensure it works).

This HELPX article is based on community content that community members have implemented in various projects. If you see content that needs to be corrected or other updates , please email Scott Macdonald and Kautuk Sahni at scottm@adobe.com and ksahni@adobe.com. 

Digital Marketing Solution(s) Adobe Experience Manager 6.3
Audience Developer
Required Skills HTML, JQuery
Version 6.3

Introduction

When developing Adobe Experience Manager components, you often use a Granite/Coral Select field in your component dialog. A Select field lets an Experience Manager author choose from a list of values. For more information, see /libs/granite/ui/components/foundation/form/select.

For example, assume an author can select a country from a list of countries. To improve the appearance of the Granite/Coral Select field, you can add images to the Select field, as shown in the following illustration. 

dialog
A Select Field with images

Download and install Experience Manager packages

Download and Install the AEM packages in this section. This will give you a starting point that you can use to add images to a Select field by manipulating node properties. Once you install the packages, you will see the following in CRXDE lite under /apps. 

nodes
JCR Nodes that create a dialog with a Select field

You will also see the flag images in the AEM DAM at this JCR location: 

/content/dam/countries

dam1
The images in the AEM DAM

Download

Modify the Touch UI Dialog

The next step is to modify the dialog located in this JCR location:

/apps/myDropDown63/components/content/helloworld/cq:dialog

Perform these steps:

1. Click on /apps/myDropDown63/components/content/helloworld/cq:dialog/content/items/herotext/items/column/items/taskPriority.

2. Change the name from taskPriority to country. Also change the sling:resourceType type to granite/ui/components/coral/foundation/form/select

3. Delete the datasource child node. 

4. Select /apps/myDropDown63/components/content/helloworld/cq:dialog/content/items/herotext/items/column/items/country.

5. Right click and select Create, Create Node. Enter the following values:

  • Name: items
  • Type: nt:unstructured

6. Select /apps/myDropDown63/components/content/helloworld/cq:dialog/content/items/herotext/items/column/items/country/items.

7. Right click and select Create, Create Node. Enter the following values:

  • Name: usa
  • Type: nt:unstructured

8. Add the following properties to the usa node.

  • text (String) - USA
  • value (String) - usa
  • image (String) - /content/dam/countries/usa.jpg (references an image in the AEM DAM)

9. Select /apps/myDropDown63/components/content/helloworld/cq:dialog/content/items/herotext/items/column/items/country/items.

10. Right click and select Create, Create Node. Enter the following values:

  • Name: canada
  • Type: nt:unstructured

11. Add the following properties to the canada node.

  • text (String) - Canada
  • value (String) - canada
  • image (String) - /content/dam/countries/canada.jpg (references an image in the AEM DAM)

12. Select /apps/myDropDown63/components/content/helloworld/cq:dialog/content/items/herotext/items/column/items/country/items.

13. Right click and select Create, Create Node. Enter the following values:

  • Name: india
  • Type: nt:unstructured

14. Add the following properties to the usa node.

  • text (String) - India
  • value (String) - india
  • image (String) - /content/dam/countries/india.jpg (references an image in the AEM DAM)

Note:

Images can only be added to a Select based on granite/ui/components/coral/foundation/form/select not granite/ui/components/foundation/form/select. That is why in step 2, the resource type was changed. 

Add a ClientLib Folder

To successfully add images to a select field, you need to create an Experience Manager ClientLibs folder that has the following properties:

  • categories (String[]) - cq.authoring.dialog.all
  • dependencies (String[]) - underscore

The main purpose of this Clientlib is to host this JavaScript that adds application logic to make it possible to add images to a Select field.

(function ($, $document) {
    var SELECT_RES_TYPE = "granite/ui/components/coral/foundation/form/select",
        SLING_RES_TYPE = "sling:resourceType";

    $document.on("dialog-ready", handleCoralSelect);

    function handleCoralSelect(){
        $.ajax(getDialogPath() + ".infinity.json").done(handler);

        function handler(data) {
            var selectItems = {}, $widget;

            fillItemsOfSelect(data, selectItems);

            _.each(selectItems, function(items, selectName){
                $widget = $("[name='" + selectName + "']");

                if(_.isEmpty($widget)){
                    return;
                }

                addImagesInCoralSelect($widget, items);
            });
        }
    }

    function getDialogPath(){
        var gAuthor = Granite.author,
            currentDialog = gAuthor.DialogFrame.currentDialog, dialogPath ;

        if(currentDialog instanceof gAuthor.actions.PagePropertiesDialog){
            var dialogSrc = currentDialog.getConfig().src;
            dialogPath = dialogSrc.substring(0, dialogSrc.indexOf(".html"));
        }else{
            var editable = gAuthor.DialogFrame.currentDialog.editable;

            if(!editable){
                console.log("EAEM - editable not available");
                return;
            }

            dialogPath = editable.config.dialog;
        }

        return dialogPath;
    }

    function addImagesInCoralSelect($widget, items){
        var adjustCss = false, $item;

        _.each(items, function(item){
            if(!item.image){
                return;
            }

            adjustCss = true;

            $item = $widget.find("coral-select-item[value='" + item.value + "']");

            if(_.isEmpty($item)){
                return;
            }

            $item.prepend("<img src='" + item.image + "' align='middle' width='30px' height='30px' style='margin-right: 5px; '/>" );
        });

        if(adjustCss){
            $widget.find("button").css("padding", "0 0 0 10px");
        }
    }


    function fillItemsOfSelect(data, selectItems){
        if(!_.isObject(data) || _.isEmpty(data)){
            return selectItems;
        }

        _.each(data, function(value, key){
            if(_.isObject(value) && !_.isEmpty(value)){
                selectItems = fillItemsOfSelect(value, selectItems);
            }else{
                if( (key == SLING_RES_TYPE) && (value == SELECT_RES_TYPE)){
                    selectItems[data.name] = data.items;
                }
            }
        });

        return selectItems;
    }
}(jQuery, jQuery(document)));

To add a ClientLibs folder, perform these tasks:

  1. Right-click /apps/myDropDown63/components/content/helloworld components then select New, Node.
  2. Make sure the node type is cq:ClientLibraryFolder and name the node clientlibs.
  3. Right click on clientlibs and select Properties. Add the two properties specified in this section.
  4. Add a TXT file to the clientlibs folder named js.txt. Add the script name to this file: images-select.js.
  5. Add a file named images-select.js. Add the logic shown in this section to this JS file. 

View the images in the Select Field

You can view the images in the Select by going to this URL: 

http://localhost:4502/editor.html/content/myDropDown63/en.html

Then click on the component and open the dialog. 

componenta
The Component in Edit Mode

WHen you click on the Wrench Icon, you can see the images in the select field. 

componentb
Default files created by Adobe Maven 11 Archetype project

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy