0

Here is a piece of code in the HTL file of a component:

<p id="info" data-sly-use.info="info-text.js">
    ${info.text}
</p>

and this is the info-text.js

use(function () {

    // TODO: change currentStyle to wcm.currentStyle

    var CONST = {
        PROP_INFO_TEXT: "infoText",
        PROP_DEFAULT_TEXT: "Enter information text here"
    }

    var info = {};

    // The actual title content
    info.text = granite.resource.properties[CONST.PROP_INFO_TEXT]
        || CONST.PROP_DEFAULT_TEXT


    return info;
});

PROP_DEFAULT_TEXT is the default text which shows up on the page when the infoText property is not authored yet. I am looking to somehow provide style to this default text "Enter information text here". I tried using 

PROP_DEFAULT_TEXT: "<p style='default-text'>Enter information text here</p>"

but on the page it appears like simple text as below:

enter image description here

I am not sure if I have use HTL Context to make it work and I try a few things but it won't work. So, I don't know what exactly should I do to make it work.

Thanks in advance

Jens
  • 20,533
  • 11
  • 60
  • 86
user972418
  • 817
  • 3
  • 25
  • 58
  • You’re looking for @context=‘html’ – Ahmed Musallam Apr 18 '18 at 15:15
  • @AhmedMusallam thank you for response. Yes, I tried it like this ${info.text @ context='html'} meanwhile setting the default string as PROP_DEFAULT_TEXT: "

    Enter information text here

    " but the text won't even show up. I am definitely doing something wrong here.     – user972418 Apr 18 '18 at 15:39
  • I have just tried it on my AEM 6.3 instance. and it works as expected. you can use this REPL: https://github.com/Adobe-Marketing-Cloud/aem-htl-repl for quick testing. – Ahmed Musallam Apr 18 '18 at 17:26
  • It's working. My bad. Instead of p class I was using p style. – user972418 Apr 18 '18 at 18:04

1 Answers1

1

First style="default-text" is not correct CSS, please use correct CSS rules with style attribute.

Second, when trying to render HTML via HTL expression, you must set the display context to html:

${info.text @context='html'}

Note: use github.com/Adobe-Marketing-Cloud/aem-htl-repl for quick HTL testing.

Ahmed Musallam
  • 9,523
  • 4
  • 27
  • 47