Touch UI - dynamic dropdown by AEM Zen Garden

23 May 2016
Tomasz Wagner
Frink_Cognifide_2016_HeaderImages_0117
If you have been following our series of blogs on Touch UI, welcome to the third instalment, where you find us continuing our journey to convert all AEM Zen Garden's dialogs from Classic UI to Touch UI. Lately we have spotted the opportunity to improve dialog's Select control - with sling resource type granite/ui/components/foundation/form/select.

Currently, Select control lacks some features. We would like to focus on the two most important ones:

  1. You can't realise an action after choosing one of the options from a dropdown. For instance, let's imagine that we have a dropdown that gives us two completely different options and we would like to show specific dialog fields when only one of the options is selected, because only in that case do specific options make any sense.
  2. It is impossible to define options dynamically in the dialog itself - a developer is only able to define options in _cq_dialog.xml.
However, fear not!  We have created a way to do these things and make the author experience even better.

Feature 1 - action after choosing an option on the dropdown

The solution for the first feature is available on AEM Zen Garden's component, Article List. This component gives authors an opportunity to create a list of pages based on page properties - like page title description. Here is an example usage of the Article List component:

article list example

In the Article List component we can choose a property called "Source Mode". Some of the options available include:
  • "Children" - then the Article List component will show all children from a given path, 
  • "Selected pages" - only manually selected pages will be shown.
When an author selects the "Children" option, then they will be able to choose a root for the children. Then the additional dialog field should appear - for instance a path browser to choose the root.
On the other hand, with "Selected pages", an author should be able to choose multiple pages and additional multifield with path browsers should appear.

With the AEM Zen Garden upgrade, developers can use this feature. The results are shown below - Touch UI dialog with selected option "Children" and the same dialog with selected option "Selected Pages". Please notice different dialog fields under the dropdown on both attached screenshots.

You can find source code here.

article list - children 

  article list - selected pages


Feature 2 - defining dropdown option on the fly

Now let's look at the second feature - it is impossible to define options in Touch UI dialog itself.  In AEM Zen Garden we have a component called Form - it is a big container for various smaller components, like: Text Area, Checkbox Field, Radio Button Group, Submit Button and many others.  A form component with some example inner components is shown below:

Form component

Let's imagine this use case: We have a form and a radio button group on it. We would like to give an authors the opportunity to predefine the options in the radio button group. When a user visits our form he or she will be able to select such an option e.g. a product this case. Additionally an author should be able to pick an option checked by default.

Our solution for this is shown below. Please notice that an author can predefine multiple options by label and value. In the dropdown at the bottom, authors can define default option and this option will be initially checked on the form component.

Please click here for the source code.

Radio group

These changes make building Touch UI dialogs much more flexible and user-friendly. When using AEM Zen Garden we can easily build more complex dialogs which require conditional fields. Additionally we have control of the Touch UI dialog from the dialog itself. 

As shown in the last example, where we can define some options and use them in another part of the dialog - select control in this case. 

For more on Touch UI, check out our previous blog, Multifield component in AEM TouchUI dialogs: the Zen Garden approach.