Custom Formatters in Answers

Search
1

When I use a date field in Answers, they are currently formatted as ‘yyyy-mm-dd’. Is there a formatter in the HitchhikerJS library for dates and what’s the flexibility here? I see a list of formatters in this unit, but not one for dates.

2

Hi Kristy - you’ll likely need to create your own formatter here, we don’t have any additional date formatters built in. What formatting are you hoping to accomplish?

3

I’m looking for a format with the month first since that’s how we usually read it, something like ‘mm/dd/yyyy’ or with the month spelled out like June 5, 2020. How would I create my own formatter?

4

Hey Amani! I also wanted to follow up here because I think I need a custom formatter as well. In my case, I’d like to customize the phone formatter from (732) 203-9160 → 732.203.9160.

It looks like the formatter that parses phone numbers is not accessible to me? It’s imported from something called libphonenumber-js (which I can’t find to edit!).

image
image848×551 54.9 KB

5

Hi Jessie - you don’t need to use that library in order to create your own custom formatter! You can just add a function to the formatters.js file that you then use in your data mappings. I’d recommend playing around in a CodePen to determine how to construct your formatter.

6

Hi @jyorke,

I am following up with a solution for your desired phone formatter. To accomplish this, you’ll need to fork a card and add a custom formatter.

Here are the three steps:

Step 1: static > js > formatters-custom.js

You will place the new phone number js formatter into the static > js > formatters-custom.js file. This formatter breaks down the entity’s phone number and splits the various substrings with a . in between the desired digit intervals. It also has a null check for blank phone values.

Let’s call the function phoneDisplaySpecial:

export function phoneDisplaySpecial(profile, key = 'mainPhone') {
  if (!profile[key]) {
   return null;
  }
  let num = profile[key];
    num = num.replace('+1', '');
    num = num.substring(0,3) + "." + num.substring(3,6) + "." + num.substring(6,10);
  return `${num}`;
}

image
image2474×1366 129 KB

Step 2: Update Fomatter within Forked Card

Lastly, make sure your forked card is now referencing the new function. Your phone card mapping should call your new formatter:

phone: Formatter.phoneDisplaySpecial(profile)

And your end result should look like this!

image
image1028×530 68.9 KB

Best,
Sam

7

Thank you so much Sam!!!