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: