How to get the currentPage URL in cq:dialog dropdown datasources?
In Touch UI dialog's, the dynamic dropdownlist are loaded through data sources, sometime we may need to get the current page URL from where the dialog is opened to load the dropdownlist data.
String path= request.getParameter("item");
Returns the content path with out jcr:content, e.g /content/test/en/home
String path = (String) request.getAttribute(com.adobe.granite.ui.components.Value.CONTENTPATH_ATTRIBUTE);
Returns the path with jcr:content, e.g /content/test/en/home/jcr:content
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import java.util.LinkedHashMap;
import javax.servlet.Servlet;
import javax.servlet.ServletException;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.resource.Resource;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.resource.ResourceResolverFactory;
import org.apache.sling.api.resource.ValueMap;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
import org.apache.felix.scr.annotations.Reference;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.apache.felix.scr.annotations.Service;
import org.apache.felix.scr.annotations.Component;
import org.apache.felix.scr.annotations.Properties;
import org.apache.felix.scr.annotations.Property;
import org.apache.sling.api.wrappers.ValueMapDecorator;
import com.adobe.granite.ui.components.ds.DataSource;
import com.adobe.granite.ui.components.ds.SimpleDataSource;
import com.adobe.granite.ui.components.ds.ValueMapResource;
import com.adobe.granite.ui.components.Value;
import org.apache.sling.api.resource.ResourceMetadata;;
@Service(value = Servlet.class)
@Component(metatype = true)
@Properties({
@Property(name = "sling.servlet.resourceTypes", value = "/services/availableCountryDataSource1"),
@Property(name = "service.description", value = "Get country list"),
@Property(name = "label", value = "countryList") })
public class AvailableCountryDataSource extends SlingSafeMethodsServlet {
@Reference
private ResourceResolverFactory resolverFactory;
private static final long serialVersionUID = 1180258251365536303L;
private static final Logger log = LoggerFactory.getLogger(AvailableCountryDataSource.class);
protected void doGet(SlingHttpServletRequest request,SlingHttpServletResponse response) throws ServletException,IOException {
final Map<String, String> countriesdata = new LinkedHashMap<String, String>();
Map<String, Object> param = new HashMap<String, Object>();
param.put(ResourceResolverFactory.SUBSERVICE, "Albin");
ResourceResolver resourceResolver=null;
try{
ArrayList<Resource> countryList = new ArrayList<Resource>();
ValueMap valueMap = new ValueMapDecorator(new HashMap<String, Object>());
ValueMap properties =null;
String resourcePath =(String)request.getAttribute(Value.CONTENTPATH_ATTRIBUTE);
resourceResolver = resolverFactory.getServiceResourceResolver(param);
Resource resource = resourceResolver.getResource(resourcePath);
properties=resource.adaptTo(ValueMap.class);
String data = properties.get("countryList", (String) null);
if(data != null ){
log.error("INSIDE IF");
ValueMap vm =null;
for(String country : data.split(",")){
String[] tokens = country.split(";");
if(tokens == null || tokens.length != 2){
continue;
}
vm = new ValueMapDecorator(new HashMap<String, Object>());
vm.put("value", tokens[0] );
vm.put("text", tokens[1]);
countryList.add(new ValueMapResource(request.getResourceResolver(),new ResourceMetadata(), "nt:unstructured", vm));
}
}
DataSource dataSource = new SimpleDataSource(countryList.iterator());
log.debug("dataSource...");
request.setAttribute(DataSource.class.getName(), dataSource);
}catch(Exception e){
log.error("Error while retrieving countries.",e);
}
finally{
if(resourceResolver!=null){
resourceResolver.close();
}
}
}
}
Tech Mastery: Deep Dives into AEM, Cloud Technologies, AI Innovations, and Advanced Marketing Strate
Welcome to Tech Mastery, your expert source for insights into technology and digital strategy. Explore topics like Adobe Experience Manager, AWS, Azure, generative AI, and advanced marketing strategies. Delve into MACH architecture, Jamstack, modern software practices, DevOps, and SEO. Our blog is ideal for tech professionals and enthusiasts eager to stay ahead in digital innovations, from Content Management to Digital Asset Management and beyond.
Wednesday, March 6, 2019
Wednesday, February 27, 2019
Adobe Experience Manager(AEM) 6.4 - Touch UI conversion Tips
Adobe Experience Manager(AEM) 6.4 - Touch UI conversion Tips
This post explains some of the issues identified during Touch UI conversion in AEM 6.4.Embedded child components are not editable in Touch UI:
The Touch UI editing is not enabled for the components embedded in another component
e.g
The component2 is embedded in component 1(component1.html)
<div data-sly-resource ="${ @path='component2', resourceType='/apps/test/components/component2 '}" >
The edit option is enabled for parent component(componet1) but not for child component(component2)
The embedded component editing is not enabled if the parent component also included the parsys through sly tag.
The issue is resolved after replacing the sly tag with div tag
<sly data-sly-resource ="${ @path='cartBottomParsys', resourceType='wcm/foundation/components/parsys'}"/>
to
<div data-sly-resource ="${ @path='cartBottomParsys', resourceType='wcm/foundation/components/parsys'}"/>
cq:dialog Inheritence:
Parent dialog tabs and properties are displayed(Inherited) in the child component in Touch UI but the same is not inherited in classic UI.
To hide the parent dialog tabs and properties in child components add the below property to the items node under tabs node in child component - e.g /apps/test/components/pages/homepage/cq:dialog/content/items
Name: sling:hideChildren
Type: String[]
Value: *
To hide the specific tabs from parent component
Name: sling:hideChildren
Type: String[]
Value: tab1,tab2
Hide/show tabs in Coral 3 UI dialog
Adobe Experiance Manager(AEM) 6.4 - Upgrade Tips
This post explains some of the issues identified during AEM 6.4 upgrade.
The Servlet status is disabled in AEM
/etc/cloudsettings/default/contexthub.kernel.js is not loading
Proxy ClientLibs not working through Dispatcher
The touch UI dialog's were not enabled for non of the components after applying 6.4.3 on top of 6.4.2
This is a known issue in AEM 6.4.3, the following workaround can be followed to fix the issue
Go to Package Manager
Reinstall package ""cq-ui-wcm-admin-content-1.0.1004.zip""
Recompile all JSPs (http://<AEM HOST>:<AEM PORT/system/console/slingjsp)
Refer the following Adobe document for more details - https://helpx.adobe.com/experience-manager/6-4/release-notes/sp-release-notes.html
The Servlet status is disabled in AEM
/etc/cloudsettings/default/contexthub.kernel.js is not loading
Proxy ClientLibs not working through Dispatcher
Touch UI dialog is not enabled:
The touch UI dialog's were not enabled for non of the components after applying 6.4.3 on top of 6.4.2
This is a known issue in AEM 6.4.3, the following workaround can be followed to fix the issue
Go to Package Manager
Reinstall package ""cq-ui-wcm-admin-content-1.0.1004.zip""
Recompile all JSPs (http://<AEM HOST>:<AEM PORT/system/console/slingjsp)
Refer the following Adobe document for more details - https://helpx.adobe.com/experience-manager/6-4/release-notes/sp-release-notes.html
Tuesday, February 12, 2019
The Servlet status is disabled in AEM(Adobe Experience Manager) 6.4
The Servlet status is disabled in AEM(Adobe Experience Manager) 6.4
The Servlet created with Archetype 10 is disabled while deploying the same to AEM 6.4(the same is applicable for the Servlet developed in AEM 6.4 with OSGI annotation)
The servlet code(enabled with scr annotation)
package config.core.servlets;
import java.io.IOException;
import java.util.*;
import javax.servlet.*;
import org.apache.sling.api.*;
import org.apache.sling.api.resource.ResourceResolver;
import org.apache.sling.api.servlets.*;
import org.osgi.framework.Constants;
import org.apache.sling.commons.json.*;
import org.apache.felix.scr.annotations.*;
import org.apache.felix.scr.annotations.sling.SlingServlet;
import org.apache.felix.scr.annotations.ConfigurationPolicy;
@Service
@Component(policy = ConfigurationPolicy.REQUIRE)
@SlingServlet(paths = "/bin/servlet/selector1", selectors = "dynamicpopulate",
extensions = "json", methods = "GET", generateComponent = false, generateService = false)
public class FirstServletSelector1 extends SlingAllMethodsServlet {
protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response)
throws ServletException, IOException {
JSONArray jsonArray = new JSONArray();
JSONObject jsonObject = new JSONObject();
JSONObject jsonObject1 = new JSONObject();
JSONObject jsonObject2 = new JSONObject();
try {
jsonObject.put("value", "1");
jsonObject.put("text", "Albin1");
jsonObject1.put("value", "2");
jsonObject1.put("text", "Albin2");
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
jsonArray.put(jsonObject1);
jsonArray.put(jsonObject);
response.getWriter().write(jsonArray.toString());
}
}
The issue is ConfigurationPolicy is defined as REQUIRE but there is no sling:OsgiConfig defined in the repository for the servlet PID.
When we make component 'policy' to 'REQUIRE', OSGi container expects corresponding configuration object (osgi:Config node) to become satisfied
The issue can be resolved either one of the below approach
- Change the ConfigurationPolicy.REQUIRE to ConfigurationPolicy.OPTIONAL in case the sling:OsgiConfig is not mandatory to enable this servlet
- Enable the sling:OsgiConfig in the repository with required configuration values for this servlet
The servlet is in Active state after following one of the above approach.
The details mentioned in this post is one of the reason to mark the Servlet status as disabled.
Monday, February 4, 2019
How to hide/show tabs in Coral 3 Touch UI dialog — Adobe Experience Manager(AEM)
How to hide/show tabs in Coral 3 Touch UI dialog — Adobe Experience Manager(AEM)
This tutorial explains the approach to hide and show the tabs in Coral 3 Touch UI dialog.
Define Dialog
As a first step, define a Coral UI 3 Touch UI dialog (cq:dialog) with tabs and other required fields. The XML structure of the sample dialog is below
<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
xmlns:cq="http://www.day.com/jcr/cq/1.0"
xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="nt:unstructured" jcr:title="Column Component Responsive" sling:resourceType="cq/gui/components/authoring/dialog" extraClientlibs="[customvalidation]"> <content granite:class="tabtest" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/tabs"> <items jcr:primaryType="nt:unstructured" sling:hideChildren="[*]"> <presets jcr:primaryType="nt:unstructured" jcr:title="Presets" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <title jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" fieldDescription="Note: Titles are not available on the Advanced preset" fieldLabel="Add Title to Columns?" name="./title" text="Add Title to Columns?"/> <padding jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" fieldDescription="check to remove padding from columns" fieldLabel="Remove Padding from Columns?" name="./removePadding" text="Remove Padding from Columns?"/> <presets granite:class="presets" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/select" fieldDescription="Choose Column style(Advanced for column customization)." fieldLabel="Presets" name="./presets"> <items jcr:primaryType="nt:unstructured"> <option1 jcr:primaryType="nt:unstructured" text="2 Column(50%,50%) No Offset" value="50-50-no-offset"/> <option2 jcr:primaryType="nt:unstructured" text="2 Column(50%,50%) with Offset" value="50-50-with-offset"/> </items> </presets> </items> </column> </items> </presets> <col1 jcr:primaryType="nt:unstructured" jcr:title="Column 1" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <mobiledialog jcr:primaryType="nt:unstructured" jcr:title="Mobile Break Point" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"> <items jcr:primaryType="nt:unstructured"> <visible jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" fieldDescription="Check to hide on this device." fieldLabel="Hidden?" name="./col1/mobile/hidden" text="Hidden?"/> </items> </mobiledialog> </items> </column> </items> </col1> <col2 jcr:primaryType="nt:unstructured" jcr:title="Column 2" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/container"> <items jcr:primaryType="nt:unstructured"> <mobiledialog jcr:primaryType="nt:unstructured" jcr:title="Mobile Break Point" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"> <items jcr:primaryType="nt:unstructured"> <visible jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" fieldDescription="Check to hide on this device." fieldLabel="Hidden?" name="./col2/mobile/hidden" text="Hidden?"/> </items> </mobiledialog> </items> </column> </items> </col2> <col3 jcr:primaryType="nt:unstructured" jcr:title="Column 3" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <mobiledialog jcr:primaryType="nt:unstructured" jcr:title="Mobile Break Point" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"> <items jcr:primaryType="nt:unstructured"> <visible jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" fieldDescription="Check to hide on this device." fieldLabel="Hidden?" name="./col3/mobile/hidden" text="Hidden?"/> </items> </mobiledialog> </items> </column> </items> </col3> <col4 granite:hide="{Boolean}true" jcr:primaryType="nt:unstructured" jcr:title="Column 4" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <mobiledialog jcr:primaryType="nt:unstructured" jcr:title="Mobile Break Point" sling:resourceType="granite/ui/components/coral/foundation/form/fieldset"> <items jcr:primaryType="nt:unstructured"> <visible jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" fieldDescription="Check to hide on this device." fieldLabel="Hidden?" name="./col4/mobile/hidden" text="Hidden?"/> </items> </mobiledialog> </items> </column> </items> </col4> </items> </content> </jcr:root>Add a property with name granite:class to the tab element and give a unique name e.g tabtest — this class name will be used to locate the tab element in the java script.
Define the Event Listener
Define a cq:ClientLibraryFolder node under the component with the name clientlibs and add the below properties.
categories (String[]) — <define category name> e.g customvalidation
Add the below script in event.js
This script hide the second tab(Column1) on dialog load and shows the tab on the change event of the drop down with class name .presets
(function (document, $, Coral) { var $doc = $(document); $doc.on('foundation-contentloaded', function(e) { var coralTab = $(".tabtest coral-tablist coral-tab"); coralTab[1].hide(); console.log(coralTab[1].get); $('.presets', e.target).each(function (i, element) { Coral.commons.ready(element, function (component) { $(component).on("change",function (event) { var coralTab = $(".tabtest coral-tablist coral-tab"); coralTab[1].show(); }); }); }); }); })(document, Granite.$, Coral);
Add the below content inside js.txt
#base=js
event.js
Add the below property in cq:dialog node
extraClientlibs String[] — customvalidation(the client library defined in the previous step)
Author the component to a page
Second tab(Column 1) is hided on dialog load
Sample Dialog
https://github.com/techforum-repo/youttubedata/blob/master/aem/hide-show-touchui-tabs-1.0.zip
Subscribe to:
Posts (Atom)