how to uniquely identify AEM component | Community
Skip to main content
R
rahul234dabas
New Participant
April 8, 2022
Solved

how to uniquely identify AEM component

  • April 8, 2022
  • 4 replies
  • 4819 views

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

Best answer by arunpatidar

I would say use

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

4 replies

arunpatidar
arunpatidarAccepted solution
New Participant
April 8, 2022

I would say use

id="component-name-${resource.path.hashCode}"
Arun Patidar
    R
    rahul234dabasAuthor
    New Participant
    April 11, 2022

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

      Prince_Shivhare
      Prince_Shivhare
      New Participant
      April 8, 2022

      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.

        R
        rahul234dabasAuthor
        New Participant
        April 8, 2022

        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
          Prince_Shivhare
          New Participant
          April 8, 2022

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

            DEBAL_DAS
            DEBAL_DAS
            New Participant
            April 8, 2022

            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.

              R
              rahul234dabasAuthor
              New Participant
              April 8, 2022

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

                Ravi_Pampana
                Ravi_Pampana
                New Participant
                April 8, 2022

                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

                  Terms & ConditionsAccessibility statement

                  Loading footer...