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

Avatar

Avatar

davids23429739

Avatar

davids23429739

davids23429739

26-07-2017

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

susheel

Avatar

susheel

susheel

27-07-2017

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

Answers (9)

Answers (9)

Avatar

Avatar

davids23429739

Avatar

davids23429739

davids23429739

27-07-2017

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.

Avatar

Avatar

davids23429739

Avatar

davids23429739

davids23429739

27-07-2017

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

Avatar

susheel

Avatar

susheel

susheel

27-07-2017

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

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

Avatar

Avatar

davids23429739

Avatar

davids23429739

davids23429739

27-07-2017

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

Avatar

susheel

Avatar

susheel

susheel

27-07-2017

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

if yes then do you get some value or not?         

Avatar

Avatar

davids23429739

Avatar

davids23429739

davids23429739

27-07-2017

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

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K

Avatar

smacdonald2008

Total Posts

12.7K

Likes

1.4K

Correct Reply

2.3K
smacdonald2008

27-07-2017

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

Avatar

Avatar

Feike_Visser1

Employee

Avatar

Feike_Visser1

Employee

Feike_Visser1
Employee

26-07-2017

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

Avatar

Avatar

susheel

Avatar

susheel

susheel

26-07-2017

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>