Showing posts with label Touch UI. Show all posts
Showing posts with label Touch UI. Show all posts

Saturday, 1 July 2017

AEM Page Properties Touch UI Dialog conversion issue

When tried to create a touch dialog of page properties from classic ui we may may get duplicate widgets on the newly created touch dialog from dialog conversion tool. See how to create touch dialog from dialog conversion tool.

To avoid above issue you can use granite/ui/components/foundation/include resource type in the touch ui for including granite UI components in the current component dialogs. Take a look at the following example in crxde - /libs/wcm/foundation/components/page/cq:dialog/content/items/tabs/items/basic

Tuesday, 27 June 2017

AEM Components not loading in touch ui

I am facing below issues when working on touch UI
  1. I don't see the components on the left rail though I have added the components from design mode. I am dragging and dropping the component from classic ui. I found in forum that there is cache issue in touch ui. Cannot find my components in touch ui sideline. I could see this error on page load /libs/wcm/core/content/components.1498484847911.html?_=1498484940719 500 (Server Error)
  2. When I tried to author the touch ui dialog and click on save, I don't see page is refreshed and authoring changes are not reflected. I see below JS error in browser console.
Error 1:

Error 2:
Uncaught TypeError: Cannot read property 'componentConfig' of undefined
    at f (editor.min.js:4355)
    at Object.<anonymous> (editor.min.js:4578)
    at i (jquery.min.js:784)
    at Object.fireWith [as resolveWith] (jquery.min.js:820)
    at cf (jquery.min.js:2421)
    at XMLHttpRequest.i (jquery.min.js:2519)

Error 3:

Uncaught Error: Components could not be loaded.

Error 4:
GET https://localhost:5433/libs/wcm/core/content/components.1537887896814.html 500 (Server Error)

Root Cause:
when I hit url [1], am getting below exception.
org.apache.sling.api.request.TooManyCallsException:
/libs/cq/gui/components/authoring/componentbrowser/component/component.jsp
It seems that total number of components in AEM instance is more than the default number i.e 1500 (AEM 6.1) or 1000 (AEM 6.2). So the new components are not displayed in side rail and not able to edit the existing components.

Solution: 
We need to increase the "sling.max.calls" property value of "Apache Sling Main Servlet" OSGI config. My total component count was 1602, I have increased to 2000 and solved above 2 issues

Thursday, 9 March 2017

Using Granite DataSource objects to populate Experience Manager 6.2 Touch UI Select objects

You can create an Adobe Experience Manager (AEM) 6.2 Touch UI component that contains a drop-down control that can be used within the AEM Touch UI view. An AEM author selects drop-down values during design time. For example, an author can select a USA state value from an AEM component that displays address information. A drop-down control is populated by using a com.adobe.granite.ui.components.ds.DataSource object. For information, see DataSource.
Once you create a DataSource object, its data can be used to dynamically populate a drop-down control, as shown in this illustration.

A drop-down control populated by using a DataSouce object

Sunday, 5 March 2017

Programmatically manipulating Touch UI Fields

When developing Adobe Experience Manager custom components, you can programmatically interact with fields located in a Touch UI component dialog using an API. That is, you can control the behaviour of a field (such as a checkbox) by using application logic. For example assume that you have a checkbox located within a component dialog and you want to have the ability to check a condition and then dynamically check or uncheck the checkbox (this is shown later in this article).
Using JavaScript application logic, you can dynamically check the box so that the checkbox appears checked when an AEM author opens the dialog box, as shown in this illustration. 

Friday, 3 March 2017

Things to know about AEM Touch UI

Adobe introduced a new touch-optimized UI with AEM 5.6 for the author environment. This differs considerably from the original classic UI as it is designed to operate on both touch and desktop devices. The basic principles of the touch-optimized UI are:
  • Mobile first (with desktop in mind)
  • Responsive design
  • Context relevant display
  • Reusable
  • Include embedded reference documentation
  • Include embedded tests
  • Bottom-up design to ensure these principles are applied to every element and component

Touch UI (Rich Text) Overlay Component does not work when included statically on the template

