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

HTL Syntax Error

  • July 1, 2022
  • 4 replies
  • 1524 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

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
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
    C
    Conrad59
    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?

      SantoshSai
      Community Advisor
      SantoshSaiCommunity AdvisorAccepted solution
      Community Advisor
      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
        Adobe Employee
        Mohit_KBansalAdobe Employee
        Adobe 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.

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



            Terms & ConditionsAccessibility statement

            Loading footer...