How to inherit the cq dialog

Dialog Inheritance in CQ

Agenda:
In this article we will learn how to inherit the dialog fields of OTB CQ dialog into custom component’s dialog.Steps:
1.Create the component and with in component , create dialog.

2.Now create  items{type:widgetCollection} and under the items create widget with any name {i have create tabinheritance node of type cq:widget}

3.Add the following properties for inheriting the dialog fields of OTB component

Note: Here we have inheriting the property of dialog of  “/libs/foundation/components/image/dialog/items/advanced/items”.

refer the image below

Here we have added two important properties to ‘tabinheritance’ node

property          type           value
path                  String        “/libs/foundation/components/image/dialog/
                                                 items/advanced/items.infinity.json”
xtype                 String         cqinclude
if you have seen that we have appended the infinity.json to get the value in our component dialog.
After doing all mentioned steps ,double click on dialog and will able to see all the fields.
feel free to provide your input.

How to populate dropdown in cq dialog through sling servlet

Agenda:

In this  article we get to know that  how to populate the selection dropdown values in cq:dialog as a json response from sling servlet.

Pre-Requisite:

1. Should have created the project structure.(more information click here)

2.  Java and Maven should be installed in your system.

Steps:

1.Go to /apps/<your app name>/components   inside the component folder create component “dropDownList” as shown below.

dd1

2.under the node  /apps/<your app name>/components/dropDownList  ,create cq:dialog .

3. Go to the  node   /apps/<your app name>/components/dropDownList/dialog/items/items/tab1  and create items node of type “cq:WidgetCollection”.

4. Go to the  node /apps/<your app name>/components/dropDownList/dialog/items/items/tab1/items and create dropdownlist node of type “cq:widget” as shown below.

dd4

5. Add all the properties to the dropdown node as shown below

Properties

6. Now we create SlingServlet which will provide  json response to the dialog field.

 

Add the following maven dependencies as well for json api in bundles’s pom.

<dependency>
<groupId>org.apache.sling</groupId>
<artifactId>org.apache.sling.commons.json</artifactId>
<version>2.0.18</version>
</dependency>

 

Create java class within respective directory structure and deploy it as as a bundle on felix console.

package com.adobe.cq.servlet;

import java.io.IOException;

import java.util.Locale;

import javax.servlet.ServletException;

import org.apache.felix.scr.annotations.sling.SlingServlet;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.SlingAllMethodsServlet;
import org.apache.sling.commons.json.JSONArray;
import org.apache.sling.commons.json.JSONException;
import org.apache.sling.commons.json.JSONObject;

@SlingServlet(paths = “/bin/SelectDropDownServlet”, methods = “GET”, metatype = true)
public class SelectDropDownServlet extends SlingAllMethodsServlet {

/**
*
*/
private static final long serialVersionUID = 1L;

@Override
protected void doGet(SlingHttpServletRequest request,
SlingHttpServletResponse response) throws ServletException,
IOException {
try {
String[] allCountries = Locale.getISOCountries();

JSONObject countryJson;
JSONArray countyArray = new JSONArray();
for (int i = 0; i < allCountries.length; i++) {

String country = allCountries[i];
Locale locale = new Locale(“en”, country);
countryJson = new JSONObject();
// Get the country name by calling getDisplayCountry()
String countryName = locale.getDisplayCountry();

countryJson.put(“text”, countryName);
countryJson.put(“value”, countryName);
countyArray.put(countryJson);
}
JSONObject finalJson = new JSONObject();
finalJson.put(“country”, countyArray);
//Setting the response as a json
response.setContentType(“application/json”);
//encoding the response for special characters
response.setCharacterEncoding(“utf8”);
response.getWriter().print(finalJson);
}

catch (JSONException e) {
System.out.println(e.getMessage());

}

}

}

Add the following maven dependencies as well for json api

<dependency>
<groupId>org.apache.sling</groupId>
<artifactId>org.apache.sling.commons.json</artifactId>
<version>2.0.18</version>
</dependency>

 

After successful deplyoment bundle should be in active state.

dd7

 

Now to the /apps/<tour app name>/components/dropDownList  , double click on dialog node and validate the dropdown values,it must display all the countries in the drop down .

dd6

If you find something missing ,please feel free to provide inputs.

 

Note:

please refer the article for slingServlet

https://helpx.adobe.com/experience-manager/using/sling_servlet_mbean.html

 

How to create multi field component in cq5

Agenda:

This article explains how to create AEM component with multifield xtype and by default when we use xtype as a multifield ,we get textfield but this article also explains how to get other xtype as a multifield.

Pre-Requisite:

AEM author instance should be up and running.

Should have below AEM Project Structure.

AEM Project

Steps to follow :

  1. Creating the multifield component under the path  /apps/myproject/components/content.1
  2. Fill the details for the component Label,Title .. as shown below
  3. 2
  4. after creating the component we will create the dialog for getting input from author.

      3

5. select the path  /apps/myproject/components/content/multifieldcomponent/dialog  and create the node items{cq:widgetCollection} and  selectimage{cq:widget} like below

    4

6.Go to the path

/apps/myproject/components/content/multifieldcomponent/dialog/items/items/tab1/items/selectimages and add the properties shown in diagram

7

This is how we can use multifield xtype but it will give only textfield.

8

for getting other xtype as field,got to the location /apps/myproject/components/content/multifieldcomponent/dialog/items/items/tab1/items/selectimages

and add create node “fieldConfig” of type “cq:widget“.

12

Add following property to the node fieldConfig

name: xtype

type: String

value: pathfield(you can use other xype also here )

After this step we get pathfield option in dialog as shown below:

13

How to retrieve the values of multifield in jsp

go to the multifieldcomponent.jsp   and use below given code

<%–

multifieldcomponent component.

Multi Field Component

–%>

<%@include file=”/libs/foundation/global.jsp”%>

<%@page session=”false” %>

<c:set var=”images” value=”${properties.selectImages}”/>
<c:forEach var=”images” items=”${properties.selectImages}”>
<img src=”${images}”/><br/>
</c:forEach>

Now you can use this component in nay of the AEM web pages .

Note :Here i have not mentioned the styling of the output , this basically focusing of the concept part.so please ignore the designing part.

If i have missed any portion , please feel free to give suggestions.

HAVE A GREAT DAY…….