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,
        css?: string,
        votes?: array,
        comments?: [
            {
                id: string | number,
                userId: string | number,
                cardId: string | number,
                text?: string,
                date?: Date,
            },{...}
        ], 
        [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 object (do not specify a string date). It is displayed in the Start date field
  • end_date - (optional) an end Date object (do not specify a string date). It is displayed in the End date field
  • attached - (optional) an array of objects with data of the attached file(s). It is displayed in the Attachment field. For each object 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.users property. 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.priority property. It is displayed in the Priority field
  • css - (optional) defines css styles for a separate card
  • votes - (optional) an array of user IDs
  • comments - (optional) an array of objects with data of comments. For each comment's object you can specify the following parameters:
    • id - (required) an ID of the comment
    • userId - (required) an ID of a user that posted the comment
    • cardId - (required) an ID of the card that the comment belongs to
    • text - (optional) a text of the comment. It also can contain html markup
    • date - (optional) a Date object (do not specify a string date). The date when the comment was posted. It is not updated after editing
  • 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("02/24/2022"),
        end_date: new Date("02/24/2023"),
        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],
        votes: [3,6,8],
        comments: [
            {
                id: 1,
                userId: 1,
                cardId: 1,
                text: "Greetings, fellow colleagues. I would like to share my insights on this task. I reckon we should deal with at least half of the points in the plan without further delays. ",
                date: new Date(),
            }, {...}
        ],
        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, comments and votes parameters were added in v1.4

Related articles:

Related sample: Kanban. Styling cards