AEM/Adobe CQ : Dialog Editor For Classic UI

Dialog Editor

The dialog editor provides a graphical interface for easily creating and editing dialog boxes and scaffolds. To see how it works, double click on the component's dialog.

In Dilaog Editor you can build you dialog with some cq provided widgets like textfield , pathfield etc...

You may face the following issue

1)  Unable to see dialog after double click on it when any custom widget configured 

For this we have to do overlay html.jsp .

Copy html.jsp form /libs/foundation/components/primary/cq/Dialog/html.jsp to /apps/foundation/components/primary/cq/Dialog/html.jsp

In html.jsp at line number 32  you can see  client libs include to that add your custom widgets client libs 

<cq:includeClientLib categories="cq.widgets,cq.tagging,cq.scaffolding,custom.widgets"/>

2)  Unable to find custom widgets in palette to build dialog

For this you have to  overlay "DialogEditorConstants.js". Copy /libs/cq/ui/widgets/source/widgets/DialogEditorConstants.js to  /apps/cq/ui/widgets/source/widgets/DialogEditorConstants.js. After copy you have to configure your custom widgets / cq widgets.

To Configure follow these steps 

Add your custom/cq provided xtype to CQ.DialogEditor.ALLOWEDCHILDS array 

Eg : Here  I have added dialogfieldset

CQ.DialogEditor.ALLOWEDCHILDS = [ 

            "textfield", 

            "textarea", 

            "numberfield", 

            "selection", 

            "combo", 

            "hidden",

            "richtext",

    "multifield",

    "checkbox",

    "pathfield",

     "dialogfieldset"

];

Add your custom/cq provided xtype configs  to CQ.DialogEditor.MAPPINGS object

add the blow object

dialogfieldset: {

        category:CQ.DialogEditor.CONTAINER,

        text:CQ.I18n.getMessage("Dialogfieldset"),

        insertCfg:{

            "jcr:primaryType":"cq:Widget",

            xtype:"dialogfieldset",

            items:{ "jcr:primaryType":"cq:WidgetCollection" }

        },

allowedChilds: CQ.DialogEditor.ALLOWEDCHILDS,

        propList:{

            title:"Dialogfieldset",

            width:"",

            height:"",

collapsed : false,

collapsible: true,

id : ""

        }

    }

you can add some more properties also if u want. you can see the dialog 'dialogfieldset' under Containers Palette

References 

Adobe Document

How to Convert classic UI (based on ExtJS) Dialog Touch-optimized UI (based on Granite UI/CoralUI).

Dialog Conversion Tool

The dialog conversion tool is provided to help you extend existing components that only have a dialog defined for the classic UI (based on ExtJS). The tool uses this original dialog to create a duplicate dialog designed for the touch-optimized UI (based on Granite UI/CoralUI).

The goal of this tool is to automate the upgrade (as far as possible) to increase efficiency and reduce errors.

Click here for more details / Adobe Document 

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