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
You don't have a need to create two tabs just rename your tab with NewFields or let it be as it is.
2. Under this items node create a new node cq:widget
set the properties of this node as show in figure.
for creating a combobox use
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.