Custom ComboBox with Dynamically Generated option value by the Servlet

In this post, I will explain how to create ComboBox with Dynamically generated option value in AEM6 dialog?
Let's see with the example:-



I created a dialog with a tab named as tab1. Under this node, I created a node named as items with the property jcr:primaryType = cq:widgetCollection.Under this node, I created a node named as comboBox with the property jcr:primaryType = cq:widget as shown in figure-



Now set the properties of this node as shown in figure-

For creating a comboBox, I used these properties-
type=select
xtype=selection









All other properties are explained below-

allowBlank = It restricts you from submitting the dialog without selecting any option from the comboBox.

fieldLabel = Text that will be shown before comboBox.

options = This property is used to define the servlet path that returns the JSON. This JSON will act as the option value for the comboBox. In my case it's value is /bin/page.html that returns a JSON as shown below-

{"1":[{"path":"/content/geometrixx/en/toolbar/contacts","title":"Contact"},{"path":"/content/geometrixx/en/toolbar/feedback","title":"Feedback"},{"path":"/content/geometrixx/en/toolbar/newsletter","title":"Newsletter"}]}


optionsRoot  = This property defines what property of the given JSON act as the source of options for this comboBox. As my JSON object contains an Array corresponding to a key "1", So my optionsRoot property value will be "1".

optionsTextField =  This field represents that which key from the JSON object will be treated as an options text values i.e. The text that will be displayed in the comboBox.

optionsValueField - This field represents that which key from the JSON object will be treated as the value of that option i.e. On selecting a value from comboBox what will be returned to the server.

Now, In my case the array has multiple JSON objects having two keys with corresponding values. These values are "path" & "title".
 I want to show "title" as option text value, i.e. It will be visible to the author & "path" is for returning the value to the server when user selects title value from the comboBox.
So I set these properties like this-
optionsTextField = title
optionsValueField = path

For example-
If user selects the "Contact" then "/content/geometrixx/en/toolbar/contacts" will be returned to the server for further processing.

After using all the above properties the dialog will be look like this-

NOTE:
If your servlet returns only single JSONArray and at the place of "path" and "title" are "key" and "value" like-

[{"key":"/content/geometrixx/en/toolbar/contacts","value":"Contact"},{"key":"/content/geometrixx/en/toolbar/feedback","value":"Feedback"},{"key":"/content/geometrixx/en/toolbar/newsletter","value":"Newsletter"}]
Then the last three  properties (optionsRoot, optionsTextField, optionsValueField) are not required because by default the value of optionsTextField is "key" & the value of optinosValueField is "value".

But if your JSON is in the form of like this-

{"1":[{"key":"/content/geometrixx/en/toolbar/contacts","value":"Contact"},{"key":"/content/geometrixx/en/toolbar/feedback","value":"Feedback"},{"key":"/content/geometrixx/en/toolbar/newsletter","value":"Newsletter"}]}
Then only optionsRoot value is mandatory.

But if you want to give another name at the place of "key" and "value" then, all of these three properties are mandatory.

If your JSONArray is like as-
[{"path":"/content/geometrixx/en/toolbar/contacts","title":"Contact"},{"path":"/content/geometrixx/en/toolbar/feedback","title":"Feedback"},{"path":"/content/geometrixx/en/toolbar/newsletter","title":"Newsletter"}]

Then, You have to convert your JSON in this form-

{"1":[{"path":"/content/geometrixx/en/toolbar/contacts","title":"Contact"},{"path":"/content/geometrixx/en/toolbar/feedback","title":"Feedback"},{"path":"/content/geometrixx/en/toolbar/newsletter","title":"Newsletter"}]}

Then, You can use last three properties properly.


Be Happy