Tab Placeholder not support granite:class and granite:data [Content Fragment]

[Mahedi_Sabuj]

To add any custom class and attribute to the dialog element we use granite:class and granite:data respectively. It works fine for Coral Textfield, Select, etc. I tried to implement the same for Tab Placeholder, but class and attribute not available on HTML for Tab. 

<_x0031_689938985967 jcr:primaryType="nt:unstructured"
  granite:class="tab-container"
  sling:resourceType="dam/cfm/models/editor/components/tabplaceholder"
  fieldLabel="Blog Post"
  listOrder="21"
  metaType="tab-placeholder"
  name="placeholder"
  renderReadOnly="false"
  showEmptyInReadOnly="true"
  valueType="string/tab" />

Is there any other way to add custom class and attribute to the Tab Placeholder?

[partyush]

It seems you want to add custom attributes like granite:class and granite:data to a Tab Placeholder component in an AEM Content Fragment dialog. The issue you are facing is that these attributes are not available for the Tab Placeholder, unlike other Coral components like Textfield and Select.

Since the Tab Placeholder doesn't inherently support granite:class and granite:data, you can't directly add them to the component as you would with other Coral components.

However, there might be an alternative approach you can take. Instead of adding these attributes directly to the Tab Placeholder component, you can wrap the Tab Placeholder inside a container that supports custom attributes, like a div. Then, you can add the desired attributes to the div container.

Here's how you can modify the code to achieve this:

<div class="tab-container" data-my-custom-attribute="custom-value">
  <_x0031_689938985967 jcr:primaryType="nt:unstructured"
    sling:resourceType="dam/cfm/models/editor/components/tabplaceholder"
    fieldLabel="Blog Post"
    listOrder="21"
    metaType="tab-placeholder"
    name="placeholder"
    renderReadOnly="false"
    showEmptyInReadOnly="true"
    valueType="string/tab">
    <granite:data jcr:primaryType="nt:unstructured" showhidetargetvalue="blog"/>
  </_x0031_689938985967>
</div>

In this example, I've wrapped the Tab Placeholder component inside a div container with the class tab-container and the custom attribute data-my-custom-attribute="custom-value". You can replace "custom-value" with the desired value for your custom attribute

Please let me know if it works for you. 

Thanks

Partyush

Sr. Software Engineer

[Mahedi_Sabuj]

We can use HTML element in content fragment model, didn’t know before. Surely, I will try this tomorrow.

But in JCR, we can create either node or folder, so what would be the jcr:primaryType for DIV element? Can you please confirm?

I tried with granite/ui/components/coral/foundation/container like component dialog, but no luck.

[partyush]

Hi @Mahedi_Sabuj 

In AEM, the content fragment model allows you to define structured content using predefined models, and you can include HTML elements in the content fragment's data model. However, when it comes to storing these content fragments in the JCR, they are typically stored as nt:unstructured nodes. This means that the jcr:primaryType for content fragments will be nt:unstructured.

[Mahedi_Sabuj]

Hi @partyush, I haven't had any success yet, even after including the 'div' as the parent node.