Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

How can I add a custom attribute to the dialog element?

Avatar

Level 4

How can I add a custom attribute to the dialog element? We typically use attributes like granite:class, Id, and title. Similarly, I believe we can add custom attributes as well. This approach works for RTE.

 

        <textfieldsgroup
            granite:class="cq-RichText-FixedColumn-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="Please provide title text."
                    fieldLabel="Title" 
                    data-custom-attr1="myData"
                    data-custom-attr="100"
                    name="./title"/>
                <description
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                    fieldDescription="Please enter description."
                    fieldLabel="Description"
                    name="./description"
                    useFixedInlineToolbar="{Boolean}true">
                </description>
            </items>
        </textfieldsgroup>

 

I attempted to implement the same for an input text field within a text fields group, but the attribute (

data-custom-attr and data-custom-attr1) is not available on the HTML for the input.

 

Abhishekty_0-1711311632861.png

 

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Level 4

Hi @sateaswa94 , 

 

Thanks for help on this, If you observe the second screenshot above which I have added, you'll notice that I'm utilizing the Sling Resource Include feature. This implies that my text field group fields are part of a separate utility content component, and I'm including that group into multiple dialogs.

 

sling:resourceType="granite/ui/components/coral/foundation/include"
path="/apps/myproject/components/commonfields/content/items/textfieldsgroup"

 

I noticed that you added the text field group in the same container, and it seems to be working for you. However, if you try it that way, than I think issue will reproduceable to you as well.

 

Anyway, I found a workaround for it. I added the granite:data:


<granite:data
jcr:primaryType="nt:unstructured"
data-length-Validation="45"/>

 

where I am including the my util content component and am able to see the attributes as expected.

View solution in original post

9 Replies

Avatar

Level 4

Hi @Saravanan_Dharmaraj ,

No, it is not working for a text field within a text field group. @sateaswa94  it's somewhat similar to the post Saravana mentioned above. I tried that one as well, but unfortunately, it didn't work.

 

Avatar

Level 4

@sateaswa94 :

Here I adding it with textfieldsgroup

Abhishekty_0-1711348171783.png

And here I am using the textfieldsgroup

 

Abhishekty_1-1711348516859.png

 

 

Avatar

Level 2

My dialog structure. Also remove data from the granite:data, granite also will append data to the attributes

<textfieldsgroup
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"
fieldLabel="title"
name="./title">
<granite:data
jcr:primaryType="nt:unstructured"
attr="100"
attr1="myData"/>
</title>
<description
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="description"
name="./description">
<granite:data
jcr:primaryType="nt:unstructured"
attr="100"
attr1="myData"/>
</description>
</items>
</textfieldsgroup>

 

Avatar

Correct answer by
Level 4

Hi @sateaswa94 , 

 

Thanks for help on this, If you observe the second screenshot above which I have added, you'll notice that I'm utilizing the Sling Resource Include feature. This implies that my text field group fields are part of a separate utility content component, and I'm including that group into multiple dialogs.

 

sling:resourceType="granite/ui/components/coral/foundation/include"
path="/apps/myproject/components/commonfields/content/items/textfieldsgroup"

 

I noticed that you added the text field group in the same container, and it seems to be working for you. However, if you try it that way, than I think issue will reproduceable to you as well.

 

Anyway, I found a workaround for it. I added the granite:data:


<granite:data
jcr:primaryType="nt:unstructured"
data-length-Validation="45"/>

 

where I am including the my util content component and am able to see the attributes as expected.

Avatar

Community Advisor

@Abhishekty , Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.