Re-usable Color Select in Touch UI Dialogs w/ ACS Common’s Generic Lists

While working on AEM component’s Touch UI dialogues, in particular, with colors, there are many cases where developers will need to configure the same color options over and over again. We catch ourselves repeating code, which becomes uneasy to maintain changes to the color options. What happens when there is a new color option? Going through many files including a new color option is not that efficient.

In this article, we will be putting together a centralized configuration for color options that can be used by any Touch UI configuration throughout our AEM project utilizing the ACS Common’s Generic Lists. This tutorial will assume that you have your IDE opened, so you can copy and paste code to test.

Screenshot of completed tutorial, shows the generic list datasource

Note!
This article was written specifically setting up centralized colors for Touch UI dialogues, but you can take this approach and apply it on any select granite UI with drop-down select options.

What is ACS Commons Generic Lists?


Generic Lists are a feature allowing easy creation and management of lists of title/value pairs. This configuration can be used as a data source for Touch UI dialogues.

Content authors can amend and manage the list at any time, as long as they have permissions to /etc/acs-commons/lists/* they can make changes immediately.

When saving a selected value from the ACS Common’s Generic List datasource, the value will is copied and set in the components property. So you can imagine, the set value is not a reference but the value itself.

CRX/DE show casing saved values are not references, but hard values


Implementation

In this part of the article, we will be going to step by step, creating a new generic list to hold our shared color options. Then we will set up our Touch UI component, and finally, show you how to amend the list in the author view.

1. Create the ACS Commons Generic List

Create a folder structure of /etc/acs-commons/lists/customcolors/.content.xml. Use the configuration as indicated below. Here you can see that we are creating a new page (ACS Common’s standards) with a parsys which is used to hold a collection of generic list items.
File: /etc/acs-commons/lists/customcolors/.content.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Page">
    <jcr:content
        cq:designPath="/etc/designs/acs-commons"
        cq:template="/apps/acs-commons/templates/utilities/genericlist"
        jcr:primaryType="cq:PageContent"
        jcr:title="colours"
        sling:resourceType="acs-commons/components/utilities/genericlist">
        <list
            jcr:primaryType="nt:unstructured"
            sling:resourceType="foundation/components/parsys">
            <_000000
                jcr:primaryType="nt:unstructured"
                jcr:title="Default"
                sling:resourceType="acs-commons/components/utilities/genericlist/item"
                value="000000"/>
            <_0000FF
                jcr:primaryType="nt:unstructured"
                jcr:title="Blue"
                sling:resourceType="acs-commons/components/utilities/genericlist/item"
                value="0000FF"/>
            <_00ff00
                jcr:primaryType="nt:unstructured"
                jcr:title="Green"
                sling:resourceType="acs-commons/components/utilities/genericlist/item"
                value="00ff00"/>
            <_FF0000
                jcr:primaryType="nt:unstructured"
                jcr:title="Red"
                sling:resourceType="acs-commons/components/utilities/genericlist/item"
                value="FF0000"/>
        </list>
    </jcr:content>
</jcr:root>

2. Insert the Granite UI snippet in the Touch UI Dialogue

Once when ACS Commons Generic List is created, we use this code snippet to dynamically display all the options that will be available in the drop-down. In particular take a look at the <datasource>, as this is where all the magic happens. We are setting the path to the list that we have just created, while the sling:resourceType is acs-commons/components/utilities/genericlist/datasource.
Snippet Example:

1
2
3
4
5
6
7
8
9
10
<textColor
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/form/select"
        fieldLabel="Text Color"
        name="./textColor">
    <datasource
            jcr:primaryType="nt:unstructured"
            sling:resourceType="acs-commons/components/utilities/genericlist/datasource"
            path="/etc/acs-commons/lists/customcolors"/>
</textColor>

Touch UI Completed Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Component Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Text"
                        name="./text"/>
                    <textColor
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/form/select"
                        fieldLabel="Text Color"
                        name="./textColor">
                        <datasource
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="acs-commons/components/utilities/genericlist/datasource"
                            path="/etc/acs-commons/lists/customcolors"/>
                    </textColor>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

3. Include the Generic List in Filter in filter.xml

Making sure that we have included the new configuration in our filters.xml, ensure the mode is set to “merge”, so that changes in the page will not be overwritten in the next release of the code. If you are on your development environment, you can build your code.

1
2
3
4
5
6
//ui.apps/src/main/content/META-INF/vault/filter.xml
<?xml version="1.0" encoding="UTF-8"?>
<workspaceFilter version="1.0">
    <filter root="/apps/sourcedcodeaem"/>
    <filter root="/etc/acs-commons/lists/customcolors" mode="merge"/>
</workspaceFilter>

After your filter.xml have been updated, you can use your maven skills and build your code to AEM.


4. Test

Once your code has been deployed, we are ready to test. Visit one of your content pages that have your allowedComponent, so we can test out the dialogue.
In this example, while in edit mode, the Touch UI dialogue is indeed showing the options.
Screenshot of the drop down options from the datasource

After making changes to the component, clicking on save will only save the value of the generic list, and not a reference.
CRX/DE show casing saved values are not references, but hard values


5. Amend the List as an Author

Making changes to the list is simple, head to the ACS Common’s Generic Lists console: http://localhost:4502/generic-lists.html/etc/acs-commons/lists, select on your list, and click on properties. The link should take you to http://localhost:4502/mnt/overlay/acs-commons/components/utilities/genericlist.html?item=/etc/acs-commons/lists/customcolors.

Here, as an example, we will add a new option named a Demo Test – White, with the value of FFFFFF.
ACS Common’s Generic Lists editing a list item

We just need to save and close, publish is not required, only because we are using the generic list as a datasource for our Touch UI dialoges.


6. Done

After saving the new Generic List’s configuration we can go back to the Touch UI editor, and here revealed is the new option.
Screenshot of completed tutorial, shows the generic list datasource

In Summary

Definitely, this approach is a production-ready approach and is recommended if you have repetitive list options in your components. This implementation will really reduce your configuration overhead in the long run. I hope you enjoyed this tutorial.

The tutorial in this article is highly coupled to a developer, where the generic list is created from the code, but if you wish yo learn how to create a generic list from the AEM platform’s UI or more details about this tool visit the ACS Common’s Generic List’s release notes page, click here.


Was this post helpful?

Hello, I am an enthusiastic Adobe Community Advisor and a seasoned Lead AEM Developer. I am currently serving as an AEM Technical Lead at MNPDigital.ca, bringing over a decade of extensive web engineering experience and more than eight years of practical AEM experience to the table. My goal is to give back to the AEM Full Stack Development community by sharing my wealth of knowledge with others. You can connect with me on LinkedIn.

5 thoughts on “Re-usable Color Select in Touch UI Dialogs w/ ACS Common’s Generic Lists

  1. We have been using the generic list for some time now, and it works really well. Saves alot of time from writing our own data sources.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top