Combobox with dynamically generated Options in CQ5 Dialog

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 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 show in figure.

for creating a combobox use

xtype = "selection"

type   = "select"

all other properties are explained below - 

allowBlank - It restrict you from submitting the dialog without selecting any 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 the option values for this combobox. In my case it's 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 only array in that case, optionsRoot property is not required.

optionsTextField - This field represent that with key from the JSON object will be treated as a options text values i.e. the text that will be displayed in the combobox.

optionsValueField - This field represent 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 server.

Now this array have multiple JSON objects having two keys with corresponding values. these keys are

"text" & "value".

In my case I want to show "text" as option text value, i.e. it will be visible to author &

"value" is for returning a value to the server when a user select a text value from combobox.

i.e. if user select "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 "text" key as a optionsTextField and "value" as a optionsValueField.

using above properties your combobox will work successfully.