Display Components in Touch UI

The focus of this tutorial is to display components in Touch UI or add components from parsys to side panel of Touch UI. This tutorial is intended for Touch UI AEM beginners.

If you are creating a component for the first time in Touch UI. You will definitely come across the situation where components are not visible when you open your page in Touch UI. This may be the components that you have added to your custom group or general out of the box aem components. Lets see how to add components to side panel or sidekick of touch ui.

Note:- Always add a parsys to your component. So that you can add components to your Page.

Steps to Add or Display Components in Side Panel of Touch UI :

  • Go to Site Admin and double click the page to open it in Touch Ui.
    Open page in touch ui from site admin in aem 6
  • Click on Toggle side Panel available on top left section of page. To display Assest and Component Tab in side panel in Touch UI.
    Open page in touch ui in aem 6
  • Switch to design mode, by selecting design from the drop down available on top-right section of page.
    switch to design mode in touch ui in aem 6
  • Click on “Drag Component Here” .
  • On Top left section of this parsys an icon will appear by name parent. Click on it to open configure icon.
    edit parsys in design mode in touch ui aem 6
  • On Top left section of this parsys another icon will appear with name setting. Click on it to open Parsys edit Dialog.
    configure parsys in design mode in touch ui aem 6
  • Select the Component Group that you want to display or add in side panel of Touch UI .
    add components in touch ui from parsys to side panel aem 6
  • Go back to Edit mode from the Drop Down.
  • Click on the Toggle Side Panel available on top left section of page. Select Components Tab.
    display component on side panel of touch in aem 6
  • Your Components are now visible under Side Panel.
  • Drag components from Side Panel to Parsys and enjoy editing the Page in Touch UI.

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

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

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