Formatter for Adding a Bulleted List of Linked Entity Names

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:

2 Likes

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.

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.

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

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

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

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?

Best,

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

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!