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 include 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.
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.
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.