AEM 6.1: How to get the warning icon in a cq:dialog

1.2k Views Asked by At

AEM 6.1: How to get the warning icon in a cq:dialog. Is it some xtype that would help? If it were a pop up then,
CQ.Ext.Msg.show({ "icon":CQ.Ext.MessageBox.WARNIN, }) helps but for "cq:Dialog", How should one **

Display the warning icon

With the warning message in a cq:dialog.

"jcr:primaryType": "cq:Dialog",
        "height": 240,
        "title":CQ.I18n.getMessage("Activate Later"),
        "id": CQ.Util.createId("cq-activate-later-dialog"),
        "params": {
            "_charset_":"utf-8"
        },
        "items": {
            "jcr:primaryType": "cq:Panel",
            "items": {
                "jcr:primaryType": "cq:WidgetCollection",
                **"warnMsg": {
                    "xtype": "displayfield",
                    "html":CQ.I18n.getMessage("my warning message here."),
                    "hideLabel":true,
                    "hidden":flagHidden,
                    "name":"warnMsg",
                    },**
                "absTime": {
                    "xtype": "datetime",
                    "fieldLabel":CQ.I18n.getMessage("Activation Date"),
                    "name":"absTime",
                    "allowBlank": false
                }
            }
        },
2

There are 2 best solutions below

0
akashdeep-mishra On BEST ANSWER

This code removes the text from wrapping around the icon displayed

 "warnMsg": {
                        "xtype": "dialogfieldset",                            
                        "hideLabel":true,
                        "hidden":flagHidden, 
                         "html": "<div><img style='float:left; padding-right:10px' src='/libs/cq/ui/widgets/themes/default/ext/window/icon-warning.gif'></div><div style='font-size:12px; margin-left: 40px;'> Your text here</div>",                    
                        "title":"Warning",
                        "name":"warnMsg"
                    },
1
rakhi4110 On

You can use the display field and specify the required output in the html property as shown below.

"warnMsg": {
    "html": "<img style='vertical-align:middle;' src='/libs/cq/ui/widgets/themes/default/ext/window/icon-warning.gif'><div style='vertical-align:middle; display:inline;'>Warning</div>",
    "xtype": "displayfield",
    "hideLabel": true
}

A similar SO question has been answered here too.