How to open component dialog through Javascript in Touch UI AEM/Adobe CQ5


1) You need to get the editable of the component which you want to open dialog

var cmpEditables = Granite.author.store.find("<component content node path");

var cmp = cmpEditables[0];


2)Pass the editable to the execute method

Granite.author.EditorFrame.editableToolbar.config.actions.CONFIGURE.execute(cmp);
2 comments:

How to refresh component through Javascript in Touch UI AEM/Adobe CQ5


How to refresh component through Javascript in Touch UI


All the editable will store at Granite.author.store

 You can find editables for you component by using find method

var cmpEditables = Granite.author.store.find("<component content node path"); <!-- return array of editables -->

 var cmp = cmpEditables[0];<!-- get you component editable -->

 cmp.refresh(); <!-- refresh you component--->


Or to refresh you can also use

Granite.author.editableHelper.doRefresh(cmp)
2 comments:

How to add rtePlugins for Touch UI Rich Text in Dialog / Inplace Edit In AEM 6.2

Rich Text rtePlugins configurations for the inplace edit

<rtePlugins jcr:primaryType="nt:unstructured">
        <format
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <justify
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <lists
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <links
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <subsuperscript
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <paraformat
            jcr:primaryType="nt:unstructured"
            features="*">
            <formats jcr:primaryType="cq:WidgetCollection">
                <paragraph
                    jcr:primaryType="cq:WidgetCollection"
                    description="Paragraph"
                    tag="p"/>
                <heading1
                    jcr:primaryType="cq:WidgetCollection"
                    description="Heading 1"
                    tag="h1"/>
                <heading2
                    jcr:primaryType="cq:WidgetCollection"
                    description="Heading 2"
                    tag="h2"/>
                <heading3
                    jcr:primaryType="cq:WidgetCollection"
                    description="Heading 3"
                    tag="h3"/>
                <heading4
                    jcr:primaryType="cq:WidgetCollection"
                    description="Heading 4"
                    tag="h4"/>
                <strong
                    jcr:primaryType="nt:unstructured"
                    description="Strong"
                    tag="strong"/>
                <em
                    jcr:primaryType="nt:unstructured"
                    description="Em"
                    tag="em"/>
                <i
                    jcr:primaryType="nt:unstructured"
                    description="I (ai)"
                    tag="i"/>
            </formats>
        </paraformat>
        <styles
            jcr:primaryType="nt:unstructured"
            features="*">
            <styles jcr:primaryType="cq:WidgetCollection">
                <fa-map-marker
                    jcr:primaryType="nt:unstructured"
                    cssName="fa fa-map-marker"
                    text="Font Awesome Map Marker"/>
            </styles>
        </styles>
        <edit
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <findreplace
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <undo
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <spellcheck
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <table
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <fullscreen
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <misctools
            jcr:primaryType="nt:unstructured"
            features="*"/>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline
                jcr:primaryType="nt:unstructured"
                toolbar="[#format,-,#justify,-,#lists,-,links#modifylink,links#unlink,links#anchor,-,subsuperscript#superscript,subsuperscript#subscript,-,#paraformat,#styles,-,misctools#sourceedit,-,fullscreen#start,-,control#close,control#save]">
                <popovers jcr:primaryType="nt:unstructured">
                    <format
                        jcr:primaryType="nt:unstructured"
                        items="[format#bold,format#italic,format#underline]"
                        ref="format"/>
                    <justify
                        jcr:primaryType="nt:unstructured"
                        items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                        ref="justify"/>
                    <lists
                        jcr:primaryType="nt:unstructured"
                        items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                        ref="lists"/>
                    <paraformat
                        jcr:primaryType="nt:unstructured"
                        items="paraformat:getFormats:paraformat-pulldown"
                        ref="paraformat"/>
                    <styles
                        jcr:primaryType="nt:unstructured"
                        items="styles:getStyles:styles-pulldown"
                        ref="styles"/>
                </popovers>
            </inline>
            <tableEditOptions
                jcr:primaryType="nt:unstructured"
                toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,   table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,   table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing]"/>
            <fullscreen
                jcr:primaryType="nt:unstructured"
                toolbar="[#format,-,#justify,-,#lists,-,links#modifylink,links#unlink,links#anchor,-,subsuperscript#superscript,subsuperscript#subscript,-,#styles,#paraformat,-,edit#cut,edit#copy,edit#paste-plaintext,edit#paste-default,edit#paste-wordhtml,-,undo#undo,undo#redo,-,findreplace#find,findreplace#replace,-,spellcheck#checktext,-,misctools#sourceedit,-,table#createoredit,-,fullscreen#start,-,control#close,control#save]">
                <popovers jcr:primaryType="nt:unstructured">
                    <format
                        jcr:primaryType="nt:unstructured"
                        items="[format#bold,format#italic,format#underline]"
                        ref="format"/>
                    <justify
                        jcr:primaryType="nt:unstructured"
                        items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                        ref="justify"/>
                    <lists
                        jcr:primaryType="nt:unstructured"
                        items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                        ref="lists"/>
                    <paraformat
                        jcr:primaryType="nt:unstructured"
                        items="paraformat:getFormats:paraformat-pulldown"
                        ref="paraformat"/>
                    <styles
                        jcr:primaryType="nt:unstructured"
                        items="styles:getStyles:styles-pulldown"
                        ref="styles"/>
                </popovers>
            </fullscreen>
        </cui>
    </uiSettings>

