How to add parsys to Touch UI Tab Component | Community
Skip to main content
P
prashanth55
Level 2
November 5, 2018

How to add parsys to Touch UI Tab Component

  • November 5, 2018
  • 1 reply
  • 7083 views

Hi,

AEM 6.3 Touch UI, How to create a tab component with multiple tabs having a placeholder(parsys) where author has ability to add multiple components to a particular tab. The newly added compoents are dynamic based on author. By default each tab must have a placeholder(parsys) for author to add content.


We were able to implement this tabComponent in ClassicUI with jquery events to have specific tabs selected and editable.


How to achieve the same for Touch UI. Please do share your suggestions on the same.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
November 5, 2018

Hi,

You can create a tab component with Multifield where you can add multiple tabs and each for each tab you can add title and other fields. Based on the items in the tab component, in HTL you can get all the tabs and add parsys for each tab and author can edit tab item directly on the page. they can drag and drop any component inside tab item parsys.

<div data-sly-resource="${tabItem.par @ resourceType='foundation/components/parsys'}" ></div>

Arun Patidar
P
prashanth55Author
Level 2
November 5, 2018

Thanks Arun,

Similar approach we have taken for classic UI. But how we will  make sure author is able to switch tabs and add components to the particular tab in TOUCH UI. I think jquery events are not supported in edit mode in Touch UI now how to handle this

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
November 6, 2018

Hi,

Yes, In edit mode you can show all tabs with content but in preview or disabled, It can work as you want.

Arun Patidar
Terms & ConditionsAccessibility statement

Loading footer...