Dynamic Tab Component

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

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

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 Multifield

It should be possible .

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

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