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"

}

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');

       }

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>

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

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);});

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);});

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);});

AEM CSRF Issue / Forbidden POST Call in AEM

AEM CSRF Issue / Forbidden POST Call in AEM

AEM providing CSRF Protection from 6.0 version on wards. if you are using granite.jquery dependency it will automatically provide CSRF protection framework.

if you are not using cq provided jQuery you must add granite.csrf.standalone as dependency.


if you don't want use above client libs as dependency. you can pass 'CSRF-Token' as header property for async XHR request. Call to '/libs/granite/csrf/token.json' will give 'CSRF-Token' value.



Adobe Document 

CQ5/AEM Issue while reading multifield values using Node API

How to read multifield  using Node API

if you configure one item it will set String type to content node.

if you configure more than one items it will set as Sting[] type to component.

Below snippet code works for both String and String[] types

 

if(currentNode.hasProperty("multifieldProp")){

Value[] options = (currentNode.getProperty("multifieldProp").isMultiple()) ? currentNode.getProperty("multifieldProp").getValues() : null;

if (options == null) {//has single value

Value[] option = {currentNode.getProperty( "optionsConfig" ).getValue()};

options = option;

} 

if ( options != null ) {

for(Value option : options){

System.out.println(option);

}

}

}

How to Obtaining AEM Page Information in JSON Format

AEM / CQ Page Information in JSON Format

you can get page inform by hitting bellow service by passing page path as parameter

http://server:port/libs/wcm/core/content/pageinfo.json?path=<page-path>

Ex : http://localhost:4502/libs/wcm/core/content/pageinfo.json?path=/content/geometrixx/en

Adobe documentation