Custom Data Transform | Yext Hitchhikers Platform

Sometimes, you might want to alter the data recieved by the Search API before it’s passed along to the template for rendering. For example, say you’ve set a direct answer on the phone number field. Before the raw phone number is passed to the template, you’ll likely want to format it to add parenthesis and dashes.

If you want to mutate the data that’s provided to the render/template before it gets rendered, you can use the transformData hook.


All properties and values that you return from transformData will be accessible from templates.

ANSWERS.addComponent('SearchBar', {
  container: '.search-container',
  transformData: (data) => {
    // Extend/overide the data object
    return Object.assign({}, data, {
      title: data.title.toLowerCase()


Here’s an example of using a custom data transform for the Direct Answer component .



To start, our DirectAnswer component returns phone numbers that look like this:

Direct Answer Before Formatting

First, we’ll create a function that formats the DirectAnswer value for phone number, keying off of the fieldType:

function formatDirectAnswer(fieldName, fieldType, value) {

  //adapted from
  if (fieldType == "phone") {
    return value
      .replace(/\D+/g, "")
      .replace(/(\d{1})(\d{3})(\d{3})(\d{4})/, "$1 ($2) $3-$4");
  return value;

Next, in the DirectAnswer component, we’ll call said function within transformData:

this.addComponent('DirectAnswer', {
    container: '.direct-answer-container',   
    transformData: (data) => {
        //data has fieldName, fieldType, value
        return {
            answer: {
                value: formatDirectAnswer(data.answer.fieldName, data.answer.fieldType, data.answer.value)

Since transformData is called before the data is passed to the template, it’ll format the phone number as stipulated. Now, when phone number is returned, it’ll look like this:

Direct Answer Before Formatting