Conditional for subtitle or content on a card

[Lily_Wang]

Hi Team,

I know there are ways to conditionally set up CTAs, but is there also a way to apply this logic to a subtitle or specific content on a card? I’m trying to add a conditional for the details attribute in my Resources entity card, where the details will only show if the entity is labeled as a specific resource type, which is a custom field I have created in the Knowledge Graph. However, this custom field does not use boolean true/false logic, it’s a structured as a single-select field and allows me to select Blog, Podcast, Webinar, etc. as the resource type. Is there a way to set up a conditional in the handlebars file without the boolean logic? For example, only showing the description for Event and Webinar resource types? Any insights would be greatly appreciated, thank you!

Best,
Lily

[DJ_Corbett]

Hi Lily,

Yes, you can apply conditional logic to any content you’d like to surface on a card! As an example, here is a walkthrough of making the Description field on a custom “Resource” entity only visible when a single-option select field, called Resource Type, has a value of “Webinar”.

1. Create a boolean property in the component.js file that is only true when the desired Resource Type is selected. In this case, the boolean should only be true when the value is “Webinar”.

isWebinar: (profile.c_resourceType === 'Webinar') ? true : false,

2. Add conditional logic to the handlebars file based on the value of this boolean so the desired field only appears on the card when isWebinar evaluates to true. In the case of this example, I’ve mapped details to the field profile.description which is the field I’d like to conditionally show. To do this, I will wrap the div which contains {{card.details}} in an if statement that checks the isWebinar boolean.

  {{#if card.isWebinar}}
    <div class="HitchhikerStandard-detailsText js-HitchhikerCard-detailsText{{#if showExcessDetailsToggle}} js-hidden{{/if}}">
      {{card.details}}
    </div>
  {{/if}}

Now, both resources in the screenshots below have descriptions, but only the Webinar entity actually shows that description on the card.

Let me know if you have any questions!
DJ

[Lily_Wang]

Thank you so much!! This is really helpful.