AEM/ Adobe CQ5 : How to Create Dynamic / Static Dropdown For Classic UI Dialog

Xtype : selection  type: select Dialog Snippet

Static Options

<text-align

  jcr:primaryType="cq:Widget"

  defaultValue="left"

  fieldLabel="Text Align"

  name="./textAlign"

  type="select"

  value="left"

  xtype="selection">

  <options jcr:primaryType="cq:WidgetCollection">

   <left

    jcr:primaryType="nt:unstructured"

    text="Left"

    value="left"/>

   <right

    jcr:primaryType="nt:unstructured"

    text="Right"

    value="right"/>

   <center

    jcr:primaryType="nt:unstructured"

    text="Center"

    value="center"/>

  </options>

</text-align>

By Using optionsProvider function

<text-align
  jcr:primaryType="cq:Widget"
  defaultValue="left"
  fieldLabel="Text Align"
  name="./textAlign"
  type="select"
  value="left"
  optionsProvider=" use below fuctions"
  xtype="selection"/>
 

static options 

function(path,rec){
 
 var res= {};
 var resItems = [];
 resItems["text1"] = "value1";
 resItems["text2"] = "value2";
 return resItems;
}

Dynamic options 

function(path,rec){
 var opt = [];
 var resPonseData =  CQ.Util.eval(CQ.HTTP.get("serice URL which return JSON"));
 var items = resPonseData.results;
 for(var indx in items){
  var item = {};
  var option = items[indx];
  if(option && option.constructor != Function ){
   item.text = option.description;
   item.value = option.name;
   opt.push(item);
  }
 }
 return opt;
}

By using options : this can accept Object[]/String

Static Object 

<text-align
  jcr:primaryType="cq:Widget"
  defaultValue="left"
  fieldLabel="Text Align"
  name="./textAlign"
  type="select"
  value="left"
  options=" use below Object/String"
  xtype="selection"/>

Sample static object/string

 [
    {
        value: "left",
        text: "Left"
    },
 {
        value: "right",
        text: "Right"
    },
 {
        value: "center",
        text: "Center"
    }
]

You can call jsp which is in your componet which will generate above structre 

<text-align
  jcr:primaryType="cq:Widget"
  defaultValue="left"
  fieldLabel="Text Align"
  name="./textAlign"
  type="select"
  value="left"
  options=$PATH.options.json
  xtype="selection"/>
 
Note: options.json.jsp should be under your dialog's component 

You can Directly call the URL which will return JSON, need to configure display value and text attributes in response 

<text-align
  jcr:primaryType="cq:Widget"
  defaultValue="left"
  fieldLabel="Text Align"
  name="./textAlign"
  type="select"
  value="left"
  options="service/servlet url which return JSON response . see below for sample response"
  optionsRoot="results"
  optionsTextField="title"
  optionsValueField="name"
  xtype="selection"/>

Sample JSON Which is return by service/servlet

{
 "results" : [
  {"name":"left","title":"Left"},
  {"name":"right","title":"Left"},
  {"name":"center","title":"Center"}
 ]
}