Combobox with dynamically generated Options in CQ5 Dialog

In this post, I’ll show you how to create combobox with dynamically generated option values in Adobe CQ5 dialog i.e. Combobox options will come from a JSON Object created by a servlet.

Project Structure


For showing this demo I have created a customDialogDemo component under blogs/content/ directory.

Then I create a dialog with 2 tabs–

• textTab
• NewFields

You don’t have a need to create two tabs just rename your tab with NewFields or let it be as it is. 

Under NewFields Node
1. Create a cq:widgetCollection Node named as items.
2. Under this items node create a new node cq:widget
named as srcLanguage.

set the properties of this node as shown in the figure.


for creating a combobox use
xtype = “selection”
type = “select”

all other properties are explained below –
allowBlank – It restricts you from submitting the dialog without selecting an option from this combobox.
fieldLable – Text that will be shown before the combobox.
options – This property is used to define the servlet path that returns the JSON those will act as the option values for this combobox. In my case, its value is /bin/target-list.1.html. & it returns a JSON as shown below

{"1":[{"text":"English","value":"ENG"},{"text":"French","value":"FRA"}]}

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 your optionsRoot property values will be “1”.

Note: You may write your servlet that may return the only array in that case, optionsRoot property is not required.

optionsTextField – This field represents that a 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 that will be returned to server.

Now this array has multiple JSON objects having two keys with corresponding values. these keys are “text” & “value”.

In my case I want to show “text” as an optional text value, i.e. it will be visible to the author & “value” is for returning a value to the server when a user selects a text value from combobox.

i.e. if the user selects “English” then “ENG” will be returned to the server for further processing.

for doing this my
optionsTextField property value will be “text” &
optionsValueField property value will be “value”

Note: optionsTextField & optionsValueField are required only when your keys names are different from “text” & “value”. if these are “text” & “value” then no need to declare these properties. It will pick the “text” key as an optionsTextField and “value” as an optionsValueField.

using above properties your combobox will work successfully.