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 static > js > formatters-custom.js file.
Here, you can add the following code within the file:
export function 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-custom.js file
export function 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-custom.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.
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/formatters-custom.js file
export function 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),