HTL value does not show in some attribute | Community
Skip to main content
R
ryuatnorcal
Level 3
September 14, 2017
Solved

HTL value does not show in some attribute

  • September 14, 2017
  • 4 replies
  • 1862 views

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

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 AnkurAhlawat-1

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'})

4 replies

AnkurAhlawat-1
AnkurAhlawat-1Accepted solution
Level 6
September 15, 2017

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'})

    R
    ryuatnorcalAuthor
    Level 3
    September 15, 2017

    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
    smacdonald2008
    Level 10
    September 15, 2017

    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
      Community Advisor
      Prince_ShivhareCommunity Advisor
      Community Advisor
      September 15, 2017

      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

        Terms & ConditionsAccessibility statement

        Loading footer...