Can't extract Sling model values in Sightly

Forum|Forum|2 years ago
August 11, 2023
2 replies
1024 views

Hi All,

I am having an issue with extracting a sling model variable in Sightly. Here is the code:

<sly data-sly-use.utilModel="mysite.UtilModel"/>
<div class="image-title" style="background-image: url('${utilModel.imageRef}');">

=== Output ===
<div class="image-title" style="background-image: url('');">

But if I do the following, I will get the value of the variable:

<sly data-sly-use.utilModel="mysite.UtilModel"/>
<div>${utilModel.imageRef}</div>

=== Output ===

<div>/content/dam/camera2-3.jpg</div>

I tested a few cases, it looks like the `style=...` has an impact on it. Can someone explain how to extract a value within inline style?

Thanks!

-kt

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by Mahedi_Sabuj

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

<!--/* 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>

<sly data-sly-use.utilModel="mysite.UtilModel"/>
<div style="background-image: url(${utilModel.imageRef @ context= 'styleString' });"></div> <!-- You can use text as context also -->

Reference: https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#113-context-sensitive

Sudheer_Sundalam

New Participant

@kevin_gta , As @mahedi_sabuj mentioned it is required to set context for Style and Script tokens as XSS is implicit in HTL/Sightly code.

Please have this HTL/Sightly style guide handy for future reference: https://www.netcentric.biz/insights/2015/08/aem-sightly-style-guide

Mahedi_SabujAccepted solution

New Participant

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

<!--/* 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>

<sly data-sly-use.utilModel="mysite.UtilModel"/>
<div style="background-image: url(${utilModel.imageRef @ context= 'styleString' });"></div> <!-- You can use text as context also -->

Reference: https://github.com/adobe/htl-spec/blob/master/SPECIFICATION.md#113-context-sensitive

Mahedi Sabuj