Expand my Community achievements bar.

SOLVED

HTL Syntax Error

Avatar

Level 4

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!

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

View solution in original post

5 Replies

Avatar

Community Advisor
<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



Arun Patidar

Avatar

Level 1

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?

Avatar

Correct answer by
Community Advisor

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

Avatar

Employee Advisor

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

Avatar

Community Advisor

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>