From 3af731c95b68f1a409cea1eaa6cd9c91882b2adf Mon Sep 17 00:00:00 2001 From: Serhii Pylypchuk Date: Wed, 1 Apr 2026 17:30:29 +0400 Subject: [PATCH] Test custom skill from Tania (/article-voice-guide) --- docs/guides/configuration.md | 132 ++++++++++++++++------------------ docs/guides/initialization.md | 12 ++-- docs/how_to_start.md | 33 ++++----- docs/index.md | 61 +++++++++------- 4 files changed, 118 insertions(+), 120 deletions(-) diff --git a/docs/guides/configuration.md b/docs/guides/configuration.md index 14ccffe2..ef183134 100644 --- a/docs/guides/configuration.md +++ b/docs/guides/configuration.md @@ -6,75 +6,77 @@ description: You can learn about the configuration in the documentation of the D # Configuration -You can configure the *Kanban* appearance and functionality via the corresponding API. The available parameters will allow you to: - -- configure the cards appearance via the [`cardShape`](api/config/js_kanban_cardshape_config.md) property -- configure the editor fields via the [`editorShape`](api/config/js_kanban_editorshape_config.md) property -- configure the editor behaviour via the [`editor`](api/config/js_kanban_editor_config.md) property -- configure rendering and scrolling via the [`renderType`](api/config/js_kanban_rendertype_config.md) and [`scrollType`](api/config/js_kanban_scrolltype_config.md) properties -- configure the Kanban history via the [`history`](api/config/js_kanban_history_config.md) property -- customize the card appearance via the [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) property +Configure *Kanban* appearance and behavior through its API: + +- configure card appearance via [`cardShape`](api/config/js_kanban_cardshape_config.md) +- configure editor fields via [`editorShape`](api/config/js_kanban_editorshape_config.md) +- configure editor behavior via [`editor`](api/config/js_kanban_editor_config.md) +- configure rendering and scrolling via [`renderType`](api/config/js_kanban_rendertype_config.md) and [`scrollType`](api/config/js_kanban_scrolltype_config.md) +- configure Kanban history via [`history`](api/config/js_kanban_history_config.md) +- customize card appearance via [`cardTemplate`](api/config/js_kanban_cardtemplate_config.md) - *Refer to the [**Customization**](guides/customization.md) section for details!* -- apply the desired locale via the [`locale`](api/config/js_kanban_locale_config.md) property +- apply the desired locale via [`locale`](api/config/js_kanban_locale_config.md) - *Refer to the [**Localization**](guides/localization.md) section for details!* -- load data for cards, columns, rows and links via the corresponding [`cards`](api/config/js_kanban_cards_config.md), [`columns`](api/config/js_kanban_columns_config.md), [`rows`](api/config/js_kanban_rows_config.md) and [`links`](api/config/js_kanban_links_config.md) properties +- load data for cards, columns, rows, and links via [`cards`](api/config/js_kanban_cards_config.md), [`columns`](api/config/js_kanban_columns_config.md), [`rows`](api/config/js_kanban_rows_config.md), and [`links`](api/config/js_kanban_links_config.md) - *Refer to the [**Working with data**](guides/working_with_data.md) section for details!* ## Cards -The board of Kanban consists of the *cards* distributed into *columns* and *rows*. You can configure the cards appearance using the [`cardShape`](api/config/js_kanban_cardshape_config.md) configuration property. There are several predefined fields you can include (or exclude) into the card template, namely: +The Kanban board distributes *cards* across *columns* and *rows*. Use [`cardShape`](api/config/js_kanban_cardshape_config.md) to control which predefined fields appear on each card: - a card label via the `label: boolean` config - a card description via the `description: boolean` config :::tip - You can manage the **label** and **description** fields of any card via the corresponding inputs of the Kanban editor. If you activate these fields, the corresponding inputs will be displayed in the editor automatically. To configure these inputs, you can use the [**text** and **textarea**](#text-and-textarea-types) types. + Activate **label** and **description** to show matching inputs in the editor. Configure these inputs with the [**text** and **textarea**](#using-text-and-textarea-fields) types. ::: - a card progress via the `progress: boolean` config :::tip - You can manage the **progress** field of any card via the corresponding control of the Kanban editor. If you activate this field, the corresponding control will be displayed in the editor automatically. To configure this control, you can use the [**progress**](#progress-type) type. + Activating **progress** adds a progress control to the editor automatically. Configure it with the [**progress**](#using-the-progress-field) type. ::: - a start date via the `start_date: boolean` config - an end date via the `end_date: boolean` config :::tip - You can manage the **start date** and **end date** fields of any card via the corresponding controls of the Kanban editor. If you activate these fields, the corresponding controls will be displayed in the editor automatically. To configure these controls, you can use the [**date**](#date-and-daterange-types) type. + The editor shows date controls for **start date** and **end date** when you activate these fields. Configure the controls with the [**date**](#using-date-and-daterange-fields) type. ::: - a card context menu via the `menu: boolean` config - a card attachment via the `attached: boolean` config :::tip - You can **attache files** to any card via the corresponding field of the Kanban editor. To configure this field, you can use the [**files**](#files-type) type. + To configure the file attachment field in the editor, use the [**files**](#using-the-file-upload-field) type. ::: - a card color via the `color: boolean` config :::tip - You can manage the **top color line** of any card via the corresponding control of the Kanban editor. If you activate **color**, the corresponding control (*colorpicker*) will be displayed in the editor automatically. To configure this control, you can use the [**color**](#color-type) type. + Activating **color** adds a colorpicker to the editor automatically. Configure it with the [**color**](#using-the-color-field) type. ::: - a card cover (*preview image*) via the `cover: boolean` config -- a card comment(s) via the `comments: boolean` config -- a confirmation dialog to confirm or decline the card deletion via the `confirmDeletion: boolean` config -- a card vote(s) via the `votes: boolean | { show: boolean, clicable: true }` config -- a card assignment (users) via the `users: boolean | { show: boolean, values: object, maxCount: number | false }` config +- card comments via the `comments: boolean` config +- a confirmation dialog for card deletion via the `confirmDeletion: boolean` config +- card votes via the `votes: boolean | { show: boolean, clicable: true }` config +- card assignment (users) via the `users: boolean | { show: boolean, values: object, maxCount: number | false }` config :::tip - You can assign one or several users to any card via the corresponding control of the Kanban editor. To configure the control for assigning a single user, use the [**combo** or **select**](#combo-select-and-multiselect-types) types of editor. To assign multiple users, use the [**multiselect**](#combo-select-and-multiselect-types) type. + To assign a single user, configure the editor control with [**combo** or **select**](#using-combo-select-and-multiselect-fields). For multiple users, use [**multiselect**](#using-combo-select-and-multiselect-fields). ::: - a card priority via the `priority: boolean | { show: boolean, values: object }` config :::tip - You can manage the **priority** of any card via the corresponding control of the Kanban editor. If you activate **priority**, the corresponding control will be displayed in the editor automatically. To configure this control, you can use the [**combo** or **select**](#combo-select-and-multiselect-types) types only. + Activating **priority** adds a select control to the editor automatically. Configure it with [**combo** or **select**](#using-combo-select-and-multiselect-fields) only. ::: - *a custom field* via the `headerFields: [ { key: string, label: string, css: string } ]` config +Pass `cardShape` to the constructor along with your card and column data: + ~~~jsx {12-35,42} const users = [ // users data { id: 1, label: "John Smith", avatar: "../assets/user.jpg" }, @@ -113,38 +115,36 @@ const cardShape = { // cards settings }; new kanban.Kanban("#root", { - // cards data columns, cards, - // cards settings cardShape }); ~~~ :::note -Unless you specify the card settings via the [`cardShape`](api/config/js_kanban_cardshape_config.md) property, the widget will apply a [**defaultCardShape**](api/config/js_kanban_cardshape_config.md#default-config) set of parameters! +If you don't specify card settings via [`cardShape`](api/config/js_kanban_cardshape_config.md), the widget applies [**defaultCardShape**](api/config/js_kanban_cardshape_config.md#default-config). ::: ## Editor :::info -You can display the Editor as the **sidebar** or **modal window** using the [`editor.placement`](api/config/js_kanban_editor_config.md) property! +Display the Editor as a **sidebar** or **modal window** using the [`editor.placement`](api/config/js_kanban_editor_config.md) property! ::: -The *Editor* of Kanban consists of the fields for managing the cards data. To configure the editor fields (controls), you can use the [`editorShape`](api/config/js_kanban_editorshape_config.md) property. You can use the following types of editor fields: +The editor consists of fields for managing card data. Configure editor fields with [`editorShape`](api/config/js_kanban_editorshape_config.md). The supported field types are: -- [**combo**, **select**, and **multiselect**](#combo-select-and-multiselect-types) -- [**color**](#color-type) -- [**text** and **textarea**](#text-and-textarea-types) -- [**progress**](#progress-type) -- [**files**](#files-type) -- [**date** and **dataRange**](#date-and-daterange-types) -- [**comments**](#comments-type) -- [**links**](#links-type) +- [**combo**, **select**, and **multiselect**](#using-combo-select-and-multiselect-fields) +- [**color**](#using-the-color-field) +- [**text** and **textarea**](#using-text-and-textarea-fields) +- [**progress**](#using-the-progress-field) +- [**files**](#using-the-file-upload-field) +- [**date** and **dateRange**](#using-date-and-daterange-fields) +- [**comments**](#using-the-comments-field) +- [**links**](#using-the-links-field) -### Combo, Select and Multiselect types +### Using combo, select, and multiselect fields -The editor fields of **combo**, **select**, and **multiselect** types can be set in the following way: +Pass the field type and options array to each `editorShape` entry: ~~~jsx {3-12} new kanban.Kanban("#root", { @@ -165,7 +165,7 @@ new kanban.Kanban("#root", { ~~~ :::info -For the editor field of **"multiselect"** and **"combo"** types you can also specify a path to the preview image via the **avatar** property: +For **multiselect** and **combo** fields, specify a path to the preview image via the **avatar** property: ~~~jsx {3,9,13} editorShape: [ @@ -191,9 +191,9 @@ editorShape: [ [**Kanban. Limiting assignments to one user only**](https://snippet.dhtmlx.com/2rlg4qvk?tag=kanban) ::: -### Color type +### Using the color field -The editor field of **color** type can be set in the following way: +Specify the allowed color values and optional picker config: ~~~jsx {3-12} new kanban.Kanban("#root", { @@ -213,9 +213,9 @@ new kanban.Kanban("#root", { }); ~~~ -### Text and Textarea types +### Using text and textarea fields -The editor fields of **text** and **textarea** types can be set in the following way: +Configure text inputs with placeholder, focus, and style options: ~~~jsx {3-14} new kanban.Kanban("#root", { @@ -237,9 +237,9 @@ new kanban.Kanban("#root", { }); ~~~ -### Progress type +### Using the progress field -The editor field of **progress** type can be set in the following way: +Set `min`, `max`, and `step` to control the progress slider range: ~~~jsx {3-12} new kanban.Kanban("#root", { @@ -259,9 +259,7 @@ new kanban.Kanban("#root", { }); ~~~ -### Files type - -The editor field of **files** type can be set in the following way: +### Using the file upload field #### Configuring Upload Url as String @@ -324,9 +322,9 @@ new kanban.Kanban("#root", { }); ~~~ -### Date and DateRange types +### Using date and dateRange fields -The editor field of **date** type can be set in the following way: +Specify a date format for the field: ~~~jsx {3-8} new kanban.Kanban("#root", { @@ -342,7 +340,7 @@ new kanban.Kanban("#root", { }); ~~~ -The editor field of **dateRange** type can be set in the following way: +Use `dateRange` to bind start and end dates to a single control: ~~~jsx {3-11} new kanban.Kanban("#root", { @@ -361,9 +359,9 @@ new kanban.Kanban("#root", { }); ~~~ -### Comments type +### Using the comments field -The editor field of **comments** type can be set in the following way: +Configure comment display, date format, and placement: ~~~jsx {3-13} new kanban.Kanban("#root", { @@ -384,9 +382,9 @@ new kanban.Kanban("#root", { }); ~~~ -### Links type +### Using the links field -The editor field of **links** type can be set in the following way: +Add a links field to let users create card dependencies: ~~~jsx {3-10} new kanban.Kanban("#root", { @@ -407,7 +405,7 @@ new kanban.Kanban("#root", { ### Binding editor fields to card fields :::info -To link the editor field to the corresponding card field, you need to provide special **key** in the object of [`editorShape`](api/config/js_kanban_editorshape_config.md) property (`key: "editor_field_key"`). The value of this key needs to be set to *true* in the [`cardShape`](api/config/js_kanban_cardshape_config.md) property (for built-in card fields) or specified in the **headerFields** array (for custom card fields). You can provide the initial data of any field via this key as well. +To link an editor field to the corresponding card field, add a **key** to the field object in [`editorShape`](api/config/js_kanban_editorshape_config.md). For built-in card fields, set the matching key to *true* in [`cardShape`](api/config/js_kanban_cardshape_config.md). For custom fields, add the key to the **headerFields** array. The key also sets the field's initial data value. ~~~jsx {5,13,22,25,33-34,38-39,45-47} // editor settings @@ -464,18 +462,17 @@ new kanban.Kanban("#root", { ::: :::note -Unless you specify the editor settings via the [`editorShape`](api/config/js_kanban_editorshape_config.md) property, the widget will apply a [**defaultEditorShape**](api/config/js_kanban_editorshape_config.md#default-config) set of parameters. In this case, the default controls and inputs will be displayed in editor only after activating the corresponding fields of cards via the [`cardShape`](api/config/js_kanban_cardshape_config.md) property. +If you don't specify editor settings via [`editorShape`](api/config/js_kanban_editorshape_config.md), the widget applies [**defaultEditorShape**](api/config/js_kanban_editorshape_config.md#default-config). Default controls appear in the editor only after you activate the corresponding card fields via [`cardShape`](api/config/js_kanban_cardshape_config.md). ::: -### Configuring the editor +### Configuring editor behavior -Using the [`editor`](api/config/js_kanban_editor_config.md) property, you can configure the editor in the following way: +Use the [`editor`](api/config/js_kanban_editor_config.md) property to control editor behavior: -- enables/disables an autosave mode of the editor via the *`editor.autoSave`* property -- specify a delay time of autosaving data via the *`editor.debounce`* property (works with the ***autoSave: true*** parameter only) +- enable autosave via `editor.autoSave` +- set the autosave delay via `editor.debounce` (requires `autoSave: true`) ~~~jsx {6-9} -// create Kanban new kanban.Kanban("#root", { columns, cards, @@ -490,28 +487,23 @@ new kanban.Kanban("#root", { ## Toolbar -**Toolbar** of Kanban consists of the searchbar for *searching cards* and controls for *sorting cards* and *adding new columns and rows*. To display Toolbar, you need to initialize it in a separate container using the **kanban.Toolbar()** constructor. +The **Toolbar** contains a search bar, sort controls, and buttons to add columns and rows. Initialize it in a separate container using the **kanban.Toolbar()** constructor: ~~~jsx {13} -// create Kanban const board = new kanban.Kanban("#root", { - // data columns, cards, rows, - // card settings cardShape, - // editor settings editorShape }); new kanban.Toolbar("#toolbar", { api: board.api }); ~~~ -You can manage (*hide/show/customize*) the Toolbar controls using the **items** property: +Use the **items** property to hide, show, or customize Toolbar controls: ~~~jsx {6-51} -// create Kanban const board = new kanban.Kanban("#root", {...}); new kanban.Toolbar("#toolbar", { @@ -566,11 +558,11 @@ new kanban.Toolbar("#toolbar", { ~~~ :::tip -To hide some of the Toolbar controls, remove the corresponding string(s) from the **items** array. +To hide a Toolbar control, remove its string from the **items** array. ::: ## Example -In this snippet you can see how to configure the **Cards**, **Editor** and **Toolbar** of Kanban: +This snippet shows Cards, Editor, and Toolbar configured together: diff --git a/docs/guides/initialization.md b/docs/guides/initialization.md index 5b171fad..698861f3 100644 --- a/docs/guides/initialization.md +++ b/docs/guides/initialization.md @@ -6,7 +6,7 @@ description: You can learn about the initialization in the documentation of the # Initialization -This guide will give you detailed instructions on how to create Kanban on a page to enrich your application with features of the Kanban board. Take the following steps to get a ready-to-use component: +This guide covers how to add Kanban to a page. Take the following steps to get a ready-to-use component: 1. [Include the Kanban source files on a page](#including-source-files). 2. [Create a container for Kanban](#creating-container). @@ -21,7 +21,7 @@ To create Kanban, you need to include 2 source files on your page: - *kanban.js* - *kanban.css* -Make sure that you set correct relative paths to the source files: +Set correct relative paths to the source files: ~~~html title="index.html" @@ -62,6 +62,8 @@ If you want to create the widget along with its *Toolbar*, you need to initializ - an HTML container (the ID of the HTML container) - an object with configuration properties +Pass a reference to the board's API when initializing the Toolbar: + ~~~jsx {6-8} title="index.html" // create Kanban const board = new kanban.Kanban("#root", { @@ -69,7 +71,7 @@ const board = new kanban.Kanban("#root", { }); new kanban.Toolbar("#toolbar", { - // configuration properties + api: board.api }); ~~~ @@ -80,12 +82,12 @@ To learn more about configuring the Toolbar of Kanban, read the [**Configuration ### Configuration properties :::note -The full list of properties to configure **Kanban** can be found [**here**](api/overview/properties_overview.md).
+The full list of properties to configure **Kanban** can be found [**here**](api/overview/properties_overview.md).
The full list of properties to configure **Toolbar of Kanban** can be found [**here**](api/overview/toolbar_properties_overview.md). ::: ## Example -In this snippet you can see how to initialize **Kanban** with the initial data: +This snippet shows how to initialize **Kanban** with initial data: diff --git a/docs/how_to_start.md b/docs/how_to_start.md index 870392ea..031e15c4 100644 --- a/docs/how_to_start.md +++ b/docs/how_to_start.md @@ -6,7 +6,7 @@ description: You can explore how to start working with DHTMLX Kanban in the docu # How to start -This clear and comprehensive tutorial will guide your through the steps you need to take in order to get a full-functional Kanban on a page. +This guide covers the steps to get Kanban running on a page. import editor from '@site/static/img/js_kanban_editor.png'; @@ -16,11 +16,9 @@ import editor from '@site/static/img/js_kanban_editor.png'; className="img_border" /> -## Step 1. Including source files +## Step 1. Include source files -Start from creating an HTML file and call it *index.html*. Then proceed to include Kanban source files into the created file. - -There are two necessary files: +Create an HTML file named *index.html*, then include the Kanban source files: - the JS file of Kanban - the CSS file of Kanban @@ -41,34 +39,34 @@ There are two necessary files: ~~~ -### Installing Kanban via npm or yarn +### Install Kanban via npm or yarn You can import JavaScript Kanban into your project using `yarn` or `npm` package manager. -#### Installing trial Kanban via npm or yarn +#### Install trial Kanban via npm or yarn :::info If you want to use trial version of Kanban, download the [**trial Kanban package**](https://dhtmlx.com/docs/products/dhtmlxKanban/download.shtml) and follow steps mentioned in the *README* file. Note that trial Kanban is available 30 days only. ::: -#### Installing PRO Kanban via npm or yarn +#### Install PRO Kanban via npm or yarn :::info You can access the DHTMLX private **npm** directly in the [Client's Area](https://dhtmlx.com/clients/) by generating your login and password for **npm**. A detailed installation guide is also available there. Please note that access to the private **npm** is available only while your proprietary Kanban license is active. ::: -## Step 2. Creating Kanban +## Step 2. Create Kanban -Now you are ready to add Kanban to the page. First, let's create the DIV containers for Kanban and its Toolbar. So, take the following steps: +Add two DIV containers to *index.html* — one for the board, one for the Toolbar: - specify two DIV containers in the *index.html* file - initialize Kanban and its Toolbar using the **kanban.Kanban** and **kanban.Toolbar** constructors :::info -The Toolbar is an optional part of the Kanban interface. To create Kanban without Toolbar, you can specify only one DIV container and initialize the widget via the **kanban.Kanban** constructor +The Toolbar is an optional part of the Kanban interface. To create Kanban without Toolbar, you can specify only one DIV container and initialize the widget via the **kanban.Kanban** constructor ::: -As parameters, constructors take the IDs of HTML containers where the Kanban and Toolbar will be placed into, as well as corresponding configuration objects. +Each constructor takes the ID of its HTML container and a configuration object. For the Toolbar, also pass a reference to the board's API: ~~~html {9-10,13-15,17-19} title="index.html" @@ -88,19 +86,16 @@ As parameters, constructors take the IDs of HTML containers where the Kanban and }); new kanban.Toolbar("#toolbar", { - // configuration properties + api: board.api }); ~~~ -## Step 3. Configuring Kanban - -Next you can specify configuration properties you want the Kanban component to have when initialized. +## Step 3. Configure Kanban -To start working with Kanban, first you need to provide the initial data for **cards** and **columns** (and *rows*). -Beside the initial data, you can configure the [cards](guides/configuration.md#cards), [editor](guides/configuration.md#editor) and [toolbar](guides/configuration.md#toolbar) appearance. +Pass configuration properties to the Kanban constructor. At minimum, provide initial data for **cards** and **columns** (and *rows*). You can also configure [cards](guides/configuration.md#cards), the [editor](guides/configuration.md#editor), and the [toolbar](guides/configuration.md#toolbar): ~~~jsx {2-7,11-18} const board = new kanban.Kanban("#root", { @@ -126,4 +121,4 @@ new kanban.Toolbar("#toolbar", { ## What's next -That's all. Just three simple steps and you have a handy tool for visualizing and managing the workflow. Now you can start working with your tasks or keep exploring the inner world of JavaScript Kanban. +That's all — three steps and Kanban is running on your page. To customize the board further, read the [Configuration](guides/configuration.md) guide. diff --git a/docs/index.md b/docs/index.md index e8b8a2c5..762983e2 100644 --- a/docs/index.md +++ b/docs/index.md @@ -7,13 +7,22 @@ description: You can have an overview of DHTMLX JavaScript Kanban library in the # DHTMLX Kanban overview -JavaScript Kanban is an effective solution for the workflow visualization. The widget helps you better understand your business processes and gain an overview of your team workload. This flexible tool can work with any number of cards, columns and swimlanes. Fully written in pure JavaScript and CSS, the component can be easily set and customized as well as integrated into any web app or web page. +JavaScript Kanban is a widget for workflow visualization. It helps you track team workload and understand where work is getting stuck. The component works with any number of cards, columns, and swimlanes. Written in pure JavaScript and CSS, it integrates into any web app or page without extra dependencies. ## Kanban structure­ +Kanban has three independent UI components: the **Toolbar**, the **Board**, and the **Editor**. The Toolbar and Editor are optional. The Board is the core. + ### Toolbar -**Toolbar** of Kanban is a separate part of the interface. It includes a search bar for *searching* cards, a control for *sorting* cards by the specified parameters, two controls for managing history (*undo/redo*) and controls for *adding new columns and rows*. You can flexibly manage the searching and sorting logic as well as change the Toolbar structure by adding custom elements or changing the order of the built-in ones. Read more in the [Configuration](guides/configuration.md#toolbar) section. +The **Toolbar** is a separate component. Initialize it in its own container. It includes: + +- a search bar for filtering cards +- a sort control for ordering cards by specified parameters +- undo/redo controls for managing history +- buttons to add new columns and rows + +You can customize the search and sort logic, add custom elements, or reorder the built-in controls. Read more in the [Configuration](guides/configuration.md#toolbar) section. import toolbar from '@site/static/img/js_kanban_toolbar.png'; @@ -25,28 +34,28 @@ import toolbar from '@site/static/img/js_kanban_toolbar.png'; ### Board -The **Board** is main part of Kanban. It consists of the cards distributed into columns and rows (swimlanes). You can flexibly configure the cards appearance as well as apply a custom template. Read more in the [Configuration](guides/configuration.md#cards) section. - -On the **Board** panel you can work with the ***cards***, ***columns*** and ***rows*** in the following way: - -- add new cards by clicking on the plus icon (in accordance with the specified *limits* for each column and swimlane) -- add comments and votes for tasks via the editor panel ([Example](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)) -- set links between tasks via the editor ([Example](https://snippet.dhtmlx.com/81qu7qh0?tag=kanban)) -- delete cards, columns and rows using a context menu (a 3 dots icon) -- duplicate cards using a context menu (a 3 dots icon) or the `Ctrl (Command)`+`D` shortcuts (allows duplicating multiple cards) -- export Kanban data to a JSON file -- managing Kanban history using the following shortcuts: - - `Ctrl (Command)`+`Z` - reverts the last operation in Kanban (one step back in the Kanban history) - - `Ctrl (Command)`+`Y` or `Ctrl (Command)`+`Shift`+`Z` - repeats the operation that was reverted by the *undo* action (one step forward in the Kanban history) -- move cards by dragging them into desired place (row and column) -- move columns and rows using a context menu (a 3 dots icon) -- rename columns and rows by double clicking on the corresponding labels or using a context menu (a 3 dots icon) -- display a card editor by clicking on the card -- collapse/uncollapse rows by clicking on the arrow icon on the left of the row label -- collapse/uncollapse columns by clicking on the arrow icon on the left of the column label -- select multiple cards using the following shortcuts: - - `Shift` + clicking on the corresponding cards, to select multiple cards in the same column - - `Ctrl (Command)` + clicking on the corresponding cards, to select multiple cards in different columns +The **Board** is the main component. It distributes cards across columns and rows (swimlanes). You can configure card appearance and apply a custom template. Read more in the [Configuration](guides/configuration.md#cards) section. + +On the board you can work with cards, columns, and rows: + +- add new cards by clicking the plus icon (subject to *limits* set per column and swimlane) +- add comments and votes via the editor panel ([Example](https://snippet.dhtmlx.com/5hcx01h4?tag=kanban)) +- set links between cards via the editor ([Example](https://snippet.dhtmlx.com/81qu7qh0?tag=kanban)) +- delete cards, columns, and rows using the context menu (three-dot icon) +- duplicate cards using the context menu or `Ctrl (Command)`+`D` (supports multiple cards) +- export board data to a JSON file +- manage history using keyboard shortcuts: + - `Ctrl (Command)`+`Z` — reverts the last operation + - `Ctrl (Command)`+`Y` or `Ctrl (Command)`+`Shift`+`Z` — repeats the last reverted operation +- move cards by dragging them to a different column or row +- move columns and rows using the context menu +- rename columns and rows by double-clicking their labels or using the context menu +- open the card editor by clicking on a card +- collapse/uncollapse rows by clicking the arrow icon next to the row label +- collapse/uncollapse columns by clicking the arrow icon next to the column label +- select multiple cards: + - `Shift` + click — selects multiple cards in the same column + - `Ctrl (Command)` + click — selects cards across different columns import board from '@site/static/img/js_kanban_board.png'; @@ -58,7 +67,7 @@ import board from '@site/static/img/js_kanban_board.png'; ### Editor -The **Editor** is a modal panel that consists of the fields and controls for managing the selected card data. To display the editor, click on the card you want to change. You can flexibly configure the editor structure by adding new fields and controls. Read more in the [Configuration](guides/configuration.md#editor) section. +The **Editor** is a modal panel with fields and controls for managing the selected card's data. To open it, click on a card. You can add custom fields and controls to the editor structure. Read more in the [Configuration](guides/configuration.md#editor) section. import editor from '@site/static/img/js_kanban_editor.png'; @@ -70,4 +79,4 @@ import editor from '@site/static/img/js_kanban_editor.png'; ## What's next -Now you can get down to using Kanban in your application. Follow the directions of the [How to start](how_to_start.md) tutorial for guidance. +Follow the [How to start](how_to_start.md) guide to add Kanban to your application.