Skip to main content

editorShape

Description

Optional. An array of objects containing settings for managing the appearance and functionality of the Kanban editor

Usage

editorShape?: [
{
// common parameters for all types
type: string,
key: string,
label?: string,

// for a "dateRange" type only
key: {
start: string,
end: string
},

// for "date" and "dateRange" types
format?: string,

// for "combo", "select" and "multiselect" types only
values?: [
{
id: string | number,
label: string,
avatar?: string // for a "multiselect" type only
},
{...} // other options
],

// for a "color" type only
values?: array,
config?: {
placeholder?: string,
clear?: boolean
},

// for "text" and "textarea" types only
config?: {
placeholder?: string,
readonly?: boolean,
focus?: boolean,
disabled?: boolean,
inputStyle?: string
},

// for a "progress" type only
config?: {
min?: number,
max?: number,
step?: number
},

// for a "files" type only
uploadURL?: string,
config?: {
accept?: string,
disabled?: boolean,
multiple?: boolean,
folder?: boolean
},

// for a "comments" type only
config?: {
format?: string,
placement?: "page" | "editor",
html?: boolean
};
},
{...} // other fields settings
];

Parameters

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

- Common parameters for all types

  • type - (required) an editor field type
info

In the Kanban editor you can use the following types of fields: combo, select, multiselect, color, text, textarea, progress, files, date, dateRange, comments and links

  • key - (required) an editor field key. Here you need to use the value specified in the cardShape property. See the example below:
    // card appearance settings
const cardShape = {
...kanban.defaultCardShape,
headerFields: [
{ // custom field
label: "Custom field",
css: "custom_style",
key: "custom_key"
}
]
};
// editor appearance settings
const editorShape = [
{
label: "Custom field",
type: "text",
key: "custom_key"
}
];
  • label - (optional) an editor field label

- Parameters for a "dateRange" type

  • key - (required) an object of keys of the editor field. Here you can specify the following parameters:
    • start - (required) a start date key
    • end - (required) an end date key
info

The values of these keys used in the cardShape property!

  • format - (optional) defines format of "date" and "dateRange" controls. The available parameters can be found here

- Parameters for "combo", "select" and "multiselect" types

  • values - (optional) an array of objects containing the dropdown options data. Here you can specify the following parameters:
    • id - (required) an option ID
    • label - (required) an option label
    • avatar - (optional) a path to the option preview image (for a "multiselect" type only)
info

To set the control for assigning one user, you need to use the "select" or "combo" types! For assigning several users, use the "multiselect" type.

- Parameters for a "color" type

  • values - (optional) an array with valid HEX codes
  • config - (optional) a configuration object of the "color" field. Here you can specify the following parameters:
    • placeholder - (optional) a placeholder value
    • clear - (optional) shows/hides a "clear" icon

- Parameters for "text" and "textarea" types

  • config - (optional) a configuration object of the "text" and "textarea" fields. Here you can specify the following parameters:
    • placeholder - (optional) a placeholder value
    • readonly - (optional) enables/disables a readonly mode
    • focus - (optional) enables/disables a focus
    • disabled - (optional) enables/disables a field
    • inputStyle - (optional) a custom css style

- Parameters for a "progress" type

  • config - (optional) a configuration object of the "progress" field. Here you can specify the following parameters:
    • min - (optional) a min value
    • max - (optional) a max value
    • step - (optional) a step of moving the progress bar slider

- Parameters for a "files" type

  • uploadURL - (optional) an URL of the editor uploader
  • config - (optional) a configuration object of the "files" field. Here you can specify the following parameters:
    • accept - (optional) a file type to be uploaded ("image/*", "video/*", "audio/*" and other)
    • disabled - (optional) enables/disables uploading files
    • multiple - (optional) enables/disables uploading multiple files
    • folder - (optional) enables/disables uploading folders

- Parameters for a "comments" type

  • config - (optional) a configuration object of the "comments" field. Here you can specify the following parameters:
    • format - (optional) - a date format of the comments. The available formats can be found here
    • placement - (optional) - a place the comments will be displayed. You can set this property to the following values:
      • "editor" - comments will be displayed in the editor
      • "page" - comments will be displayed in a separate panel
    • html - (optional) - enables/disables using of the HTML markup in comments
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", values: defaultPriorities },
{ key: "color", type: "color", label: "Color", values: 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", avatar: "../assets/user.jpg" },
{ id: 2, label: "Aaron Short" }
];

const editorShape = [ // editor settings
...kanban.defaultEditorShape, // include the default settings
{ // add custom fields
type: "multiselect",
key: "users",
label: "Users",
values: users
},
{
type: "comments",
key: "comments",
label: "Comments",
config: {
format: "%M %d",
placement: "page",
html: true,
},
},
{
type: "links",
key:"links",
label: "Links",
}
];

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

Change log:

  • The dateRange type was added in v1.3
  • The comments and links types of editor, and format parameters were added in v1.4

Related articles: Configuration