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:

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

Copy to clipboard
{
    "_card": {
        type: “…”,
        title: “…”
    },
    "items": [
        ...
    ]
}
Expand (9 lines)

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.

Copy to clipboard
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);
Expand (28 lines)

When rendered, the above definition produces the following Card: