Extending Tabs Component and remove the space and place - in place of ID | Community
Skip to main content
R
RohanKa1
New Participant
January 30, 2024
Solved

Extending Tabs Component and remove the space and place - in place of ID

  • January 30, 2024
  • 2 replies
  • 1041 views

I am extending tabs component here is the content XML of core component

 

<?xml version="1.0" encoding="UTF-8"?> <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" jcr:primaryType="nt:unstructured" jcr:title="Tabs" sling:resourceType="cq/gui/components/authoring/dialog" extraClientlibs="[core.wcm.components.commons.editor.dialog.childreneditor.v1,core.wcm.components.tabs.v1.editor]" helpPath="https://www.adobe.com/go/aem_cmp_tabs_v1" trackingFeature="core-components:tabs:v1"> <content granite:class="cmp-tabs__editor" jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <tabs jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/tabs" maximized="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <containerItems jcr:primaryType="nt:unstructured" jcr:title="Items" sling:resourceType="granite/ui/components/coral/foundation/container" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <columns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <containerItems jcr:primaryType="nt:unstructured" sling:resourceType="core/wcm/components/commons/editor/dialog/childreneditor/v1/childreneditor"/> </items> <granite:data jcr:primaryType="nt:unstructured" max="20" max-length="38" min="2"/> </column> </items> </columns> </items> </containerItems> <details jcr:primaryType="nt:unstructured" jcr:title="Details" sling:resourceType="granite/ui/components/coral/foundation/container" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <columns jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns" margin="{Boolean}true"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <title jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldDescription="Enter the Container label.75 characters maximum allowed." fieldLabel="Container label" maxlength="{Long}75" name="./title" required="{Boolean}true"/> <description jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/textfield" fieldDescription="Enter the Descriptipn" fieldLabel="Description" name="./description"/> </items> </column> </items> </columns> </items> </details> <properties jcr:primaryType="nt:unstructured" jcr:title="Properties" sling:resourceType="granite/ui/components/coral/foundation/container" maximized="{Boolean}true"/> <accessibility jcr:primaryType="nt:unstructured" jcr:title="Accessibility" sling:resourceType="granite/ui/components/coral/foundation/container" margin="{Boolean}true"/> </items> </tabs> </items> </content> </jcr:root>

and this is the sightly file that is default in  Tabs component

 

<div data-sly-use.tabs="com.adobe.cq.wcm.core.components.models.Tabs" data-sly-use.templates="core/wcm/components/commons/v1/templates.html" data-panelcontainer="${wcmmode.edit && 'tabs'}" id="${tabs.id}" class="cmp-tabs" data-cmp-is="tabs" data-cmp-data-layer="${tabs.data.json}" data-placeholder-text="${wcmmode.edit && 'Please drag Tab components here' @ i18n}"> <div class="tab-header"> <h2>${properties.title}</h2> <sly data-sly-test="${properties.description}"> <div class="tabs-description"> <p>${properties.description} </p> </div> </sly> </div> <div class="tab-wrapper"> <ul data-sly-test="${tabs.items && tabs.items.size > 0}" data-sly-list.tab="${tabs.items}" role="tablist" class="cmp-tabs__tablist" aria-label="${tabs.accessibilityLabel}" aria-multiselectable="false"> <sly data-sly-test.isActive="${tab.name == tabs.activeItem}"/> <li role="tab" id="${tab.title}" class="cmp-tabs__tab${isActive ? ' cmp-tabs__tab--active' : ''}" aria-controls="${tab.id}-tabpanel" tabindex="${isActive ? '0' : '-1'}" data-cmp-hook-tabs="tab">${tab.title}</li> </ul> <div data-sly-repeat.item="${tabs.items}" data-sly-resource="${item.name @ decorationTagName='div'}" id="${item.id}-tabpanel" role="tabpanel" aria-labelledby="${item.id}-tab" tabindex="0" class="cmp-tabs__tabpanel${item.name == tabs.activeItem ? ' cmp-tabs__tabpanel--active' : ''}" data-cmp-hook-tabs="tabpanel" data-cmp-data-layer="${item.data.json}"></div> <sly data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/parsys/newpar', appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}" data-sly-test="${(wcmmode.edit || wcmmode.preview) && tabs.items.size < 1}"></sly> </div> </div>

 

 

My Task is to remove any white space present in id="${tab.title}" and change it to - symbol right now it is printing as %20 

