Skip to main content

cardShape

Description

the card settings for managing the appearance of the Kanban board

Usage

cardShape?: {
label: boolean | { show?: boolean },
description?: boolean | { show?: boolean },
progress?: boolean | { show?: boolean },
start_date?: boolean | { show?: boolean },
end_date?: boolean | { show?: boolean },
menu?: boolean | { show?: boolean },
attached?: boolean | { show?: boolean },
users?: {
show?: boolean,
values?: [
{
id: string | number,
path?: string,
label?: string
},
{...} // other users data
]
},
priority?: {
show?: boolean,
values?: [
{
id: string | number,
color: string,
label?: string
},
{...} // other priorities data
]
},
color?: boolean | { show?: boolean },
cover?: boolean | { show?: boolean },
headerFields?: [
{
key: string,
css?: string,
label?: string
},
{...} // other fields data
]
}

Parameters

info

In some cases, you can set the parameter to the short or extended value. See the code below:

    label: boolean | { show?: boolean }
// short value
label: true
// or
// full value
label: { show: true }

To configure the card appearance, you can specify the following parameters (fields):

  • label - (mandatory) show/hide a card label
  • progress - (optional) show/hide a card progress bar
  • start_date - (optional) show/hide a card start date
  • end_date - (optional) show/hide a card end date
  • menu - (optional) show/hide a card menu
  • attached - (optional) show/hide a card attachment
  • users - (optional) an object with users parameters
    • show - (optional) show/hide the assigned users data
    • values - (optional) an array of objects with users data. Here you can specify the following fields:
      • id - (mandatory) a user ID
      • path - (optional) a path to the user picture
      • label - (optional) a user name
  • priority - (optional) an object with priorities parameters
    • show - (optional) show/hide a card priority
    • values - (optional) an array of objects with priorities data. Here you can specify the following fields:
      • id - (mandatory) a priority ID
      • color - (mandatory) a valid HEX code
      • label - (optional) a priority name
  • color - (optional) show/hide a colored top line of a card
  • cover - (optional) show/hide a card picture
  • headerFields - (optional) an array of objects with custom fields data. Here you can specify the following parameters:
    • key - (mandatory) a key of the custom field. It is used when configuring the Editor via the editorShape property
    • css - (optional) a css class of the custom field
    • label - (optional) a label of the custom field
info

Unless you specify the cards settings via the cardShape property, the widget will apply a defaultCardShape set of parameters!

Default config

const defaultPriorities = [
{ id: 1, color: "#FF5252", label: "high" },
{ id: 2, color: "#FFC975", label: "medium" },
{ id: 3, color: "#0AB169", label: "low" }
];

const defaultCardShape = {
label: true,
description: false,
progress: false,
start_date: false,
end_date: false,
users: false,
priority: {
show: false,
values: defaultPriorities
},
color: false,
cover: false,
attached: false,
menu: true
};

Example

const users = [ // users data
{ id: 1, label: "John Smith", path: "../assets/user.jpg" },
{ id: 2, label: "Aaron Short" }
];

const cardPriority = [ // card priority data
{ id: 1, color: "#FF5252", label: "high" },
{ id: 2, color: "#FFC975", label: "medium" },
{ id: 3, color: "#0AB169", label: "low" }
];

const cardShape = { // card settings
label: true,
description: true,
progress: true,
start_date: true,
end_date: true,
menu: true,
attached: true,
users: {
show: true,
values: users
},
priority: {
show: true,
values: cardPriority
},
color: false,
cover: false,
headerFields: [
{ // custom field
key: "sprint",
css: "custom_style",
label: "Sprint"
}
]
};

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

Related articles: Configuration