HTL Syntax Error

[Ameen_Dev]

Actually, I am struggling to implement if condition logic in a component. When I execute the below syntax, it is not working.

<a href="#" class="${properties.modalBehavior == 'sideOverlay' ? 'side-overlay-link' : ''} ${properties.modalBehavior == 'sideOverlayTable' ? 'side-overlay-link' : ''} ${properties.modalBehavior == 'fullOverlay' ? 'overlay-link' : ''}">
${properties.ctaText}
 </a>

I don't know where I was wrong. Kindly help!

[arunpatidar]

<a href="#"
   class="${properties.modalBehavior == 'sideOverlay' ? 'side-overlay-link' : ''} ${properties.modalBehavior == 'sideOverlayTable' ? ' side-overlay-link' : ''} ${properties.modalBehavior == 'fullOverlay' ? ' overlay-link' : ''}"
>${properties.ctaText}</a>

I tried this, looks fine for me

[Conrad59]

I'm just an HTL beginner myself, but it looks like you've inserted ["}]'s where they don't belong. In your code snippet 

'side-overlay-link' : "}

can you explain what the "} is there for?

[SantoshSai · Accepted solution]

Hi @Ameen_Dev ,

Try this

<a href="#" class="${properties.modalBehavior == 'sideOverlay' ? 'side-overlay-link' : '' || properties.modalBehavior == 'sideOverlayTable' ? 'side-overlay-link' : '' || properties.modalBehavior == 'fullOverlay' ? 'overlay-link' : ''}">
        ${properties.ctaText}
</a>

However, I would implement Sling Model - as it is recommended to segregate markup and business logic.

Sling Model

@Inject
private String modalBehavior;

public String getCSSClass() {
    if (modalBehavior.equalsIgnoreCase("sideOverlay")) {
        return "side-overlay-link";
    } else if (modalBehavior.equalsIgnoreCase("sideOverlayTable")) {
        return "side-overlay-link";
    } else if (modalBehavior.equalsIgnoreCase("fullOverlay")) {
        return "overlay-link";
    }
    return StringUtils.EMPTY;
}

HTL

<a href="#" class="${model.CSSClass}">
    ${properties.ctaText}
</a>

Hope that helps!

Regards,

Santosh

[Mohit_KBansal]

I agree, a sling model should be used to handle logic, and HTL should be used for rendering the compiled data from the model.

[B_Sravan]

Hi @Ameen_Dev, 

As @SantoshSai said, I would also suggest to use a sling model to retrieve the value. I also recommend you to use "data-sly-attribute.class" while reading dynamic class values so as to – not to leave class empty when nothing is authored.

<a href="#" data-sly-attribute.class="${model.CSSClass}">
    ${properties.ctaText}
</a>