Can I call sightly within Javascript?

[squid267]

Hi all,

I'm working on a popup component that lets lets the AEM Author input a integer to determine how long the popup should be active before it fades out. I'm able to return the integer in HTML using 

<p>Duration: ${comp.timeout} seconds</p>

But as soon as I call it Javascript

window.setTimeout(closePopup, ${comp.timeout});

It doesn't return the number. What's the correct way to do this?

[smacdonald2008]

Its the other way around - you can use JavaScript from Sightly: 

https://helpx.adobe.com/experience-manager/using/sightly_js.html

Hope this helps

[leeasling]

You certainly can, you just need to add context.  Try one of these.

window.setTimeout(closePopup, ${comp.timeout @ context='number'});

or

window.setTimeout(closePopup, ${comp.timeout @ context='scriptString'});

[kautuk_sahni · Accepted solution]

Hi 

Agreeing with Lee, we can call Sightly a.k.a HTL (HTML Template Language) from JavaScript.

For style and script contexts, it is mandatory to set a context. If the context isn't set, the expression shouldn't output anything. 

    <a href="#whatever" onclick="${myFunctionName @ context='scriptToken'}()">Link</a>
    <script>var ${myVarName @ context="scriptToken"}="Bar";</script>
    <script>var bar='${someText @ context="scriptString"}';</script>

    <!--/* Styles */-->
    <a href="#whatever" style="color: ${colorName @ context='styleToken'};">Link</a>
    <style>
        a.${className @ context="styleToken"} {
            font-family: '${fontFamily @ context="styleString"}', sans-serif;
            color: #${colorHashValue @ context="styleToken"};
            margin-${side @ context="styleToken"}: 1em; /* E.g. for bi-directional text */
        }

    </style>

Context Type

${properties.jcr:title @ context='html'}          <!--/* Use this in case you want to output HTML - Removes markup that may contain XSS risks */-->
${properties.jcr:title @ context='text'}          <!--/* Use this for simple HTML content - Encodes all HTML */-->
${properties.jcr:title @ context='elementName'}   <!--/* Allows only element names that are white-listed, outputs 'div' otherwise */-->
${properties.jcr:title @ context='attributeName'} <!--/* Outputs nothing if the value doesn't correspond to the HTML attribute name syntax - doesn't allow 'style' and 'on*' attributes */-->
${properties.jcr:title @ context='attribute'}     <!--/* Applies HTML attribute escaping */-->
${properties.jcr:title @ context='uri'}           <!--/* Outputs nothing if the value contains XSS risks */-->
${properties.jcr:title @ context='scriptToken'}   <!--/* Outputs nothing if the value doesn't correspond to the JavaScript token syntax */-->
${properties.jcr:title @ context='scriptString'}  <!--/* Applies JavaScript string escaping */-->
${properties.jcr:title @ context='scriptComment'} <!--/* Context for Javascript block comments. Outputs nothing if value is trying to break out of the comment context */-->
${properties.jcr:title @ context='scriptRegExp'}  <!--/* Applies JavaScript regular expression escaping */-->
${properties.jcr:title @ context='styleToken'}    <!--/* Outputs nothing if the value doesn't correspond to the CSS token syntax */-->
${properties.jcr:title @ context='styleString'}   <!--/* Applies CSS string escaping */-->
${properties.jcr:title @ context='styleComment'}  <!--/* Context for CSS comments. Outputs nothing if value is trying to break out of the comment context */-->
${properties.jcr:title @ context='comment'}       <!--/* Applies HTML comment escaping */-->
${properties.jcr:title @ context='number'}        <!--/* Outputs zero if the value is not a number */-->
${properties.jcr:title @ context='unsafe'}        <!--/* Use this at your own risk, this disables XSS protection completely */-->

Reference Articles:- 

Link:- https://github.com/Netcentric/aem-sightly-style-guide#3-expression-language

Link:- https://github.com/Adobe-Marketing-Cloud/sightly-spec/blob/master/SPECIFICATION.md#113-context-sensi...

I hope this would help you.

Thanks and Regards

Kautuk Sahni

[squid267]

These are all great answers! Thank you. I went with context solution. It was the easiest and quickest to implement.