HTL value does not show in some attribute

[ryuatnorcal]

Hello Community!

I have noticed some HTL glitch while developing with JS-API

For some reason, the HTL variable does not show in in-text-style.

in my html I have

When I show in browser, line 02's  ${subBanner.imgPath} is showing correct path .

However, line 03 inside of style attribute does not show anything.

I also noticed that inside of <script></script> and <style></style>behaves the same way.

Is there any alternative way to change background depends on user's select?

Thanks !

Ryu

[AnkurAhlawat · Accepted solution]

ryuatnorcal

This is the default behaviour of HTL( formely know as sightly) as it provide xss protection and you can't use its method inside script or style directly. In order to access them you need to add respective context for example in case of url:-

url(${subBanner.imgPath @ context = 'uri'})

[ryuatnorcal]

Hello Ankur!

the answer helped me a lot!

I have one more question tho

at the context, Is there context string (this case uri) table and I need to pick one or I can add whatever string in context ? like @ context='foobar' ?

Thanks!

Ryu

[smacdonald2008]

Also - instead of using JS API - its much better to use HTL and Sling Models -- see this article -- Creating a custom Touch UI Grid Component for Adobe Experience Manager

Notice how you can inject values using Sling Models and @Inject annotation. Much better than JS API!

[Prince_Shivhare]

Hi,

Agree with Ankur. also if your are using js concept better to go with sling models as scott suggested.

Additionally please check the below link which will help you to understand about HTL conditions.

htl-spec/SPECIFICATION.md at master · Adobe-Marketing-Cloud/htl-spec · GitHub:

Please check: Available Expression Options

Also check this for different HTL conditions: Creating an Experience Manager Responsive Banner Component

style="background-color:${properties.bgcolor @ context='styleToken'}"

style="background-image:url(${properties.bannerImage @context='html'});"

style="font-family: ${fontFamily @ context="styleString"};"

For style and script contexts, it is mandatory to set a context. If the context isn't set, the expression shouldn't output anything. To protect against cross-site scripting (XSS) vulnerabilities, HTL automatically recognises the context within which an output string is to be displayed within the final HTML output, and escapes that string appropriately. It is also possible to override the automatic display context handling with the context option.

Hope this will help you!!

Regards,
Prince