Search code examples
aemhtl

AEM 6.1, HTL:: Unable to apply style to a piece of text

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

Solution

  • 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.