Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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

0 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

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

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>