Formatter for Adding a Bulleted List of Call to Action Links

If you’re wanting to add a list of links from a custom field made up of a list of Call to Actions (for example, a list of ways to contact someone on a Professional card), you’ll need to use a formatter to extract an array of items from the list of Call to Actions. Follow the instructions below!

1. Override the theme to add a new formatter. When you override the theme, select formatters.js and 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;
  }

Since you’re now shadowing this file, just be careful in future theme upgrades to not overwrite this.

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:

<ul class="HitchhikerProfessionalStandard-list">
    {{#each card.listItems}}
    <li class="HitchhikerProfessionalStandard-listItem">{{{this}}}</li>
    {{/each}}
  </ul>

The end result will look like the below:

3 Likes

HI Lanre,

Thanks for a great post! Just to add on here - as of Theme 1.17 you can add new formatters by forking formatters-custom.js and defining it there.

Visit this post for more details:

Thanks!
Alyssa

Hi there,

I’m trying to add this formatter to my experience. I’m hoping you can help me out with the errors I’m seeing.

  1. I’ve added @Ldanmola 's code to my formatters-custom.js file but am seeing the error below upon publishing. What should I be doing differently?

  1. Since this is a non-English experience, I’ve additionally followed the steps mentioned here.

I appreciate your help!

Max

Hi Max,

Great question. To resolve this, change “static” to “export function”. With the file formatters-custom.js it is expecting you to export a function and then we will automatically include all formatters from formatters-custom.js by default.

Alyssa

1 Like

Thanks @Alyssa_Hubbard ! This worked perfectly.