Rich Text rtePlugins configurations for the dialog

<rte-in-dialog
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                    fieldLabel="Footer right"
                    name="./footerRight"
                    useFixedInlineToolbar="{Boolean}true">
                    <rtePlugins jcr:primaryType="nt:unstructured">
                        <format
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
                        <justify
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
                        <lists
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
                        <links
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
                        <subsuperscript
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
                        <paraformat
                            jcr:primaryType="nt:unstructured"
                            features="*">
                            <formats jcr:primaryType="cq:WidgetCollection">
                                <paragraph
                                    jcr:primaryType="cq:WidgetCollection"
                                    description="Paragraph"
                                    tag="p"/>
                                <heading1
                                    jcr:primaryType="cq:WidgetCollection"
                                    description="Heading 1"
                                    tag="h1"/>
                                <heading2
                                    jcr:primaryType="cq:WidgetCollection"
                                    description="Heading 2"
                                    tag="h2"/>
                                <heading3
                                    jcr:primaryType="cq:WidgetCollection"
                                    description="Heading 3"
                                    tag="h3"/>
                                <heading4
                                    jcr:primaryType="cq:WidgetCollection"
                                    description="Heading 4"
                                    tag="h4"/>
                                <strong
                                    jcr:primaryType="nt:unstructured"
                                    description="Strong"
                                    tag="strong"/>
                                <em
                                    jcr:primaryType="nt:unstructured"
                                    description="Em"
                                    tag="em"/>
                                <i
                                    jcr:primaryType="nt:unstructured"
                                    description="I (ai)"
                                    tag="i"/>
                            </formats>
                        </paraformat>
                        <styles
                            jcr:primaryType="nt:unstructured"
                            features="*">
                            <styles jcr:primaryType="cq:WidgetCollection">
                                <fa-map-marker
                                    jcr:primaryType="nt:unstructured"
                                    cssName="fa fa-map-marker"
                                    text="Font Awesome Map Marker"/>
                            </styles>
                        </styles>
                        <edit
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
                        <findreplace
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
                        <undo
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
                        <spellcheck
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
                        <table
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
                        <misctools
                            jcr:primaryType="nt:unstructured"
                            features="*"/>
                    </rtePlugins>
                    <uiSettings jcr:primaryType="nt:unstructured">
                        <cui jcr:primaryType="nt:unstructured">
                            <inline
                                jcr:primaryType="nt:unstructured"
                                toolbar="[#format,-,#justify,-,#lists,-,links#modifylink,links#unlink,links#anchor,-,subsuperscript#superscript,subsuperscript#subscript,-,#paraformat,#styles,-,edit#cut,edit#copy,edit#paste-plaintext,edit#paste-default,edit#paste-wordhtml,-,undo#undo,undo#redo,-,findreplace#find,findreplace#replace,-,spellcheck#checktext,-,misctools#sourceedit,-,table#createoredit]">
                                <popovers jcr:primaryType="nt:unstructured">
                                    <format
                                        jcr:primaryType="nt:unstructured"
                                        items="[format#bold,format#italic,format#underline]"
                                        ref="format"/>
                                    <justify
                                        jcr:primaryType="nt:unstructured"
                                        items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"
                                        ref="justify"/>
                                    <lists
                                        jcr:primaryType="nt:unstructured"
                                        items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"
                                        ref="lists"/>
                                    <paraformat
                                        jcr:primaryType="nt:unstructured"
                                        items="paraformat:getFormats:paraformat-pulldown"
                                        ref="paraformat"/>
                                    <styles
                                        jcr:primaryType="nt:unstructured"
                                        items="styles:getStyles:styles-pulldown"
                                        ref="styles"/>
                                </popovers>
                            </inline>
                            <tableEditOptions
                                jcr:primaryType="nt:unstructured"
                                toolbar="[table#insertcolumn-before,table#insertcolumn-after,table#removecolumn,-,table#insertrow-before,table#insertrow-after,table#removerow,-,   table#mergecells-right,table#mergecells-down,table#mergecells,table#splitcell-horizontal,table#splitcell-vertical,-,table#selectrow,   table#selectcolumn,-,table#ensureparagraph,-,table#modifytableandcell,table#removetable,-,undo#undo,undo#redo,-,table#exitTableEditing]"/>
                        </cui>
                    </uiSettings>
                </rte-in-dialog>

