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 the 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 an 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 values are/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 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 which key from the JSON object will be treated as the value of that option i.e. On selecting a value from comboBox that 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 an optional text value, i.e. It will be visible to the author & “path” is for returning the value to the server when the user selects the 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 look like this-


NOTE:
If your servlet returns only a 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 the last three properties properly.