May 27, 2020
Estimated Post Reading Time ~

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 component which will generate the above structure 

<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 the your dilaog'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"}
 ]
}


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.