1 comment:

How to Load TouchUI dialog Specific Clientlibs

How to Load TouchUI dialog Specific Clientlibs 

For touch UI dialog we can load specific client libs by using extraClientlibs property to the cq:dialog node. 

see below snippet 

Using  extraClientlibs property

cq: dialog: {
jcr: primaryType: "nt:unstructured",
jcr: title: "Page",
extraClientlibs: ["category1","category2"],
mode: "edit",
sling: resourceType: "cq/gui/components/authoring/dialog"
}

Using Granite Resource

Add node to cq:dialog  with granite component reference (/libs/granite/ui/components/coral/foundation/includeclientlibs)

Use categories property to load both CSS and JS.
Use js property to load only JS
Use CSS property to load only CSS


 {
jcr: primaryType: "nt:unstructured",
categories: ["category1","category2"],
sling: resourceType: "/libs/granite/ui/components/coral/foundation/includeclientlibs"
}
5 comments:

ExtJS /CQ Widget API Tips

ExtJS /CQ Widget API  Tips

How to get the component node path dialog listeners like beforeshow,afterrender ....etc

beforeshow : function(compDialog){
console.log(compDialog.path);//currentNode.getPath();
}

How to do get AJAX call for no cache

var curNodeRes =  CQ.Util.eval( CQ.HTTP.noCaching(compDialog.path+".json") );  // gives json of component node/currentNode

How to get the dialog fields in listeners

1) by using name
selectionchanged : function(el,val,check){
       var dialog = el.findParentByType('dialog');//gives dialog
       var field = dialog.getField('./fieldNameGivenInDialog')
       }
2) by using id -- if item has id
selectionchanged : function(el,val,check){
       var field = CQ.Ext.getCmp('id-given-for-field');
       }
No comments:

How to Check Touch UI Mode in Sightly HTML

How to get different modes in sightly HTML


<sly data-sly-use.wcmModes="/libs/wcm/foundation/components/page/initwcm.js"></sly>

Classic Edit Mode :

<div data-sly-test="${wcmModes.wcmmode.edit}"> Classic Edit Mode </div>

Touch Edit Mode : 

<div data-sly-test="${wcmModes.isTouchAuthoring}"> Touch Edit Mode </div>

Design Mode :

<div data-sly-test="${wcmModes.wcmmode.design}"> Design Mode  </div>

Disabled mode:


<div data-sly-test="${wcmModes.wcmmode.disabled}"> Disabled mode </div>

No comments:

AEM/CQ5 EXTJS WIDGETS VS MATCHING GRANITE UI COMPONENTS

EXTJS WIDGETS VS MATCHING GRANITE UI COMPONENTS



ExtJS xtype Granite UI resource type
button granite/ui/components/foundation/form/button
checkbox granite/ui/components/foundation/form/checkbox
componentstyles cq/gui/components/authoring/dialog/componentstyles
cqinclude granite/ui/components/foundation/include
datetime granite/ui/components/foundation/form/datepicker
dialogfieldset granite/ui/components/foundation/form/fieldset
hidden granite/ui/components/foundation/form/hidden
html5smartfile, html5smartimage   granite/ui/components/foundation/form/fileupload
multifield granite/ui/components/foundation/form/multifield
numberfield granite/ui/components/foundation/form/numberfield
pathfield, paragraphreference granite/ui/components/foundation/form/pathbrowser
selection granite/ui/components/foundation/form/select
sizefield cq/gui/components/authoring/dialog/sizefield
tags granite/ui/components/foundation/form/autocomplete

