Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

how to uniquely identify AEM component

Avatar

Level 5

I have a js file which is being used when Component's dialog box is being opened . I want to know is there any unigue property of the component that I can catch and use it in the js file. for ex-class, id or something like that

Thank you

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

I would say use

id="component-name-${resource.path.hashCode}"


Arun Patidar

View solution in original post

10 Replies

Avatar

Community Advisor

Hi,

 

You can add granite:class , granite:id to component dialog and use that in js file to execute the script

 

Ex:

(function(document, $, Coral) {

'use strict';

$(document).on('foundation-contentloaded', function(e) {

var = $('.customclass coral-select[name="./theme"]').val());

});

})(document, Granite.$, Coral);

 

Also refer: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/granite-class-and-granite-...

Avatar

Employee Advisor

Is that js file part of the component specific client library or applicable for every component?

Sharing my ideas here -

You could review granite:class , granite:id and wrapperClass [/apps/core/wcm/components/teaser/v2/teaser/cq:dialog/content/items/tabs/items/actions/items/columns/items/column/items/linkURL] property for your implementation.

 

We are using these properties at dialog field level.

 

One more point : please review article on useful properties of a component [https://aem4beginner.blogspot.com/useful-properties-of-component-in-aem-63] and youtube videos. We could use these properties with different use cases also.

Avatar

Level 5

granite:class and granite:id are not getting showed up in the structure when I look it via inspect element

Avatar

Community Advisor

Looks like you want to write a single js file that can be used for multiple components on the basis of a unique ID. 

Can you tell us more like if you have 100 components and you want to identify the component on the basis of granite:class or id so where you will specify these id's or classes in the JS file? so that it met their condition.

Avatar

Level 5

I want to run the js script whenever the component dialog box is called. but I want to make sure that it is the specified component

Avatar

Community Advisor

granite:class or id should be visible in your DOM elements. please try to troubleshoot it or paste some code here.

Avatar

Level 5

4.PNG5.PNG

here no id or class property is being generated for the dialog box...please have a look

Avatar

Community Advisor

put something unique like cmp-ing__geolocation and try searching it in the entire DOM. and try with granite:class only first.

Avatar

Correct answer by
Community Advisor

I would say use

id="component-name-${resource.path.hashCode}"


Arun Patidar

Avatar

Level 5

what should I write under ${resource.path.hashCode}" , like do I have to put values here put it as it is as ID.