Expand my Community achievements bar.

Applications for the 2024-2025 Adobe Experience Manager Champion Program are open!
SOLVED

How can use Tabs core component and customize to each container added have an predifined Icon

Avatar

Level 3

NathanVieira_0-1685476718293.png

In my dialog I can add a container and will create a tab, but is it possible to put an select field with predefined icons to author select an icon to each tab created ?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @NathanVieira , Yes it is possible.

First we need to override `core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor`. and update childeditor.html with the custom fields that we want to add and also modify the childeditor.js logic to read the values and show up in the dialog.
Point this overridden childreneditor to our tabs component dialog containeritems.
Add your custom clientlibs to our dialog to extraclientlibs property in place of core.wcm.components.commons.editor.dialog.childreneditor.v1

krishna_sai_0-1685518636271.png

 

Hope this helps,
Krishna

View solution in original post

10 Replies

Avatar

Community Advisor

Hi @NathanVieira ,

 

You can create a custom component inheriting the core Tabs component, and override the cq:dialog for the desired functionality. This is documented in the "Customizing Dialogs" section in the link https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/customiz...

 

Thanks,

Fani

Avatar

Correct answer by
Community Advisor

Hi @NathanVieira , Yes it is possible.

First we need to override `core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor`. and update childeditor.html with the custom fields that we want to add and also modify the childeditor.js logic to read the values and show up in the dialog.
Point this overridden childreneditor to our tabs component dialog containeritems.
Add your custom clientlibs to our dialog to extraclientlibs property in place of core.wcm.components.commons.editor.dialog.childreneditor.v1

krishna_sai_0-1685518636271.png

 

Hope this helps,
Krishna

Avatar

Level 3

Can you show me your code to override childreneditor and js logic please? I can't display the same result in Touch UI and I don't understand why 

Avatar

Level 1

Hai @NathanVieira  did you got the solution , i too have the same requirement ,it will be helpful to me if you provide what you got

Avatar

Level 1

Hai @krishna_sai   Can you please provide the codes , i too have override the childreneditor and pointed it to new childreneditor in dialog node but when i saving the changes after adding tabs it is showing persistance error

Avatar

Level 1

@krishna_sai - Can you elaborate on how you modified childreneditor.js?

Avatar

Employee

Hello - would you be able to share the code updates for this? Thanks!

Avatar

Level 1

Hi @krishna_sai , I have the similar requirement ,can you please provide reference to modify the childreneditor.js. 

Avatar

Level 4

Can you explain more or do you have the github project for reference.