Custom Formatters | Yext Hitchhikers Platform

Format Boolean Value to Display on Card

In order to “transform” the boolean field, we recommend using custom (yet simple) JS formatter in your formatters.js file. In order to add this formatter, you’ll want to go to Jambo Commands -> Override Theme -> static > js > formatters.js.

Here, you can add the following code within the file:

static acceptingStatus(profile) {
  if (profile.acceptingNewPatients) {
    return 'Accepting New Patients';
  } 
  return '';
}

This formatter is essentially translating the “True” boolean value to “Accepting New Patients”. From here, you’ll want to update the details mapping within your card’s compnent.js file. Please update it such that it transforms the data using your JS formatter:

details: Formatter.acceptingStatus(profile),

Adding a Bulleted List of Call to Action Links

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

static listCTA(list) {
  if(!list) {
    return null; 
  } 
  let names = [];
    list.forEach(element => names.push(<a href="${Formatter.generateCTAFieldTypeLink(element)}">${element.label}</a>));
    return names; 
}

2. Use the formatter in a ‘list’ section on your card

listItems: Formatter.listCTA(profile.c_contactLinks)

3. Update the handlebars template to display the HTML To allow the HTML to display on the page, we need to ensure the Handlebars template treats it correctly. We do this by ensuring the element is surrounded by three braces {{{ }}}

Specifically for the listItems field ensure, it looks like the following:

{{#each card.listItems}}
{{{this}}}
{{/each}}

Adding a Bulleted List of Linked Entity Names

If you’re wanting to add a list of the names in an entity relationship 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 The syntax of the formatter will depend on the version of the theme you’re on. Take a look at the formatters in the theme/static/js/formatters-internal.js file if you are unsure.

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

Newer themes will use this format:

  export function 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),

Adding Reopen Dates & Temporary Closures

In order to set this up, follow these steps:

1. Add the below to your static/js/formatter.js file

static reopenStatus(profile) { 
  if (profile.hours && profile.hours.reopenDate) {
    return 'This location is temporarily closed'; 
  } 
  else { 
    return 'This location is operating under normal business hours'; 
  } 
}

2. Add the below to you card mappings JS file

subtitle: Formatter.reopenStatus(profile),

Back

< Custom Data Formatting

Overview >

Feedback

<% elem.innerText %>