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:
{
"_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:
