HTL Syntax Error | Community
Skip to main content
A
Ameen_Dev
New Participant
July 1, 2022
Solved

HTL Syntax Error

  • July 1, 2022
  • 4 replies
  • 1518 views

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!

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SantoshSai

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

4 replies

B_Sravan
B_Sravan
New Participant
July 1, 2022

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>



    SantoshSai
    SantoshSaiAccepted solution
    New Participant
    July 1, 2022

    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

    Santosh Sai
      Mohit_KBansal
      Mohit_KBansal
      Employee
      July 1, 2022

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

        C
        Conrad59
        New Participant
        July 1, 2022

        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?

          arunpatidar
          arunpatidar
          New Participant
          July 1, 2022
          <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
            Terms & ConditionsAccessibility statement

            Loading footer...