1). How to create Configuration Edit bar using cq:EditConfig node?
2). How to create Configuration Edit bar using Ext-JS node?
3). Difference between cq:EditConfig vs Ext-JS configuration Edit bar?
Approach - I :
I will show you how to create configuration tab using cq:EditConfig node.
For doing first I create a project structure as shown in fig. -
Then, I have created a component named as -
Then I create a node of primaryType cq:EditConfig with a name cq:editConfig under componentWithEditBar node as displayed in image.
Note : Name of this node must be cq:editConfig
Also add properties on cq:editConfig node as shown in figure -
Approach - II :
How to create this configuration bar using Ext-Js code?
For doing this I have created a new component named as componentWithEditBarUsingExtJs.
in it's jsp file I add the given JS code -
<%@page session="false" %>
String path= resource.getPath();
String resourceType= resource.getResourceType();
String dialogPath = resource.getResourceResolver().getResource(resourceType).getPath() + "/dialog";
"path":"<%= path %>",
"dialog":"<%= dialogPath %>",
"type":"<%= resourceType %>",
CQ.I18n.getMessage("Configuration Tab Using Ext-JS"),
<h3>Example for showing component with a configuration edit bar using Ext Js.</h3>
Now when you drop this component you will see a screen like this -
Difference between these two approaches :
When you want that your configuration bar is visible only in Author mode, use first approach.
Using first approach this configuration bar is visible in Author mode only and when you publish your code then it will be disappeared. Maximum time we have this type of requirement so generally we go with first approach.
But I got a task in which I am integrating AEM with Salesforce & we have to set some setting which are dependent on each publisher. This is a very specific requirement for achieving this when I go with approach one then my configuration bar has been disappeared then I start my R & D for achieving this goal & then I found this second approach using this approach I got the same functionality as I achieve using first approach.
The only difference is when I follow second approach my configuration bar is visible in author as well as in publish mode & works for me.
github repository link