Skip to main content

editorShape

Description

the editor settings for managing the appearance and functionality of the Kanban editor

Usage

editorShape?: [
{
type: string,
key: string,
label?: string,
options?: [
{
id: any,
label: string
},
{...} // other options
],
colors?: array,
placeholder?: string,
config?: {
accept?: string,
disabled?: boolean,
multiple?: boolean,
folder?: boolean
},
uploadURL?: string
},
{...} // other fields data
]

Parameters

To configure the editor appearance and functionality, you can specify the following parameters (fields):

  • type - (mandatory) an editor field type. Here you can specify the following types: text, textarea, date, select, combo, multiselect, files, color, progress
  • key - (mandatory) an editor field key. Here you need to use the value specified in the cardShape property. See the example below:
    const cardShape = { // card settings
label: true,
headerFields: [
{ // custom field
key: "sprint",
css: "custom_style",
label: "Sprint"
}
]
// other parameters
};

const editorShape= { // editor settings
{
type: "text",
key: "label",
label: "Label"
},
{
type: "text",
key: "sprint",
label: "Sprint"
},
// other parameters
};
  • label - (optional) an editor field label
  • options - (optional) an array of objects with the dropdown options (for the select and combo types). Here you can specify the following fields:
    • id - (mandatory) an option ID
    • label - (mandatory) an option label
  • colors - (optional) an array with valid HEX codes. It is used for the color type
  • placeholder - (optional) an editor field placeholder
  • config - (optional) an object with the editor uploader configuration. Here you can specify the following parameters:
    • accept - (optional) a file type the uploader should accept
    • disabled - (optional) if true, the uploader forbids the user to upload any files
    • multiple - (optional) if true, the uploader allows the user to select more than one file
    • folder - (optional) if true, the uploader allows the user to select a folder
  • uploadURL - (optional) an editor uploader URL (this parameter is mandatory for the "files" type)
info

Unless you specify the editor settings via the editorShape property, the widget will apply a defaultEditorShape 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 defaultColors = [ "#65D3B3", "#FFC975", "#58C3FE" ];

const defaultEditorShape: [
{ key: "label", type: "text", label: "Label" },
{ key: "description", type: "textarea", label: "Description" },
{ key: "priority", type: "combo", label: "Priority", options: defaultPriorities },
{ key: "color", type: "color", label: "Color", colors: defaultColors },
{ key: "progress", type: "progress", label: "Progress" },
{ key: "start_date", type: "date", label: "Start date" },
{ key: "end_date", type: "date", label: "End date" }
]

Example

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

const editorShape = [ // editor settings
...kanban.defaultEditorShape, // include the default settings
{ // add custom field
type: "multiselect",
key: "users",
label: "Users",
options: users
}
];

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

Related articles: Configuration