How to use status mapped from transformer in list view?

App Building
,
1

Given a status code returned from an API query, I can't seem to get a mapped status field to display correctly in my list view. I seem to be missing how to connect the values from my query to the transformer being used.

I tried following the steps here (albeit that was mapping for a tag in table) to no avail.

I also tried using a query transformer to include the formatting options directly into the query data, but that resulted in a warning about duplicate keys (understandable as the code field would indeed have multiple duplicate values.

My transformer:

return [
  {
    code: "SUCCESS",    
    label: "Deployed",
    color: "Green",
    icon:  "/icon:bold/interface-validation-check-circle" 
  },
  {
    code: "FAILURE",
    label: "Failed",
    color: "Red",
    icon: "/icon:bold/computer-desktop-delete-alternate"
  },
  { 
    code: "OTHER",
    label: "Pending",
    color: "Orange",
    icon:  "/icon:bold/interface-time-reset" 
  }
];

My query data:

[
  {
    "deploymentItemId": "123456",
    "currentVersion": {
      "id": "123456",
      "label": "15cd40035",
      "version_ts": "2019-01-01T00:00:00Z"
    },
    "status": {
      "code": "SUCCESS"
    }
  },
  {
    "deploymentItemId": "234567",
    "currentVersion": {
      "id": "345678",
      "label": "6d1e8e7cd",
      "version_ts": "2019-01-01T00:00:00Z"
    },
    "status": {
      "code": "FAILURE",
    }
  },
  {
    "deploymentItemId": "345678",
    "currentVersion": {
      "id": "567890",
      "label": "712a82887",
      "version_ts": "2019-01-01T00:00:00Z"
    },
    "status": {
      "code": "SUCCESS"
  },
  {
    "deploymentItemId": "456789",
    "currentVersion": {
      "id": "789012",
      "label": "508d0e69c",
      "version_ts": "2019-01-01T00:00:00Z"
    },
    "status": {
      "code": "SUCCESS"
    }
  }
]

The field on the left is displaying the value from the query transformer as a text field and the field on the right is the status using the normal transformer.

image
image1514×992 94.2 KB

According to the http headers, we're running self-hosted 3.6.16-undefined (Build undefined) .

I appreciate your help!

3

Hello @John_Burbridge!

I just checked the post you linked to and I believe they left out a fair bit of details which could explain things :sweat_smile:

So you have an array of objects being returned from your query, I believe you will want to, in the transformer, iterate over these objects, using something such as a loop or a .map function, and use Javascript to match the status.code from your query data to the display properties that you currently have in that code snippet that is currently in your transformer.

There are many approaches to this but off the top of my head I would take the code block in your transformer and set the 'code' property to be a key for the matching and the value can remain the object so it would look like this for each of the three possibilities
SUCCESS:{ code: "SUCCESS", label: "Deployed", color: "Green", icon: "/icon:bold/interface-validation-check-circle" }

along wit the same for the other possible status codes.

With this key-value mapping object variable called something like DISPLAY
and then you would iterate through the data, match the key from the query response with they key in the DISPLAY object and then take the value it references and plug that into the list view.

 const displayData = query1.data.map((item) => {
    return DISPLAY[item.status.code]
})

return displayData

Which should then give you an array where the query data has been replaced with the display data that matches its status and is then outputted by the transformer.

I would recommend using a tool like chatGPT to help with the Javascript writing.

Sorry if this was confusing, it is definitely possible but it depends on if you are having the transformer run as an on success event from the query or triggered separately, I am guessing you also want to display the query data results so having this transformer be separate an not mutate the query data is probably the better option.

Hope this helps clarify the steps!