Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Returning Object in Sightly Javascript Use-API

B_Stockwell
Level 5
Level 5

I can't seem to return and use an object from my js use array. In the below example I'm trying to make a parameter list for use later in a java use-api call, however, the parameter array comes up empty back on the sightly end. Any idea what I'm doing wrong?

newsList.js:

"use strict"; use( function () { var params = []; params['limit'] = 0; params['page'] = 0; params['term'] = ""; params['articles'] = ""; params['alsoQuery'] = "false"; params['author'] = ""; params['contacts'] = ""; params['dateRange'] = "unlimited"; params['startDate'] = "0"; params['endDate'] = "TODAY"; params['hasVideo'] = "false"; params['tags'] = []; params['anyall'] = "any"; return { parameters: params }; });

Sightly code

<div  data-sly-use.newsList="newsList.js"> a: ${newsList.parameters['limit']} b: ${newsList.parameters.limit} len: ${newsList.parameters.length} </div>

Result

a: b: len: 0
1 Accepted Solution
leeasling
Correct answer by
Level 8
Level 8

For what you're doing you can easily switch your code to make it work with the JS API.

Try something like this:

use(function () { var params = {}; params.limit = 0; params.page = 0; params.term = ""; params.articles = ""; params.alsoQuery = true; params.author = ""; params.contacts = ""; params.dateRange = "unlimited"; params.startDate = "0"; params.endDate = "TODAY"; params.hasVideo = false; params.tags = []; params.anyall = "any"; return params; });

Assuming that your file is named "params.js" you can utilize as follows:

<div data-sly-use.params="params.js"> ${params.limit @ context='number'}<br /> ${params.dateRange} </div>

And so on

View solution in original post

0 Replies
smacdonald2008
Level 10
Level 10

See this community article that works with AEM, Java, and Slightly:

https://helpx.adobe.com/experience-manager/using/creating-sightly-component.html

In this article - we are returning String values.

public class HeroTextBean {
     
    /** The heading text. */
    private String headingText;
     
    /** The description. */
    private String description;
    /**
     * @return the headingText
     */
    public String getHeadingText() {
        return headingText;
    }
    /**
     * @param headingText the headingText to set
     */
    public void setHeadingText(String headingText) {
        this.headingText = headingText;
    }
    /**
     * @return the description
     */
    public String getDescription() {
        return description;
    }
    /**
     * @param description the description to set
     */
    public void setDescription(String description) {
        this.description = description;
    }

However - you can extend that and make the Java method return String[].

B_Stockwell
Level 5
Level 5

Thanks

I'd prefer to be able to do this in Javascript, but I'm beginning to see that the js Use-API has some limitations. Working with js objects seems like it should be fairly straightforward, but is this possibly one of the limitations of the JS use-API?

leeasling
Correct answer by
Level 8
Level 8

For what you're doing you can easily switch your code to make it work with the JS API.

Try something like this:

use(function () { var params = {}; params.limit = 0; params.page = 0; params.term = ""; params.articles = ""; params.alsoQuery = true; params.author = ""; params.contacts = ""; params.dateRange = "unlimited"; params.startDate = "0"; params.endDate = "TODAY"; params.hasVideo = false; params.tags = []; params.anyall = "any"; return params; });

Assuming that your file is named "params.js" you can utilize as follows:

<div data-sly-use.params="params.js"> ${params.limit @ context='number'}<br /> ${params.dateRange} </div>

And so on

B_Stockwell
Level 5
Level 5

Thanks, What I was hoping to do was keep objects separate so i could return params, otherObject1, otherObject2 etc. But I dont think this is possible. This solution works, so I think I'll just go with this and use multiple js use files so I can return and work with multiple objects.

leeasling
Level 8
Level 8

I don't know that i'm totally understanding what you mean when you say return multiple objects, but that too is very easy if my understanding is correct:

use(function () { var params = {}; params.limit = 0; params.page = 0; params.term = ""; params.articles = ""; params.alsoQuery = true; params.author = ""; params.contacts = ""; params.dateRange = "unlimited"; params.startDate = "0"; params.endDate = "TODAY"; params.hasVideo = false; params.tags = []; params.anyall = "any"; var otherObject1 = {}; otherObject1.test = "Test"; var otherObject2 = {}; otherObject2.anotherTest = "Another Test"; return { parameters: params, otherObject1: otherObject1, otherObject2: otherObject2 }; });
<div data-sly-use.params="params.js"> ${params.parameters.limit @ context='number'}<br /> ${params.parameters.dateRange} <hr /> ${params.otherObject1.test} <hr /> ${params.otherObject2.anotherTest} </div>
alexr21
Level 4
Level 4

This requires tightly coupling the Sightly code to the keys available in the json object. Is there any way to do this generically? I just need to dump out the entire json object within a script tag in the mark-up, without hard-coding the keys in the Sightly code.