Dynamic Tab Component

[Former Community Member]

Hi all,

I am new to AEM and just wondering if the following is possible:

I am really having a hard time trying to find out if it is.

Requirement:

     To have a cq:dialog that has 2 nodes.

          1.) Title for a tab

          2.) Content of the tab (a component)

     If a tab is clicked, it will show the component that is related with it.

     It has to be dynamic where if an Author wants to add another tab they are able to add it and give it a title and reference a different component.

Basically I want something like googles navigation but will have different components per different tab.

Thanks,

Somnia

[smacdonald2008]

With AEM - you can build custom components that have multi tabs in the components dialog (to address your business requirements).

Each tab has a different UI that lets an author enter different values. A component dialog is built as a JCR structure (as you are new - you may not have known this).

We have articles that show how to build components that contain multi-tabs in the dialog - like this one:

As you can see - this component has 6 tabs whose values are used to render a component - such as:

This is a single component whose component dialog has many tabs and the rendered component is displayed with different tabs as well - each tab has different information that is rendered. This component is built using HTL.

See this article so that you can learn how components like this are developed in AEM --

Scott's Digital Community: Creating an AEM HTML Template Language movie component

[smacdonald2008]

Here is another AEM community article that shows you how to build a custom component that uses multiple tabs in the component dialog and whose output is rendered in the component view:

See -- Creating a NewsLetter component for Adobe Experience Manager 6.3

[smacdonald2008]

However - an author does not add or remove tabs in either the component dialog or the rendered component.

Typically an author fills in information in the component's dialog.

The only dynamic aspect to authoring in AEM would be a multi field. An author can add or remove multi-fields in a component dialog. This is shown in the 2nd article that i listed.

Here is another multi field article as well:

Scott's Digital Community: Creating an AEM HTML Template Language 6.3 component that uses a Multifie...

[VeenaVikraman]

It should be possible .

[Former Community Member]

Hi,

Thank you for all these helpful links. I will in fact save these and study them.

However, I was looking for more of like this:

Let us say I have component 1, component 2.

I will have another component called "categoryTabs."

This categoryTabs will enable the author to select a component for a tab.

Let us say the Author added 2 tabs. The first tab shows component 1, then the second tab shows component 2.

Then let us also say we have a new component that the author wants to be part of the tab list. What we were thinking was to have the "categoryTabs" component allow the author to add another tab then just giving it a title and picking any available component to show as part of the list of tabs.

We don't want to wrap children component into this categoryTab using code

because we might want to reuse it in other pages with a different set of tabs easily.

Hopefully that made sense.

Thanks,

Somnia

[smacdonald2008 · Accepted solution]

Components are typically dropped into a parsys that is part of a web page from the side rail (or sidekick in Classic). A parsys can be within another component - such as the grid layout component - as shown here.

However - I am not following you when you say a component can be dragged into a tab. A component is dropped into the parsys - which by default, states: Drag components here.

See this AEM doc topic for a better understanding of components and how they relate to the AEM Paragraph system:

AEM Components - The Basics

The only way i can think of is to create an AEM page and then code it so it displays tabs in the rendered view- like the Movie example - where it renders using tabs - see Movie component pic above.

[Former Community Member]

Hi thanks for the reply and sorry if it was a little bit confusing.

But this is really helpful since i didn't know a parsys can be within another component.

This really helped a lot! Thank you!

With your reply about the parsys can be in another component, I was able to look for this article: http://labs.6dglobal.com/blog/2014-04-10/toggle-parsys-on-the-fly-with-javascript/

Hide/Show parsys on the fly with JavaScript | 6D Labs which I think will solve my question.

Thank you for being so helpful,

Somnia