Currently, Select control lacks some features. We would like to focus on the two most important ones:
- 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.
- It is impossible to define options dynamically in the dialog itself - a developer is only able to define options in _cq_dialog.xml.
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:
- "Children" - then the Article List component will show all children from a given path,
- "Selected pages" - only manually selected pages will be shown.
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.
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:
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.
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.