How to access jcr resource property name using js

[vineel_k]

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 

[Himanshu_Singhal]

@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]

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

[BrianKasingli]

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]

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

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

[aanchal-sikka]

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?

[vineel_k]

hi @aanchal-sikka 

Tried that but i am getting error as undefined 

My code:

<section data-sly-use.model="com.project.core.models.demo"
id="test"
Text:"${model.textfield @ context='scriptString'}"// value="hello-world"
Description:${model.description}>
</section>

JS code:

(function ($, $document, gAuthor) {
 "use strict";   
	const article = document.querySelector('#test');
      var test=article.dataset.textfield
      console.log(test); //getting output as Undefined
    $document.on("dialog-ready", function(e) {

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

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

[Monendra_Singh]

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]

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

[arunpatidar]

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?

[vineel_k]

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);