<div data-sly-resource="${ @path='richText' , resourceType='/apps/XXX/components/content/text'}" ></div>
Included Statically on a Template.  When Tries to Edit the dialog : 
I see error in console 
GET http://localhost:4502/content/a/b/c/jcr:content/richText.json?_=1458055488719 404 (Not Found)

But when I drop the component statically on a template it works fine. 
This is because when you include it that way, the "text" resource is technically null and not available.  Since you're including it in your page component, modify the associated template and pre-set the text node.  Example:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:description="Page Template"
          jcr:primaryType="cq:Template"
          jcr:title="Page Template"
          allowedPaths="[/content/site/en(/.*)?]"
          ranking="{Long}100">
    <jcr:content
            jcr:primaryType="cq:PageContent"
            sling:resourceType="site/components/page/interior"
            cq:designPath="/etc/designs/site">
            <text jcr:primaryType="nt:unstructured" sling:resourceType="wcm/foundation/components/text" />
    </jcr:content>
</jcr:root>

Friday, 17 February 2017

Adding to the Create Page Wizard in Touch UI

In this blog post, I will describe how you can add a new property to the Page dialog and make it available in the Create Page wizard and Touch UI Dialog in AEM 6.1. It is common to add new properties to dialogs whenever you need to give authors additional options for configuring components or pages. Whenever you need to add a new property into the Page dialog, it typically will not be required by authors at the time of Page creation. For those rare cases when you need some detail specified about a page upon page creation, you will need to add properties into the Create Page wizard. Below is what the out-of-the-box Create Page wizard looks like.

Tuesday, 22 November 2016

Changing Default Favicon of AEM Admin Interface

To change the default favicon of the touch UI admin interface, you need to overlay the /libs/granite/ui/components/foundation/page/favicon/favicon.jsp. Just change this path in your overlayed file and remove the Adobe copyright comment text.

Config cfg = cmp.getConfig();
AttrBuilder attrs = new AttrBuilder(request, xssAPI);
attrs.add("rel", "shortcut icon");
attrs.addHref("href", cfg.get("href", "/libs/granite/core/content/login/favicon.ico"));
// https://en.wikipedia.org/wiki/Favicon#How_to_use
%><link <%= attrs.build() %>>

Change the favicon path highlighted in red above.

Refer the below scrrenshot to overlay the OOTB favicon.jsp-


Friday, 9 September 2016

Creating an AEM 6.2 HTML Template Language component that uses a Multi-Field dialog

You can create an Adobe Experience Manager (AEM) 6 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use the AEM HTML Template Langauge (HTL - formally known as Sightly) to develop the AEM component. For example, consider an author whom enters information into a multi-field control in the component's dialog, as shown in this illustration.

Sunday, 14 August 2016

Creating an AEM HTML Template Language component that uses the WCMUsePojo class

You can create an Adobe Experience Manager (AEM) 6 Touch UI component that can be used within the AEM Touch UI view. Furthermore, you can use the AEM HTML Template Langauge (HTL - formally known as Sightly) to develop the AEM component. HTL is the AEM template language that can be used to replace use of JSP when developing an AEM component. HTL helps you to separate your design from your application logic. For more information, see Introduction to the HTML Template Language.

An AEM author can access a HTL dialog to enter component values. For example, you can enter text that is displayed by the component, as shown in the following illustration.

A HTL Component Dialog


After you enter the component's values (for example, text values), you click the checkmark icon and the values are entered onto the AEM page. 

Values displayed in the AEM web page

Monday, 4 July 2016

Dialog Conversion Tool

The dialog conversion tool is provided to help you extend existing components that only have a dialog defined for the classic UI (based on ExtJS). The tool uses this original dialog to create a duplicate dialog designed for the touch-optimized UI (based on Granite UI/CoralUI).

Download and Install the Dialog Conversion Tool

  1. Install the package on your instance.file

AEM Components for the Touch-Optimized UI

