How to check for undefined variable property in HTL (AEM)?

Newbie to AEM here. Say I have:


I do not wish to have data-text to return a "undefined" string if it is undefined. I tried using the logical operator and it didn't work..

     data-text="${myVariable.someProperty ? myVariable.someProperty : ''}"

I supposed that myVariable.someProperty returns undefined instead of a boolean value. Any ideas how I can check for undefined in HTL (or am I doing something completely wrong)?

3 answers

  • answered 2018-02-13 02:52 iusting

    According to the HTL documentation

    ... operators are typically used with Boolean values, however, like in JavaScript, they actually return the value of one of the specified operands, so when used with non-Boolean values, they may return a non-Boolean value

    If a value can be converted to false, the value is so-called falsy. Values that can be converted to false are: undefined variables, null values, the number zero, and empty strings.

    Conforming to it, data-sly-test="${myVariable.someProperty == true}" should do the job.

  • answered 2018-02-13 02:52 Vlad

    HTL will not render anything for undefined values. Assuming an JS use-object:


    use(function () {
        return {
            test: undefined

    and an HTL script:

    <div data-sly-use.logic="logic.js" data-text="${logic.test}"></div>

    the output will be:


    The attribute is stripped as it is falsy (see attributes detailed examples). If you want to keep the attribute you might want to modify the HTL expression to ${logic.test || true}.

    If you modify your use-object to return an 'undefined' string:

    use(function () {
        return {
            test: 'undefined'

    then you get the following output:

    <div data-text="undefined"></div>

    In this case you might want to modify your expression to test for the 'undefined' string: ${logic.test == 'undefined' ? '': logic.test}. Again, you can keep the attribute by replacing '' with true.

  • answered 2018-02-13 02:52 Jens

    Besides the other provided solutions there is another way to achieve something like this, even though it might seem a bit counter intuitive and verbose:

    <!-- Only show this div if "someProperty" is set -->
    <div data-text="${myVariable.someProperty}" 
    <!-- Show alternative div if "someProperty" is not set -->
    <div data-text="No value defined" data-sly-test="!hasValue">

    The code above is basically a if - else statement. Only one of the div elements will be displayed. Which one depends on somePropertybeing set or not.

    Note that the result of data-sly-test is stored in hasValue so that test does not have to be repeated for the second div.