AEM · AEM 6 · Sightly

AEM | ACS – Generic List | Dialog Configuration – Touch UI


This article will explain how to identify and retrieve values from a list for current site, which is configured in Touch UI dialog’s dropdown.

Note:

  1. Please see Generic List – Support Site Inheritance for understanding of Generic List requirement and complete solution.
  2. For Classic UI, Please see Generic List | Dialog Configuration – Classic UI

Steps:

  1. Create MyList class, to find out correct list and return values. This class will use MyList Service to find and fetch correct list. Click here to download code.
    package com.mysite.constollers.datasource;
    
    import java.util.List;
    import org.apache.sling.api.resource.Resource;
    import com.adobe.cq.sightly.WCMUse;
    import com.adobe.granite.ui.components.ds.DataSource;
    import com.adobe.granite.ui.components.ds.SimpleDataSource;
    
    /**
     * Generic List datasource helper view to return list based on requested site context
     * @author Mohit K. Bansal
     */
    public class MyList extends WCMUse {
        private static final String DATASOURCE = "datasource";	
        static final String CONST_LIST = "list";
    
        @Override
        public void activate() throws Exception {
    	com.mysite.services.MyList list = this.getSlingScriptHelper().getService(com.mysite.services.MyList.class);
    		
    	Resource datasource = this.getResource().getChild(DATASOURCE);
    	String listName = (String) datasource.getValueMap().get(CONST_LIST);
    	
    	List listResource = list.getResourceList(this.getRequest(), listName);
    		
    	DataSource ds = new SimpleDataSource(listResource.iterator());
            this.getRequest().setAttribute(DataSource.class.getName(), ds);
        }
    }
    
  2. Create a datasource, In Touch-UI, we need to create a datasource to fetch value dynamically. For our dropdown, we will create a datasource in Sightly. This datasource is generic and can be used to fetch any dynamic list. To create datasource, please follow following steps:
    • Create a node (eg. mylist) of type “nt:folder” under “/apps/<sitename>/components/datasource”
    • Create a Sightly file named “mylist.html” under “mylist” folder
    • Add following code in “mylist.html” to invoke MyList Class
      <sly data-sly-use.data="com.mysite.controllers.datasource.MyList">
      </sly>
  3. Update cq:dialog to invoke mylist datasource
    <mydropdown
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/select"
            fieldLabel="My Dropdown Label"
            name="./mydropdown">
            <datasource
                jcr:primaryType="nt:unstructured"
                sling:resourceType="/path/of/list/datasource/created/in/step/2"
                list="<List Name>"/>
     </mydropdown>

2 thoughts on “AEM | ACS – Generic List | Dialog Configuration – Touch UI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s