How to access jcr resource property name using js | Adobe Higher Education
Skip to main content
vineel_k
vineel_k
Level 2
December 28, 2022

How to access jcr resource property name using js

  • December 28, 2022
  • 4 respostas
  • 2856 Visualizações

I have a requirement that there is property value textField how to get that vale using JS

 

This is the java code to fetch the textField value :

 

public String test() {
final Optional<Resource> testResource = Optional.ofNullable(this.getCurrentResource().getParent()).map(Resource::getParent);
final ValueMap valueMap = testResource.get().getValueMap();
if(valueMap.containsKey("textField")) {
return valueMap.get("textField", String.class);
}
return StringUtils.EMPTY;
} 

 

I need same code in JS.

 

Please help me thanks in advance.

@arunpatidar @lukasz-m 

Este tópico foi fechado para respostas.

4 Respostas

Himanshu_Singhal
Community Advisor
Himanshu_SinghalCommunity Advisor
Community Advisor
December 28, 2022

@vineel_k Would like to get this value in client side JS or wants to write the same logic in server side JS (let's say at component level as a replacement of java logic)?
If you'd like to fetch the prop value in client side JS then you can add the value as data-attribute="${model.textLabel}" in component html and then get it in client JS. 


    vineel_k
    vineel_kAutor
    Level 2
    December 29, 2022

    Can you tell an example to get ${model.textLabel} in client JS 

      BrianKasingli
      Community Advisor and Adobe Champion
      BrianKasingliCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      December 29, 2022

      Once you obtain the data from your sling model as a getter method, you can store the value in the sightly HTL, HTML block. From there, your javascript can access the data. Click here to see an example of the code -> https://sourcedcode.com/blog/aem/with-htl-pass-data-from-aem-backend-to-javascript

        vineel_k
        vineel_kAutor
        Level 2
        December 29, 2022

        i tried the above but i am getting this error in web console

         Uncaught TypeError: Cannot read properties of null (reading 'dataset')

          aanchal-sikka
          Community Advisor
          aanchal-sikkaCommunity Advisor
          Community Advisor
          December 29, 2022

          Hello @vineel_k 

           

          The suggested approach on @briankasingli 's blog should work. Its a standard way of accessing data attr https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset 

           

          Can you please check, that the target element is being fetched correctly?

          Aanchal Sikka
            Monendra_Singh
            Monendra_Singh
            Level 3
            December 29, 2022

            Can you try this and see if it works?

            function getTextFieldValue() { // Get the parent resource of the current resource var parentResource = this.getCurrentResource().getParent(); // If the parent resource exists, get its parent resource if (parentResource) { var grandParentResource = parentResource.getParent(); // If the grandparent resource exists, get its value map if (grandParentResource) { var valueMap = grandParentResource.getValueMap(); // If the value map contains the "textField" property, return its value if (valueMap.containsKey("textField")) { return valueMap.get("textField", "string"); } } } // If the "textField" property is not found, return an empty string return ""; }

            Let mw know if this works for you.

             

            Thanks,

            Monendra

             

             

              vineel_k
              vineel_kAutor
              Level 2
              December 29, 2022

              I tried this getting this error Uncaught TypeError: this.getCurrentResource is not a function

                arunpatidar
                Community Advisor
                arunpatidarCommunity Advisor
                Community Advisor
                December 29, 2022

                Hi,

                At client side you cannot access sling resources. you need to pass as html attribute from HTL.

                 

                Can you explain your use case as well?

                Arun Patidar
                  vineel_k
                  vineel_kAutor
                  Level 2
                  December 29, 2022

                  Hi @arunpatidar 

                  my use case: 

                  there is 2 Components

                  1)textField

                  2)description

                  In text field dialog when author gives "hello-world" in textfield, In description component description field should be hide.

                  Here i fetched the  "hello-world" value using sling through the Resource and displayed in HTL.

                  <div data-sly-use.model="com.project.core.models.demo">
Text:${model.textfield} // value="hello-world"
Description:${model.description}
</div>

                  Now i need that "hello-world" value in JS 

                  My code: (not working)

                  (function ($, $document, gAuthor) {
 "use strict";   
    $document.on("dialog-ready", function(e) {

       if(textfield != 'hello-world'){
        $('input[name="./description"]').parents('.coral-Form-fieldwrapper').css("display","none"); 
       }

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

                   

                    Termos e condiçõesAccessibility statement

                    Loading footer...