May 27, 2020
Estimated Post Reading Time ~

AEM: 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 your 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 the 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 the 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 below 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


By aem4beginner

No comments:

Post a Comment

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