Develop a Component in Touch UI

In this tutorials we are going to see How to develop a component in Touch UI (Touch Optimized UI). As the name indicates Touch UI is introduced to make content authoring possible on Mobile devices such as iPad.

Topics covered in this tutorials:-

Create a Project Structure:


Create a Project structure as shown in previous tutorial.

Your Project Structure should look like below image:

touch ui project structure in aem6

Creating a Template in AEM:


Follow below steps to create a Template in AEM.

  • Select Template Folder. Right Click and select create template.
  • Enter below details in create template dialog.
    create template for touch ui in aem6
  • Enter Allowed Path: /content(/.*)?
  • Click Next. Click Finish and Save Changes.

For more details: How to create a Template in AEM  Click here

Creating a Touch UI Component in AEM:


Follow below steps to create redirect component:

  • Select Components Folder. Right Click and select create component.
  • Enter below details in create component dialog.
    create component for touch ui in aem6
    Note:- Entering Super Type is not mandatory in case of classic UI, but for opening a page in touch ui it is mandatory to provide Super Type, JCR internally convert it to sling:resourceSuperType.
  • Click Next. Click Finish and Save Changes.
  • Double click on touchComponent .jsp and replace the jsp code with below code.
    <html>
    <%@include file="/libs/foundation/global.jsp" %>
    <cq:include script="/libs/wcm/core/components/init/init.jsp"/>
    <body>
    <h1>Here is where your Touch UI component will go</h1>
    <cq:include path="par" resourceType="foundation/components/parsys" />
    </body>
    </html>

Note:- Make sure that if you are creating a page component . It’s sling:resourceSuperType is set to /foundation/components/page as It inherits both dialog and cq:dialog. Which will solve both the editor.html and page properties issues.

For more details How to create a component in AEM Click Here

Testing Newly Created Touch UI Component:


Now lets test our newly created Touch UI component. Follow below steps to test component in AEM:

  • Go to Site Admin.
  • Create a New Folder to maintain readability of Project.
  • From Top Bar Select New –> New Page.
    • Enter Page Name
    • Select Template(Touch UI Template)
  • For more details view How to create pages in site admin
  • Double click on the Page.Open page in touch ui from site admin in aem 6
  • By default Page will open in Touch UI if you are using AEM 6 or above.
    Note:- You can always change default authoring environment either to classic UI or Touch UI in AEM 6 and above. Click Here to see how to configure default authoring in AEM 6 and above.
    display component on side panel of touch in aem 6
  • If no components are visible after opening page in Touch UI. Click Here to Learn how to display components in Touch UI.

Basic Trouble Shooting in Touch UI

  • If blank/white page is opening in touch ui, make sure that you have added Super Type at the time of creation of the component or sling:superResourceType is present on component Node.
  • add sling:superResourceType as parbase if you to inherit attributes from other components. Like if you want your component to be authorable and draggable add parbase to it.So that they can inherit the image and text rendering properties when added to a Paragraph system

If you have any further doubt, Please leave a comment.

Spread the love

Leave a Reply to Ankur Ahlawat Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.