How can use Tabs core component and customize to each container added have an predifined Icon | Community
Skip to main content
N
NathanVieira
New Participant
May 30, 2023
Solved

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

  • May 30, 2023
  • 2 replies
  • 3514 views

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 ?

Best answer by krishna_sai

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

 

Hope this helps,
Krishna

2 replies

krishna_sai
krishna_saiAccepted solution
New Participant
May 31, 2023

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

 

Hope this helps,
Krishna

    N
    NathanVieiraAuthor
    New Participant
    June 9, 2023

    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 

    V
    Vinodbandaru
    New Participant
    August 14, 2023

    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

    Fanindra_Surat
    Fanindra_Surat
    New Participant
    May 30, 2023

    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/customizing.html?lang=en. 

     

    Thanks,

    Fani

      Terms & ConditionsAccessibility statement

      Loading footer...