AEM components are used to hold, format and render the content made available on your webpages.
  • When authoring pages, the components allow the authors to edit and configure the content.
    • When constructing a Commerce site the components can, for example, collect and render information from the catalog.
      See Developing eCommerce for more information.
    • When constructing a Communities site the components can provide information to and collect information from your visitors.
      See Developing Communities for more information.
  • On the publish instance the components render your content, presenting it as you require to your website visitors.

Tuesday, 12 April 2016

Touch UI dynamic selection of multiple drop downs in AEM 6.1

This articles show the use case of have multiple chained drop down in Touch UI. Values in the next drop down depends on what has been selected on previous one. 
Brief on how it works:-
There are two drop downs with name Language and Country. When you select a Language from drop down, Country down down gets populated with the name of the countries using that language. For example if you select “German” as a language then all countries using German as language will get populated in second drop down.

Saturday, 26 March 2016

Implement DataSource for drop down using Sightly AEM 6.1

In Touch UI component, DataSource is very useful when it comes populate drop down dynamically. This article will help you to understand how datasource can be used with Sightly and leaving JSP behind.
Let’s get started with authoring…
Sightly DataSource Component Authoring
Component contains a simple drop down, values for this will be populate dynamically using DataSource.

Tuesday, 17 November 2015

AEM Touch UI issues

When working with AEM touch ui we often come across some issues. Below are some of the common issues which we face when using touch ui.

<cq:include path=’text’ resourceType=’foundation/components/text’/> 
In Sightly, you can do a similar one-liner:

<div data-sly-resource=${‘text’ @resourceType=’foundation/components/text’}”></div>
However, there are a few things to be aware of when embedding components, especially when using Touch UI.
I will highlight three issues that I have come across when embedding components using Sightly and Touch UI, and explain the symptom, the cause, and give a solution for each.
ISSUE 1: Edit config does not refresh page after component edit
The Symptom 
A component set up to refresh the page after edit does not refresh the page in Touch UI. In the web console there is a JavaScript error: Uncaught TypeError: Cannot read property ‘componentConfig’ of undefined.
The Cause
The component was in the .hidden component group. Touch UI has a list of editables, or components. This list does not include components in the .hidden group. When the component is edited, JavaScript runs that looks for the component in the list of editables. Because it is not in the list, the JavaScript throws an error and the editconfig afteredit action does not happen.
Uncaught TypeError: Cannot read property 'componentConfig' of undefined
EditConfigCause
The Solution
Put the component in a group other than .hidden. This will make the component available to be added to the list of components that can be dropped into a parsys, and it would be up to the content team to not include these components in the design configuration. To help keep this clear you could put the components into a group named Hidden.
Note: I am continuing to look for a good solution to handle components in the .hidden group, since the parsys component is in that group and in my experience is the most common component to be embedded. So far I have not yet found a way to deal with this. It appears in Touch UI there is an update method that runs after closing the dialog, and that supersedes any custom afteredit event handlers attached to the component.
ISSUE 2: Dialog does not open in Touch UI
The Symptom
Embedded component’s dialog box doesn’t open in Touch UI. In the web console there is a 400 (Bad Request) error.
The Cause
Embedded components do not create their content node until after the dialog has sent a POST to the component’s content path. The problem here is that in Touch UI the component looks for the dialog to open based on the content path. Since the content path doesn’t exist the dialog fails to open with an error.
DialogDoesNotOpenCause
The Solution
Make sure the content node for the component exists. There are a couple ways of doing this.
  1. Add the component to the jcr:content of the template used to create the page.
  2. Add a script to run just before the include of the component that creates the node if it doesn’t already exist. (Below is some example code For solution 2)
JS Use API
In a file named EmbeddedComponent.js
"use strict";
/**
 * Creates a component node with name, if node does not yet exist.
 */
use([], function () {
    var newResourceName = this.name;
    var newResourceType = this.type;
    var resourceResolver = resource.getResourceResolver();
    var newNodePath = resource.path + "/" + newResourceName;
    var existingComponentResource = resourceResolver.getResource(newNodePath);
    if(existingComponentResource == null){
        var properties = {"jcr:primaryType":"nt:unstructured",
            "sling:resourceType":newResourceType};
        resourceResolver.create(resource, newResourceName, properties);
        resourceResolver.commit();
    }
});
Sightly script


