Skip to main content

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,
[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 methods
  • label - (optional) a card label. It is displayed in the Label field
  • description - (optional)a card description. It is displayed in the Description field
  • progress - (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 field
  • start_date - (optional) a start date value. It is displayed in the Start date field
  • end_date - (optional) an end date value. It is displayed in the End date field
  • attached - (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 file
    • url - (optional) a path to the file to be attached
    • previewURL - (optional) a path to the preview image
    • coverURL - (optional) a path to the image to be set as a cover
    • name - (optional) a file name
    • isCover - (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 line
  • users - (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 property (see the users parameter). The users are displayed in the Users field
  • priority - (optional) a card priority ID. To specify the card priority, you need to define an array with priorities data in the cardShape property (see the priority parameter). It is displayed in the Priority field
  • custom_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"
},
{...} // other cards data
];

new kanban.Kanban("#root", {
columns,
cards,
// other parameters
});

Change log: Starting from v1.1 the cards property is optional

Related articles: Working with data

Related sample: Kanban. Initialization