how to uniquely identify AEM component | Community
Skip to main content
rahul234dabas
Level 4
Apr 8, 2022 3:51 AM UTC
Solved

how to uniquely identify AEM component

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

arunpatidar
arunpatidarAccepted solution
New Participant
Apr 8, 2022 10:15 AM UTC

I would say use

id="component-name-${resource.path.hashCode}"
Arun Patidar
View reply

10 replies

arunpatidar
arunpatidarAccepted solution
New Participant
Apr 8, 2022 10:15 AM UTC

I would say use

id="component-name-${resource.path.hashCode}"
Translate
Arun Patidar
    rahul234dabasAuthor
    Level 4
    Apr 11, 2022 5:06 AM UTC

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

    Translate
      Prince_Shivhare
      Prince_Shivhare
      New Participant
      Apr 8, 2022 4:49 AM UTC

      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.

      Translate
        rahul234dabasAuthor
        Level 4
        Apr 8, 2022 4:52 AM UTC

        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

        Translate
          Prince_Shivhare
          Prince_Shivhare
          New Participant
          Apr 8, 2022 5:03 AM UTC

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

          Translate
            DEBAL_DAS
            DEBAL_DAS
            New Participant
            Apr 8, 2022 4:29 AM UTC

            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.

            Translate
              rahul234dabasAuthor
              Level 4
              Apr 8, 2022 4:53 AM UTC

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

              Translate
                Ravi_Pampana
                Ravi_Pampana
                New Participant
                Apr 8, 2022 4:08 AM UTC

                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-data-for-select/td-p/226122

                Translate
                  Terms & ConditionsAccessibility statement

                  Loading footer...