<div data-sly-use="${EmbeddedComponent.js' @ name='primary', type='foundation/components/parsys'/> 
Java Use API

package com.aempodcast.example.components.utils;
import com.adobe.cq.sightly.WCMUse;
import java.util.HashMap;
import java.util.Map;
import org.apache.sling.api.resource.Resource;
import javax.jcr.Node;
import javax.jcr.RepositoryException;
import org.apache.sling.api.resource.PersistenceException;
import org.apache.sling.api.resource.ResourceResolver;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
public class EmbedComponent extends WCMUse {
    private static final Logger log = LoggerFactory.getLogger(EmbedComponent.class);
    private ResourceResolver resourceResolver = null;
    private String resourceType = null;
    private String resourceName = null;
    private Resource resource = null;
    private Resource child = null;
    @Override
    public void activate() throws Exception {
        // Set resource Name and Type
        resourceName = get("name", String.class);
        resourceType = get("type", String.class);
        resource = getResource();
        child = resource.getChild(resourceName);
        resourceResolver = resource.getResourceResolver();
        
        if (child != null && !child.isResourceType(resourceType)) {
            updateResourceType();
        } else if(child == null) {
            createResource();
        }
    }
    private void createResource() {
        try {
            Map<String, Object> properties = new HashMap<>();
            properties.put("sling:resourceType", resourceType);
            resourceResolver.create(resource, resourceName, properties);
            commitChanges();
        } catch (PersistenceException ex) {
            log.error("Failed to create resource", ex);
        }
    }
    private void updateResourceType() {
        try {
            Node childNode = child.adaptTo(Node.class);
            childNode.setProperty("sling:resourceType", resourceType);
            commitChanges();
        } catch (RepositoryException ex) {
            log.error("Failed to update resource type", ex);
        }
    }
    private void commitChanges() {
        try {
            resourceResolver.commit();
        } catch (PersistenceException ex) {
            log.error("Failed to save changes", ex);
        }
    }
}
Sightly Script

<div data-sly-use="${com.aempodcast.example.components.utils.EmbedComponent' 
@ name=’primary’, type='foundation/components/parsys'}" data-sly-resource="primary"></div>
ISSUE 3: Component select highlight goes beyond the component area
The Symptom
Embedded component’s authoring highlight in Touch UI is bigger than the component itself, or an embedded component below is un-editable.
HighlightGoesBeyondSymptomEach paragraph is a copy of a component. The top most is embedded while the other four are dropped into parsys. The embedded component has data-sly-unwrap set on it. The blue border shown is the selected top most component. The other four components cannot be selected.
The Cause
The wrapping element of the component had been removed with data-sly-unwrap. Adobe Experience Manager puts a cq element, which holds helpful metadata for the authoring interface. One of the things it is used for is to set which element to use as the component boundary. When the component is selected, the boundary gets highlighted with a blue border. When the default wrapping element is removed, the next parent element is then used as the component boundary, which can cause the highlight to go beyond the component, and interfere with the ability to edit other components.
The Solution
Do not use data-sly-unwrap on elements including data-sly-resource.
Conclusion
In transitioning from CQ5 JSPs and the Classic UI to Adobe Experience Manager 6.0 Sightly and Touch UI, there are things that need to be adjusted in how they are done. Knowing the possible issues–and how to solve them–will make Sightly and Touch UI easier to use for developers and content authors.

Friday, 13 November 2015

Component not showing in Touch UI / SideKick of Classical UI in AEM / Adobe CQ5 / AEM6

To see component in the Touch UI

If you want to see the component in touch UI components list. The component Should have cq:editConfig node. Though if you add cq:editConfig node, if components are still not displayed then if you get TooManyCallsException. Check this post to avoid TooManyCallsException


  • We need to increase the "sling.max.calls" property value of "Apache Sling Main Servlet" OSGI config. My total component count was 1602, I have increased to 2000 and solved above 2 issues


To See Component in the SideKick in Classic UI

  • The component should have dialog.
  • if component have dialog and not showing in sidekick. Check title of Component it should starts with capital letter.