how to uniquely identify AEM component

[rahul234dabas]

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

[Ravi_Pampana]

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-...

[DEBAL_DAS]

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.

[rahul234dabas]

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

[Prince_Shivhare]

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.

[rahul234dabas]

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

[Prince_Shivhare]

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

[rahul234dabas]

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

[Prince_Shivhare]

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

[arunpatidar · Accepted solution]

I would say use

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

[rahul234dabas]

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