How to use conditional placeholder images in Answers

[Max_Wolter]

Hi community,

For a recent Answers experience, I needed to include headshots on my entities’ result cards. The challenge was that some of the entities in my Knowledge Graph were missing headshot images:

To add to the challenge, I needed a different placeholder image depending on the value of an unrelated field - in my case Gender.

Here is the logic I wanted to achieve:

• If the Headshot field is populated, use that image.

• If the Headshot field is empty and Gender is set to Female, use a specific placeholder image.

• Otherwise, fall back to a different placeholder image.

→ Learn more about nullchecking here.

To achieve my desired result, I added the following code to my forked card:

return {
      title: profile.name, // The header text of the card
      subtitle: profile.c_area, // The sub-header text of the card
      image: profile.headshot ? Formatter.image(profile.headshot).url : (profile.gender === 'Female' ? 'https://a.mktgcdn.com/p-sandbox/y0iJHYFeCERihQg0qv7j88TBeEnpHq-v_BLyHiDXOb8/142x200.png' : 'https://a.mktgcdn.com/p-sandbox/6DD2AHZA1kbe8M9ZQGW_JOwXFyWNnRTMDJXIGxvQK-4/321x450.jpg'),
      ...
      }

Here is the result:

You can use this same conditional logic to populate any kind of field. Hope this helps someone

[DJ_Corbett]

Thanks for sharing this with the community, Max! This is not the first time a situation requiring this sort of customization has come up, so I know it will be a really helpful reference for others going forward.

DJ