How to add parsys to Touch UI Tab Component

Avatar

Avatar
Give Back 3
Level 2
prashanth55
Level 2

Likes

7 likes

Total Posts

20 posts

Correct reply

2 solutions
Top badges earned
Give Back 3
Give Back
Ignite 1
Validate 1
Boost 5
View profile

Avatar
Give Back 3
Level 2
prashanth55
Level 2

Likes

7 likes

Total Posts

20 posts

Correct reply

2 solutions
Top badges earned
Give Back 3
Give Back
Ignite 1
Validate 1
Boost 5
View profile
prashanth55
Level 2

05-11-2018

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.

Replies

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

05-11-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>

Avatar

Avatar
Give Back 3
Level 2
prashanth55
Level 2

Likes

7 likes

Total Posts

20 posts

Correct reply

2 solutions
Top badges earned
Give Back 3
Give Back
Ignite 1
Validate 1
Boost 5
View profile

Avatar
Give Back 3
Level 2
prashanth55
Level 2

Likes

7 likes

Total Posts

20 posts

Correct reply

2 solutions
Top badges earned
Give Back 3
Give Back
Ignite 1
Validate 1
Boost 5
View profile
prashanth55
Level 2

05-11-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

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

05-11-2018

Hi,

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

Avatar

Avatar
Give Back 3
Level 2
prashanth55
Level 2

Likes

7 likes

Total Posts

20 posts

Correct reply

2 solutions
Top badges earned
Give Back 3
Give Back
Ignite 1
Validate 1
Boost 5
View profile

Avatar
Give Back 3
Level 2
prashanth55
Level 2

Likes

7 likes

Total Posts

20 posts

Correct reply

2 solutions
Top badges earned
Give Back 3
Give Back
Ignite 1
Validate 1
Boost 5
View profile
prashanth55
Level 2

06-11-2018

Is going to preview mode to change tab for adding content a work around or adobe recommended approach.

Was thinking if there is an alternative solution to achieve instead of having authors to go to preview mode and come back to edit for adding contents to other tabs in a tab component.

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

06-11-2018

I am not sure if this a recommended way but there is a help article for same and they did exactly same as we discussed.

In Edit/Design mode the actual DOM of component is not available instead path of node is injected into DOM, This could be the reason things not work in Edit mode as in preview mode.

I think you can go with below approach.

Creating a Tab layout component for Adobe Experience Manager

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

06-11-2018

Arun is correct - within each Tab - you can specify a parsys component.

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,409 likes

Total Posts

12,671 posts

Correct reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

06-11-2018

I added a parsy component to the tab and now parsys component is showing up.

Tab-Par.png

That is how you can add an AEM component that contains tabs and where each tab uses a parsy that lets an author add components under each tab.

Avatar

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile

Avatar
Coach
MVP
Arun_Patidar
MVP

Likes

1,444 likes

Total Posts

3,327 posts

Correct reply

941 solutions
Top badges earned
Coach
Contributor 2
Ignite 10
Give Back 700
Boost 1000
View profile
Arun_Patidar
MVP

06-11-2018

Agree with Scott. Author just need to switch from edit to preview mode for selecting another tab for edit.

Avatar

Avatar
Give Back 3
Level 2
prashanth55
Level 2

Likes

7 likes

Total Posts

20 posts

Correct reply

2 solutions
Top badges earned
Give Back 3
Give Back
Ignite 1
Validate 1
Boost 5
View profile

Avatar
Give Back 3
Level 2
prashanth55
Level 2

Likes

7 likes

Total Posts

20 posts

Correct reply

2 solutions
Top badges earned
Give Back 3
Give Back
Ignite 1
Validate 1
Boost 5
View profile
prashanth55
Level 2

08-11-2018

Thanks Arun Patidar​ & smacdonald2008​ for your responses its of great help.


Is curious to know if there is a workaround alternative way of switching tabs in edit mode to add content instead of going to preview and changing tabs.