Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

How to pass dialog property value to AJAX request in sightly JAVA Script use API.?

Avatar

Level 5

Am using server-side JavaScript USE API to read the dialog properties like below

use(function () {

var myproperty = properties.get("renderpagetype");

return { callajaxvariable: myproperty,

};

});

How to pass/get this dialog property value to AJAX request in sightly.?

(i.e. i need the dialog value which has been retrieved by JS USE API into a page level Java script function call/usage)

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You can use variable value coming from JS Use api to pass to the script in sightly like below

// Update the js filename as required

<div data-sly-use.component="useapi.js">

//Variable defined in USE API

    <h1>${component.title}</h1>

// scriptString is required to read the value as javascript string in sightly

    <script>

        var titleVar = '${component.title @ context="scriptString"}';

       // Pass the value to the ajax function

   </script>

</div>

Other approach is, you can do it directly in Sightly if the dialog value is not modified in USE API like below

<script>

        var titleVar = '${properties.title @ context="scriptString"}';

       // Pass the value to the ajax function

</script>

Hope this helps...

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

You can use variable value coming from JS Use api to pass to the script in sightly like below

// Update the js filename as required

<div data-sly-use.component="useapi.js">

//Variable defined in USE API

    <h1>${component.title}</h1>

// scriptString is required to read the value as javascript string in sightly

    <script>

        var titleVar = '${component.title @ context="scriptString"}';

       // Pass the value to the ajax function

   </script>

</div>

Other approach is, you can do it directly in Sightly if the dialog value is not modified in USE API like below

<script>

        var titleVar = '${properties.title @ context="scriptString"}';

       // Pass the value to the ajax function

</script>

Hope this helps...

Avatar

Level 10

Since js use API executes on the server and your javascript ajax will executes on the browser.

You would need a way to pass these values to the front end so that javascript can read it.

I would not encourage using script tags inside HTML, it blocks the page parsing. You either use custom data attributes or hidden input fields to store these values in HTML

Also, I am not sure why you are using JS Use API to get dialog fields. Use API is slower as compare to java sling model or expression in sightly as it executes twice (JS Rhino -> Java -> Compile). See if you can avoid it.