Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

how to uniquely identify AEM component

Avatar

Level 4

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

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

Community 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 4

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 4

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

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

Avatar

Level 4

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