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 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"}
]
}




No comments:

Post a Comment