Input Transformer / UI Display Transformer

The Transformers enable you to reformat data so that it is human-readable on the UIs, yet API-accurate in the payload. Common use cases for the UI transformer include date or financial value formatting.

In the Transformer editor, can access the value you wish to reformat with this.val.

Request

For a request tab, the value returned in the Input Transformer Editor will reformat the data in the codeblock.

Response

For a response tab, the value returned in the UI Display Transformer Editor will populate the data in the UI.

Array UI Display Transformer

A common use case on Coast demos is to reformat data returned from an array, so it is human-readable format on the UI, yet still accurate in the response codeblock. This sounds like a job for the UI Display Transformer.

Let's checkout a quick example to see this in action. Assume the following response payload (this will look familiar, if you have explored our Chart Builder)

{
  "salesData": [
    {
      "metric1": 89,
      "metric2": 75,
      "date": "2023-01-01T00:00:00+00:00",
      "reportType": "10k"
    },
    {
      "metric1": 100,
      "metric2": 91,
      "date": "2023-02-01T00:00:00+00:00",
      "reportType": "10k"
    },
    {
      "metric1": 95,
      "metric2": 102,
      "date": "2023-03-01T00:00:00+00:00",
      "reportType": "10k"
    }
  ]
}

To optimize the end-user experience with such a payload, it makes sense to format the dates, as well as add some units to the metrics. Let's see how to reformat this data on the UI, while keeping it accurate in the response codeblock.

Make use of this.val, as well as the JS map function to format your data exactly how you want.

return this.val.map((i)=> {
  return {
    ...i,
    date: this.moment(i.date).format('MMMM Do, YYYY'),
    metric1: `${i.metric1}M USD`
  }
})

Now, on the Designer tab, in an Array Block, we can reference date as well as metric1 to populate Array block on the UI.

Hit Presentation Mode 👁️ to see our Array UI Transformer in action: