Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to pass a variable (not hardcoded value) to a data-sly-use statement.

Avatar

Level 2

Hello Guys,

I've got an issue in which I'm unable to pass a variable to a data-sly-use.

This is a small snippet of the code I have.

<div data-sly-use.info="questions-and-answers.js"  data-sly-use.questions="${'LatestQuestions' @ maxLinks=info.maxLinks}" class="nc-questions-and-answers">
  <h2 class="nc-questions-and-answers__heading">
   ${info.title}

   </h2>

</div>

Basically the first data-sly-use (questions-and-answers.js) returns an object with several properties in which one of those (maxLinks) needs to be send to the second data-sly-use. The problem is that when I tried to get the variable in the java handler I'm always getting null.

String maxLinks = get("maxLinks", String.class);

The variables maxLinks is always null.

If instead of sending `info.maxLinks` I use a hardcoded value like a string or number, I do get the correct value in the Java handler but because the maxLinks property is dynamic then I need to send it like that.

Does anyone know how to proceed here?

Thank you.

1 Accepted Solution

Avatar

Correct answer by
Level 5

I checked Integer.class works fine for me. Not sure why its not working for you.

Once delete /var/classes and reload the page.

You can also try this:

var maxLinks = currentNode.hasProperty("maxLinks") ? currentNode.getProperty("maxLinks").getString() : "5";

Update js code to send String to backend java

In backend you can convert to Integer

View solution in original post

10 Replies

Avatar

Level 5

I am not sure if this will work. Can you try this way once.

<sly data-sly-use.info="questions-and-answers.js">

checking inifo max links: ${info.maxLinks}

    <sly data-sly-use.questions="${'LatestQuestions' @ maxLinks=info.maxLinks}" class="nc-questions-and-answers">

        <h2 class="nc-questions-and-answers__heading">

            ${info.title}

        </h2>

    </sly>

</sly>

Avatar

Employee

If you print out the value, what do you get?

Avatar

Level 10

Can you post all of your HTL Code so community can look at it.

Avatar

Level 2

I tried the solution susheel suggested but still I'm getting null.

This is the complete snippet:

HTML:

<div data-sly-use.info="nc-questions-and-answers.js"

        data-sly-use.questions="${'LatestQuestions' @ maxLinks=info.maxLinks}" class="nc-questions-and-answers">
       <h2 class="nc-questions-and-answers__heading">
             ${info.title}

        </h2>

       <ul class="nc-questions-and-answers__list" data-sly-list.question="${questions.latestQuestions}">
            <li class="nc-questions-and-answers__list-item">
                 <a href="${question.link}">
                       ${question.title}

                  </a>
            </li>
       </ul>
</div>

nc-questions-and-answers.js:

'use strict';

use([], function() {

   var title = properties.get("title", "");

   var showMore = currentNode.hasProperty("showmore") ? String(currentNode.getProperty("showmore")) : "";

   var maxLinks = currentNode.hasProperty("maxLinks") ? Number(currentNode.getProperty("maxLinks").getString()) : 5;

   return {

       title: title,

       showMore: showMore,

       maxLinks: maxLinks

  }

});

LatestQuestions:

public class LatestQuestions extends WCMUse {

   private List<Question> latestQuestions = new ArrayList<Question>();

   @Override
   public void activate() {

   try {

   // Reading properties from the Dialog
   ValueMap dialogProperties = getProperties();
   String categoryPath = dialogProperties.get("category", String.class);
   String[] tags = dialogProperties.get("tags", new String[0]);

    // Reading Parameter from slightly

    String maxLinks = get("maxLinks", String.class);

     //// maxLinks is always null!!!!

  } catch (Exception e) { }

  }

   /**
  * Getter of the sightly properties
  */
   public List<Question> getLatestQuestions() { return this.latestQuestions; }

}

Avatar

Level 5

Did you try to print the value ?
${info.maxLinks}

if yes then do you get some value or not?         

Avatar

Level 2

Yes the property info.maxLinks is fine, I could print it like you mentioned and I would be able to see it. maxLinks contains a number that comes from the dialog of the component.

The problems appears when trying to send it as a parameter to the java handler. I want to know if it is possible to send variables as parameters to java handlers.

Actually in my handler I can for example do the following:

getProperties.get("maxLinks", String.class);

If I do so the maxLinks property will be there not null BUT I want to retrieve it as a data-sly-use parameter because this java handler is a reusable component that several aem components use to get the latest questions and not all the components have this maxLinks property as part of the dialog properties.

Avatar

Level 5

You are passing a number and reading as string in wcmuse code

int maxLinks = get("maxLinks", Integer.class);

Avatar

Level 2

It's the same. Regardless of the type I want to adapt the property, it is still null.

Both get("maxLinks", Integer.class); and get("maxLinks", String.class); returns null. 

Avatar

Correct answer by
Level 5

I checked Integer.class works fine for me. Not sure why its not working for you.

Once delete /var/classes and reload the page.

You can also try this:

var maxLinks = currentNode.hasProperty("maxLinks") ? currentNode.getProperty("maxLinks").getString() : "5";

Update js code to send String to backend java

In backend you can convert to Integer

Avatar

Level 2

I changed the way I retrieve the value in the js rihno file based on what you proposed and now it works good!

Thank you very much susheel for keep up with me in this, I appreciate your help.