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