I created a java class that is picking up the title or any other text field  but I want to change the child editor node of XML how can I achieve this.

 

For reference I am attaching Java class

@Model(adaptables = {Resource.class, SlingHttpServletRequest.class}, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL, resourceType = "core/wcm/components/tabs/v1/tabs", adapters = { Tabs.class, ComponentExporter.class }) public class CustomTabsModel implements Tabs, ComponentExporter { }

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by TarunKumar

Hi @rohanka1 ,

Please try to use the annotation  @Self and @Via

Reason for this is that when you inject the Core Component model using @Self annotation, it may not be able to render the implementation of the interface from the Core Component’s model.

So to avoid this you must implement all the methods of the Core Model’s interface individually in your Model. .

 

import com.adobe.cq.export.json.ComponentExporter; import com.adobe.cq.wcm.core.components.models.Tabs; import org.apache.sling.api.SlingHttpServletRequest; import org.apache.sling.api.resource.Resource; import org.apache.sling.models.annotations.DefaultInjectionStrategy; import org.apache.sling.models.annotations.Model; @Model( adaptables = {Resource.class, SlingHttpServletRequest.class}, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL, resourceType = "core/wcm/components/tabs/v1/tabs", adapters = {Tabs.class, ComponentExporter.class} ) public class CustomTabsModel implements Tabs, ComponentExporter { @Self @Via(type=ResourceSuperType.class) private Tabs tabs; // Must implement all the method of core component. @Override public String getId() { // Get the original ID from the underlying implementation String originalId = tabs.getId(); // Replace spaces with hyphens return originalId.replaceAll("\\s", "-"); } }

 

 

 

 

 

Thanks
Tarun

2 replies

TarunKumar
TarunKumarAccepted solution
New Participant
January 30, 2024

Hi @rohanka1 ,

Please try to use the annotation  @Self and @Via

Reason for this is that when you inject the Core Component model using @Self annotation, it may not be able to render the implementation of the interface from the Core Component’s model.

So to avoid this you must implement all the methods of the Core Model’s interface individually in your Model. .

 

import com.adobe.cq.export.json.ComponentExporter; import com.adobe.cq.wcm.core.components.models.Tabs; import org.apache.sling.api.SlingHttpServletRequest; import org.apache.sling.api.resource.Resource; import org.apache.sling.models.annotations.DefaultInjectionStrategy; import org.apache.sling.models.annotations.Model; @Model( adaptables = {Resource.class, SlingHttpServletRequest.class}, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL, resourceType = "core/wcm/components/tabs/v1/tabs", adapters = {Tabs.class, ComponentExporter.class} ) public class CustomTabsModel implements Tabs, ComponentExporter { @Self @Via(type=ResourceSuperType.class) private Tabs tabs; // Must implement all the method of core component. @Override public String getId() { // Get the original ID from the underlying implementation String originalId = tabs.getId(); // Replace spaces with hyphens return originalId.replaceAll("\\s", "-"); } }

 

 

 

 

 

Thanks
Tarun

    Raja_Reddy
    Raja_Reddy
    New Participant
    January 30, 2024

    Hi @rohanka1 
    try this way

     

    import com.adobe.cq.export.json.ComponentExporter; import com.adobe.cq.wcm.core.components.models.Tabs; import org.apache.sling.api.SlingHttpServletRequest; import org.apache.sling.api.resource.Resource; import org.apache.sling.models.annotations.DefaultInjectionStrategy; import org.apache.sling.models.annotations.Model; @Model( adaptables = {Resource.class, SlingHttpServletRequest.class}, defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL, resourceType = "core/wcm/components/tabs/v1/tabs", adapters = {Tabs.class, ComponentExporter.class} ) public class CustomTabsModel implements Tabs, ComponentExporter { // ... other methods and fields @Override public String getId() { // Get the original ID from the underlying implementation String originalId = tabs.getId(); // Replace spaces with hyphens return originalId.replaceAll("\\s", "-"); } // ... other methods }

     

    the getId() method is overridden to modify the ID as needed. The tabs field represents the original Tabs implementation that you are extending. Ensure that your class properly implements the Tabs interface by delegating to the underlying tabs object for other methods. Make sure to replace "core/wcm/components/tabs/v1/tabs" with the correct resource type for your extended Tabs component.

     

      Terms & ConditionsAccessibility statement

      Loading footer...