cq/gui/components/common/datasources/tags
textarea granite/ui/components/foundation/form/textarea
textfield granite/ui/components/foundation/form/textfield


Node type Granite UI resource type
cq:WidgetCollection granite/ui/components/foundation/container
cq:TabPanel granite/ui/components/foundation/container

granite/ui/components/foundation/layouts/tabs
cq:panel granite/ui/components/foundation/container


Click here for Adobe Document



No comments:

How to Create/Delete CQ5/AEM page through Javascript

How to Create/Delete CQ page through Java Script

we can create / delete the CQ page by using OOTB service /bin/wcmcommand by passing necessary parameters.


1) Create : To create page do POST Ajax call to /bin/wcmcommand with below parameters object

  var data = {};
var title = Title of Page //required
var label = name of the page //optional
data['cmd'] = "createPage";
data['title'] = title;
data['_charset_'] = "utf-8";
data[':status'] = "browser";
data['template'] = template path // like -- /apps/geometrixx/templates/homepage
data['parentPath'] = parent page path // like --  /content/geometrixx/en

  $.ajax({
type : "POST",
url : '/bin/wcmcommand',
data:data,
}).done(function(data) {console.log(data);});



2) Delete : To delete page do POST Ajax call to /bin/wcmcommand with below parameters object
              
   var data = {};
data['cmd'] = "deletePage";
data['_charset_'] = "utf-8";
data['force'] = false;
  data['path'] = page apth;// like -- /content/geometrixx/en/test

    $.ajax({
type : "POST",
url : '/bin/wcmcommand',
data:data
     }).done(function(data) {console.log(data);});

No comments:

How to Create/Delete CQ5/AEM page through Javascript

How to Create/Delete CQ page through Java Script

we can create / delete the CQ page by using OOTB service /bin/wcmcommand by passing necessary parameters.


1) Create : To create page do POST Ajax call to /bin/wcmcommand with below parameters object

  var data = {};
var title = Title of Page //required
var label = name of the page //optional
data['cmd'] = "createPage";
data['title'] = title;
data['_charset_'] = "utf-8";
data[':status'] = "browser";
data['template'] = template path // like -- /apps/geometrixx/templates/homepage
data['parentPath'] = parent page path // like --  /content/geometrixx/en

  $.ajax({
type : "POST",
url : '/bin/wcmcommand',
data:data,
}).done(function(data) {console.log(data);});



2) Delete : To delete page do POST Ajax call to /bin/wcmcommand with below parameters object
              
   var data = {};
data['cmd'] = "deletePage";
data['_charset_'] = "utf-8";
data['force'] = false;
  data['path'] = page apth;// like -- /content/geometrixx/en/test

    $.ajax({
type : "POST",
url : '/bin/wcmcommand',
data:data
     }).done(function(data) {console.log(data);});

No comments:

How to Create/Delete CQ5/AEM page through Javascript

How to Create/Delete CQ page through Java Script

we can create / delete the CQ page by using OOTB service /bin/wcmcommand by passing necessary parameters.


1) Create : To create page do POST Ajax call to /bin/wcmcommand with below parameters object

  var data = {};
var title = Title of Page //required
var label = name of the page //optional
data['cmd'] = "createPage";
data['title'] = title;
data['_charset_'] = "utf-8";
data[':status'] = "browser";
data['template'] = template path // like -- /apps/geometrixx/templates/homepage
data['parentPath'] = parent page path // like --  /content/geometrixx/en

  $.ajax({
type : "POST",
url : '/bin/wcmcommand',
data:data,
}).done(function(data) {console.log(data);});



2) Delete : To delete page do POST Ajax call to /bin/wcmcommand with below parameters object
              
   var data = {};
data['cmd'] = "deletePage";
data['_charset_'] = "utf-8";
data['force'] = false;
  data['path'] = page apth;// like -- /content/geometrixx/en/test

    $.ajax({
type : "POST",
url : '/bin/wcmcommand',
data:data
     }).done(function(data) {console.log(data);});

No comments:
Subscribe to: Posts (Atom)