Expand my Community achievements bar.

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

Avatar

Community Advisor

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" />

Screenshot 2023-08-05 at 3.48.47 PM.png

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

 

 

4 Replies

Avatar

Community Advisor

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

 

Avatar

Community Advisor

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.

Avatar

Community Advisor

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.

Avatar

Community Advisor

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