Tab

Component Information

Component Title Tab
Description Tabs allow a user to switch between panels of related content. Panels of varying component type can be created.
Features
  • Allows addition of tab panel components of varying resource type.
  • Allowed components can be configured through policy configuration.
  • Navigation to tab panels via tabs.
  • Editing features for tab panels (adding, removing, editing, re-ordering).
Location /apps/ehi-core/aem65/components/content/tabs/v1/tabs
sling:resourceSuperType core/wcm/components/tabs/v1/tabs
Supported AEM Versions 6.5
Editing Mode inPlaceEdit
Component Group Cheerios Experience
Use Object The Tabs component uses the com.adobe.cq.wcm.core.components.models.Tabs Sling model as its Use-object.

 

Client Libraries

The component provides a core.wcm.components.tabs.v1 client library category that contains a recommended base CSS styling and JavaScript component. It should be added to a relevant site client library using the embed property.

BEM Description

BLOCK cmp-tabs
ELEMENT cmp-tabs__tablist
ELEMENT cmp-tabs__tab
MOD cmp-tabs__tab--active
ELEMENT cmp-tabs__tabpanel
MOD cmp-tabs__tabpanel--active

JavaScript Data Attribute Bindings

Apply a data-cmp-is="tabs" attribute to the wrapper block to enable initialization of the JavaScript component.

A hook attribute from the following should be added to the corresponding element so that the JavaScript is able to target it:

data-cmp-hook-tabs="tab"
data-cmp-hook-tabs="tabpanel"

Enabling Tabs Editing Functionality

The following properties and child nodes are required in the proxy component to enable full editing functionality for the Tabs:

  1. ./cq:isContainer - set to true, marks the Tabs as a container component
  2. ./cq:editConfig - afterchilddelete, afterchildinsert and afterchildmove listeners should be provided via the edit configuration of the proxy. _cq_editConfig.xml contains the recommended actions and can be copied to the proxy component.

The default Tabs site Client Library provides a handler for message requests between the editor and the Tabs. If the built-in Client Library is not used, a message request handler should be registered:

new Granite.author.MessageChannel("cqauthor", window).subscribeRequestMessage("cmp.panelcontainer", function(message) {
     if (message.data && message.data.type === "cmp-tabs" && message.data.id === myTabsHTMLElement.dataset["cmpPanelcontainerId"]) {
          if (message.data.operation === "navigate") {
// handle navigation
          }
     }
});

The handler should subscribe to a cmp.panelcontainer message that allows routing of a navigate operation to ensure that the UI component is updated when the active item is switched in the editor layer.

Extending the Components

Extending the components can be done in multiple ways depending on the needs of the brand component.

 

Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.

  1. Change .content.xml file properties 
  2. sling:resourceSuperType to point to the Cheer.IOs component [required]
  3. jcr:title - new Component title
  4. componentGroup - Brand specific Group [required]
  5. jcr:description - Helpful description

 

 

Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.

  1. Follow steps in Extend the Component - Basic
  2. Extend the file i.e. extend-example-option2.html
  3. Update file with new properties
  4. Update the html file with desired changes

 

 

The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.

  1. Follow Steps in Extend Component Basic
  2. Extend the file component.html to point to the new component-tmpl.html file
  3. Extend the file i.e. component-tmpl.html
  4. Update file with new markup

 

 

Use this approach if you need to change the Sling Model to update the backend logic.

Files that will need to be added when extending:

  1. Follow Steps in Extend Component - Basic
  2. Java Interface - this will implement the model with the new methods (if needed)
  3. Sling Model - this will implement the Java Interface from step 1 and leverage the sling delegation pattern to override the original methods
  4. The component.html file to match the new component name

It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.

This gives us the flexibility to change our classes or add attributes easily.  Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.

Configuration Properties

Edit Dialog Properties

The following properties are written to JCR for this Tabs component and are expected to be available as Resource properties:

  1. ./activeItem - defines the name of the item that is active by default.
  2. ./accessibilityLabel - defines an accessibility label for the tabs.

The edit dialog also allows editing of Tabs items (adding, removing, naming, re-ordering).

Policy Properties

The component policy dialog allows definition of allowed components for the Tabs.

Edit Dialog Visual

 

Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.

  1. Change .content.xml file properties 
  2. sling:resourceSuperType to point to the Cheer.IOs component [required]
  3. jcr:title - new Component title
  4. componentGroup - Brand specific Group [required]
  5. jcr:description - Helpful description

 

 

Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.

  1. Follow steps in Extend the Component - Basic
  2. Extend the file i.e. extend-example-option2.html
  3. Update file with new properties
  4. Update the html file with desired changes

 

 

The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.

  1. Follow Steps in Extend Component Basic
  2. Extend the file component.html to point to the new component-tmpl.html file
  3. Extend the file i.e. component-tmpl.html
  4. Update file with new markup

 

 

Use this approach if you need to change the Sling Model to update the backend logic.

Files that will need to be added when extending:

  1. Follow Steps in Extend Component - Basic
  2. Java Interface - this will implement the model with the new methods (if needed)
  3. Sling Model - this will implement the Java Interface from step 1 and leverage the sling delegation pattern to override the original methods
  4. The component.html file to match the new component name

It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.

This gives us the flexibility to change our classes or add attributes easily.  Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.

Component Configuration Visual - Author

Component Demo

  • Accordion 2020-01-06
  • Anchor 2020-01-06
  • Container 2019-12-20
  • External Content 2019-12-20
  • Form - Button 2019-11-26
  • Form - Hidden 2019-11-26
  • Form - Options 2020-01-06
  • Form - Text 2020-01-06
  • Image 2020-01-30
  • List 2020-02-06
  • Rich Text Component 2020-02-14
  • Separator 2019-11-26
  • Tab 2020-02-06
  • Teaser 2020-01-06
  • Title / Heading 2019-11-26

Rich Text Header 1

Here is some bullets

  • item 1
  • item 2
  • item 3
  • etc
    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        E524Z2
    
    3. 

  3. 
        jcr:lastModifiedBy:
        E524Z2
    
    4. 

  4. 
        jcr:created:
        
    
    5. 

  5. 
        jcr:lastModified:
        
    
    6. 

  6. 
        sling:resourceType:
        ehi-core/aem65/components/content/tabs/v1/tabs
    
    7. 




    
        

    

  

  

    
    
      



    

    



    
  
  • 
    
    
        
            Accordion
            2020-01-06
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Anchor
            2020-01-06
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Container
            2019-12-20
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            External Content
            2019-12-20
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Form - Button
            2019-11-26
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Form - Hidden
            2019-11-26
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Form - Options
            2020-01-06
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Form - Text
            2020-01-06
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Image
            2020-01-30
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            List
            2020-02-06
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Rich Text Component
            2020-02-14
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Separator
            2019-11-26
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Tab
            2020-02-06
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Teaser
            2020-01-06
            
            
            
            
        
        
    
    

    • 
  

  
  • 
    
    
        
            Title / Heading
            2019-11-26
            
            
            
            
        
        
    
    

    • 
  




    









    
    
    

        
Rich Text Header 1


Here is some bullets


    

  • item 1
    • 

  • item 2
    • 

  • item 3
    • 

  • etc
    • 



        
    


    
    








  


  
      
  
  
  

  

  

    
  








    






    
  






    

    


    JSON


    JSON


    JSON

Built with Core Components 2.7.0.