Formatter for Adding a Bulleted List of Linked Entity Names

Search Best Practices - Search Front-End
1

If you’re wanting to add a list of the names in an entity list field (for example, a list of Linked Ingredients on a Recipe card), you’ll need to use a formatter to extract an array of names from the linked entity objects. Follow the instructions below!

1. Add the below function to your static/js/formatters.js file

  static listNames(entityList) {
    if(!entityList) {
      return null;
    }
    let names = [];
    entityList.forEach(element => names.push(element.name));
    return names;
  }
}

2. Use the formatter in a ‘list’ section on your card.
listItems: Formatter.listNames(profile.c_ingredients),

The end result will look like the below:

image
image700×193 16.8 KB

2 Likes
2

In the line entityList.forEach(element => names.push(element.name)); could we swap out the .name in element.name for the API name of any field? For example I tried element.address and didn’t get results even though “address” is the proper API name.

3

No, unfortunately we only get the ID and Name of linked entities in Live API. There isn’t a way to access other attributes of a linked entity.

4

Hi All,

I am working on adding this functionality onto a card within an Answers experience. Can you confirm that the file path for the formatter file is answers-hitchhiker-theme/static/js/formatters.js? I’m trying to do this in a Sandbox account and do not see a formatter file anywhere else within my repo.

Reason I ask is because I’ve tried implementing the logic outlined in the post above within the answers-hitchhiker-theme/static/js/formatters.js and it was unsuccessful.

Thank you!
Austin

5

Hey Austin, try looking under static/js/formatters.js

6

You also need to override the theme to overwrite this file!

7

Hi All,
I’m facing at same issue with Austin - working with sandbox and could not find js directory under static directory. How could I add listname function?

Screen Shot 2020-12-14 at 4.56.46 PM
Screen Shot 2020-12-14 at 4.56.46 PM524×642 19.4 KB

Best,

8

Hi @Kaishi_Sakuma,

You will need to override the theme to add the formatter. You can do so from Tools → Jambo Commands → Override Theme → select file to override.

You will add the function to formatters-internal.js, then import the function into formatters.js. Once you complete these two steps, you can use the formatter on your card.

Sam

9

Hi All,

I have been trying to do this in a sandbox account and haven’t been able to get the formatter to work. When you add the function to formatters-internal.js and then import it into formatters.js, what is the exact syntax you should be using?

Thank you!