status-list

The status-list Card template returns a simple, scrollable list of items.

An example of this template is available in the Postman sample collection:

Run in Postman

To utilize this Card template, connectors must return data in the following format:

{
    "_card": {
        type: “…”,
        title: “…”
    },
    "items": [
        ...
    ]
}

The data specification for this template is as follows:

type
Must be _status-list_ - this defines that the Universal Card Template status-list should be used `string`
title
Title of the Card `string`
items
Array of item objects `array`

Lists of items must be returned in an array called items[]. Each item in the array must have the following properties:

id
A unique value identifying the item `string`
title
Title of the item `string`

Items may optionally include the following properties (which will only be displayed if present):

description
Additional description of the item. Can contain HTML `string`
date
The current date in the UTC time zone, formatted in ISO 8601 `date`
statusText
Additional information shown to the right of the date `string`
link
URL that the item links to `string`
thumbnail
URL of an image `string`
imageIsAvatar
When true, the thumbnail will display with round borders `boolean`
value
A value to be shown as a badge (when thumbnail is provided) `string`
color
The color for the value badge (if shown) `string`
Accepts one of the following options: _red_, _yellow_, _green_, _blue_

Example

The following script generates a Card using the status-list template from static JSON data.

To test this example, create a new Postman GET request to https://postman-echo.com/get, paste the script provided into the Tests tab and click Send. The rendered Card can be viewed in the Visualize tab of the response pane.

To learn how to use Postman request responses with Universal Card Templates, refer to the guide Build a new connector with Postman.

var model = {
    _card: {
        title: "My Tasks",
        type: "status-list"
    },
    link: "https://example.com/all-tasks/",
    "items": [
        {
            id: "1",
            title: "Job Interview Isabell Simonis",
            date: "2020-04-02T13:07:12.000Z"
        },
        {
            id: "2",
            title: "Service Status August",
            date: "2020-04-02T15:11:21.000Z"
        },
        {
            id: "3",
            title: "Budget Planning 2020",
            date: "2020-04-09T12:42:24.000Z"
        }
    ]
};

var template = `<script id="loader" src="https://components.adenin.com/components/at-card-preview/loader.js"></script>`;

pm.visualizer.set(template, model);

When rendered, the above definition produces the following Card:

My Tasks Card

Was this article helpful?

Last updated: 04/21/2020