cards
Description
Optional. An array of objects containing the cards data
Usage
cards?: [
{
id?: string | number,
label?: string,
description?: string,
progress?: number,
start_date?: Date,
end_date?: Date,
attached?: [
id: string | number,
url?: string,
previewURL?: string,
coverURL?: string,
name?: string,
isCover?: boolean
],
color?: string,
users?: array,
priority?: string | number,
css?: string,
[custom_key: string]?: any
},
{...} // other cards data
];
Parameters
For each card you can specify the following parameters (data):
id
- (optional) a card ID. It is used for managing the card via the corresponding methodslabel
- (optional) a card label. It is displayed in the Label fielddescription
- (optional)a card description. It is displayed in the Description fieldprogress
- (optional) a progress bar value. You can specify the value in the range from 0 to 100 points. It is displayed in the Progress bar fieldstart_date
- (optional) a start date value. It is displayed in the Start date fieldend_date
- (optional) an end date value. It is displayed in the End date fieldattached
- (optional) an array with data of the attached file(s). It is displayed in the Attachment field. Here you can specify the following parameters:id
- (required) an ID of the attached fileurl
- (optional) a path to the file to be attachedpreviewURL
- (optional) a path to the preview imagecoverURL
- (optional) a path to the image to be set as a covername
- (optional) a file nameisCover
- (optional) enables a cover image. If true, the cover image will be downloaded via the "coverURL" url
color
- (optional) a valid HEX color code. It is the color of the card top lineusers
- (optional) an array with the assigned users IDs. To specify the assigned users, you need to define an array with users data in the cardShape.users property. The users are displayed in the Users fieldpriority
- (optional) a card priority ID. To specify the card priority, you need to define an array with priorities data in the cardShape.priority property. It is displayed in the Priority fieldcss
- (optional) defines css styles for a separate cardcustom_key
- (optional) a custom key of the card. You can specify the custom keys to place the card into column and row. See the columnKey and rowKey properties
info
If you want to load new data for cards dynamically, you can use the parse() method!
Example
const cards = [
{
id: 1,
label: "Integration with React",
description: "Some description",
progress: 25,
start_date: new Date("01/05/2021"),
end_date: new Date("01/15/2021"),
attached: [
{
id: 234,
url: "../assets/img-1.jpg",
previewURL: "../assets/img-1.jpg",
coverURL: "../assets/img-1.jpg",
name: "img-1.jpg",
isCover: true
},
{...} // other attached files data
],
color: "#65D3B3",
users: [1, 2],
priority: 1,
// custom field to place the card into the "feature" row
// the rowKey config needs to be set to the "type" value
type: "feature",
// custom field to place the card into the "backlog" column
// the columnKey config needs to be set to the "stage" value
stage: "backlog",
css: "red",
},
{...} // other cards data
];
new kanban.Kanban("#root", {
columns,
cards,
// other parameters
});
Change log: The css parameter was added in v1.4
Related articles:
Related sample: Kanban. Styling cards