How to edit Teaser's Tab options order on AEM?

Question

I'm (trying) customizing the Teaser component on .content.xml to reach out to my requirements but I don't understand how I can set up an order to tabs options. The best solution would be to write some logic to hide/unhide the Teaser's fields based on the parent component, but I don't know how to do it yet. Meanwhile, I'm editing the XML file.

Options:

• Image
• Metadata
• Text
• Link & Actions

1. The first thing stranger is that I've written the code to show only three options but on AEM Editor keeping showing all options, with "Link & Actions" not declared on .XML. As you can see in the print below.

Path file: ui.apps/.../components/teaser/_cq_dialog/.content.xml

2. The second thing is that I want to put "Link & Actions" options as the last option on the tab bar. So, how make it?

The following print is my current behavior.

Answer 1

The behaviour you notice is due to Sling's Resource Merger feature. The same feature can be leveraged to achieve everything that you want to do.

To answer your question in parts

1. You see Links & Actions tab even though you've not defined it in your dialog because your component extends the OOB teaser component and the Sling Resource Merger would merge the options in the parent and the child dialogs to create the final dialog that is presented to the author. This allows easily extending the features of the parent and only defining the custom properties within your dialog. For e.g. If you only need to add a new tab called Metadata in your teaser component it is enough to just create configurations for that new tab in your custom component and the rest of the configs will flow through from your parent component.

<tabs 
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/tabs">
    <items jcr:primaryType="nt:unstructured">
        <metadata ...>
    </items>
</tabs>

You can then use the following properties provided by Sling to further customise the ordering of the properties / tabs or remove / hide some properties.

• sling:hideProperties - Specifies the property, or list of properties, to hide. The wildcard * hides all.

• sling:hideResource - Indicates whether the resources should be completely hidden, including its children.

• sling:hideChildren - Contains the child node, or list of child nodes, to hide. The properties of the node will be maintained. The wildcard * hides all.

• sling:orderBefore - Contains the name of the sibling node that the current node should be positioned in front of.

Now to answer your second part, if you want to hide the Links & Actions tab completely in your component, then create a node called actions (same name as parent) and then set the property sling:hideResource to true

<tabs 
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/tabs">
    <items jcr:primaryType="nt:unstructured">
        <metadata ...>
        <actions 
            jcr:primaryType="nt:unstructured"
            sling:hideResource="{Boolean}true"/>
    </items>
</tabs>

Alternatively, if you don't want it removed but just moved to the end, just create a node called actions and place it after all the other nodes or use the sling:orderBefore property to specify the order of the tabs. An example of order before shown below where metadata tab appears second, followed by text and then links and actions.

<tabs 
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/tabs">
    <items jcr:primaryType="nt:unstructured">
        <metadata 
             jcr:primaryType="nt:unstructured"
             sling:orderBefore="text"
             ...>
        <text 
            jcr:primaryType="nt:unstructured"
            sling:orderBefore="actions"/>
    </items>
</tabs>

EDIT: How do you know what tab names to use?: Sling Resource Merger works when you overlay a component (think of it like inheritance in Java where you are extending another class).

You can overlay an existing component using the property sling:resourceSuperType on the component node. For e.g., this is the screenshot of my teaser component which is overlaying the OOB teaser component core/wcm/components/teaser/v1/teaser.

Since it is not an absolute path, the order of preference for seaching the component in the repository is /libs/ followed by /apps/

So, searching under /libs/ I was able to find the component at /libs/core/wcm/components/teaser/v1/teaser and expanding the dialog showed the following tabs. The same names need to be used in our component to override the position or visibility or any other sling merger features.

I would recommend understanding the inheritance concepts of Sling in general to make it easier working with AEM.