"use strict";(self.webpackChunknoco_docs=self.webpackChunknoco_docs||[]).push([[1140],{3905:(e,a,t)=>{t.d(a,{Zo:()=>c,kt:()=>h});var n=t(67294);function i(e,a,t){return a in e?Object.defineProperty(e,a,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[a]=t,e}function o(e,a){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);a&&(n=n.filter((function(a){return Object.getOwnPropertyDescriptor(e,a).enumerable}))),t.push.apply(t,n)}return t}function r(e){for(var a=1;a=0||(i[t]=e[t]);return i}(e,a);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(i[t]=e[t])}return i}var d=n.createContext({}),s=function(e){var a=n.useContext(d),t=a;return e&&(t="function"==typeof e?e(a):r(r({},a),e)),t},c=function(e){var a=s(e.components);return n.createElement(d.Provider,{value:a},e.children)},p="mdxType",k={inlineCode:"code",wrapper:function(e){var a=e.children;return n.createElement(n.Fragment,{},a)}},b=n.forwardRef((function(e,a){var t=e.components,i=e.mdxType,o=e.originalType,d=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),p=s(t),b=i,h=p["".concat(d,".").concat(b)]||p[b]||k[b]||o;return t?n.createElement(h,r(r({ref:a},c),{},{components:t})):n.createElement(h,r({ref:a},c))}));function h(e,a){var t=arguments,i=a&&a.mdxType;if("string"==typeof e||i){var o=t.length,r=new Array(o);r[0]=b;var l={};for(var d in a)hasOwnProperty.call(a,d)&&(l[d]=a[d]);l.originalType=e,l[p]="string"==typeof e?e:i,r[1]=l;for(var s=2;s{t.r(a),t.d(a,{assets:()=>d,contentTitle:()=>r,default:()=>k,frontMatter:()=>o,metadata:()=>l,toc:()=>s});var n=t(87462),i=(t(67294),t(3905));const o={title:"Kanban",description:"Learn how to work with kanban view in NocoDB.",tags:["Views","Kanban View"],keywords:["NocoDB kanban","kanban view","kanban board","kanban view operations"]},r=void 0,l={unversionedId:"views/view-types/kanban",id:"views/view-types/kanban",title:"Kanban",description:"Learn how to work with kanban view in NocoDB.",source:"@site/docs/090.views/040.view-types/040.kanban.md",sourceDirName:"090.views/040.view-types",slug:"/views/view-types/kanban",permalink:"/views/view-types/kanban",draft:!1,editUrl:"https://github.com/nocodb/nocodb/tree/develop/packages/noco-docs/docs/docs/090.views/040.view-types/040.kanban.md",tags:[{label:"Views",permalink:"/tags/views"},{label:"Kanban View",permalink:"/tags/kanban-view"}],version:"current",sidebarPosition:40,frontMatter:{title:"Kanban",description:"Learn how to work with kanban view in NocoDB.",tags:["Views","Kanban View"],keywords:["NocoDB kanban","kanban view","kanban board","kanban view operations"]},sidebar:"tutorialSidebar",previous:{title:"Form",permalink:"/views/view-types/form"},next:{title:"Actions on view",permalink:"/views/actions-on-view"}},d={},s=[{value:"Kanban View Actions",id:"kanban-view-actions",level:2},{value:"Kanban View Operations",id:"kanban-view-operations",level:2},{value:"Kanban View Stacked-by field Operations",id:"kanban-view-stacked-by-field-operations",level:2},{value:"Change Stacked by Field",id:"change-stacked-by-field",level:3},{value:"Add/modify Stacked-by Field Options",id:"addmodify-stacked-by-field-options",level:3},{value:"Collapse Stack",id:"collapse-stack",level:3},{value:"Delete Stack",id:"delete-stack",level:3},{value:"Reorder Stacks",id:"reorder-stacks",level:3},{value:"Kanban View Record Operations",id:"kanban-view-record-operations",level:2},{value:"Move Records within Stacks",id:"move-records-within-stacks",level:3},{value:"Add a New Record to the Kanban",id:"add-a-new-record-to-the-kanban",level:3},{value:"Edit an Existing Record on the Kanban",id:"edit-an-existing-record-on-the-kanban",level:3},{value:"Delete a Single Record from the Kanban",id:"delete-a-single-record-from-the-kanban",level:3},{value:"Related articles",id:"related-articles",level:2}],c={toc:s},p="wrapper";function k(e){let{components:a,...o}=e;return(0,i.kt)(p,(0,n.Z)({},c,o,{components:a,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"Kanban View allows you to visualise your data using cards as part of various stacks on the board. You can easily rearrange the cards by dragging and dropping them to different stacks. This section will cover all the operations that can be performed on the Kanban view."),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"1010-2 Kanban",src:t(24427).Z,width:"2880",height:"1800"})),(0,i.kt)("h2",{id:"kanban-view-actions"},"Kanban View Actions"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/views/create-view/#create-new-view"},"Create a New Kanban View")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/views/actions-on-view#rename-view"},"Rename an Existing Kanban View")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/views/actions-on-view#duplicate-view"},"Duplicate a Kanban View")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/views/actions-on-view#delete-view"},"Remove a Kanban View")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/views/share-view"},"Share a Kanban View")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/views/views-overview#view-permission-types"},"Lock Kanban View for Edits"))),(0,i.kt)("h2",{id:"kanban-view-operations"},"Kanban View Operations"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/table-operations/field-operations#rearranging-fields"},"Rearrange Fields Within the Kanban")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/table-operations/field-operations#showhide-fields"},"Show or Hide Fields Within the Kanban")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/table-operations/filter"},"Apply Filters to Display Specific Records on the Kanban")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/table-operations/sort"},"Sort Records on the Kanban by One or More Criteria")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/table-operations/search"},"Perform Quick Searches for Specific Data Within Fields")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/table-operations/download#download-data"},"Export Data to CSV or Excel Format")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"/table-operations/field-operations#change-cover-field-kanbankanban-view"},"Change Cover Image"))),(0,i.kt)("h2",{id:"kanban-view-stacked-by-field-operations"},"Kanban View Stacked-by field Operations"),(0,i.kt)("h3",{id:"change-stacked-by-field"},"Change Stacked by Field"),(0,i.kt)("p",null,"You can change the field by which the records are stacked on the kanban view by following the steps below:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Click on the ",(0,i.kt)("inlineCode",{parentName:"li"},"Stacked by")," menu in the toolbar. "),(0,i.kt)("li",{parentName:"ol"},"Click on field name that is currently selected as the stacked-by field. "),(0,i.kt)("li",{parentName:"ol"},"From the dropdown, select the new field by which you want to stack the records. ")),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Change Stacked by Field",src:t(20865).Z,width:"2880",height:"1800"})),(0,i.kt)("h3",{id:"addmodify-stacked-by-field-options"},"Add/modify Stacked-by Field Options"),(0,i.kt)("p",null,"You can add/modify options on the stacked-by single select field by following the steps below:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Click on the ",(0,i.kt)("inlineCode",{parentName:"li"},"Stacked by")," menu in the toolbar. Dropdown lists all ",(0,i.kt)("inlineCode",{parentName:"li"},"Select Options")," that are available on this field. "),(0,i.kt)("li",{parentName:"ol"},"Add/modify as required."),(0,i.kt)("li",{parentName:"ol"},"Click on ",(0,i.kt)("inlineCode",{parentName:"li"},"Save")," to save the changes.")),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Add/modify option on the stacked-by single select field",src:t(9440).Z,width:"2880",height:"1800"})),(0,i.kt)("h3",{id:"collapse-stack"},"Collapse Stack"),(0,i.kt)("p",null,"To ease the view of the kanban, you can collapse the stack by following the steps below:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Click on the dropdown icon on the stack header."),(0,i.kt)("li",{parentName:"ol"},"Select ",(0,i.kt)("inlineCode",{parentName:"li"},"Collapse Stack")," from the dropdown."),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("inlineCode",{parentName:"li"},"Collapsed Stack")," will be displayed as vertical bars on the kanban view as displayed below.")),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Collapse Stack",src:t(63472).Z,width:"2880",height:"1800"})),(0,i.kt)("h3",{id:"delete-stack"},"Delete Stack"),(0,i.kt)("p",null,"To delete a stack from the kanban view, follow the steps below:"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},"Click on the dropdown icon on the stack header."),(0,i.kt)("li",{parentName:"ol"},"Select ",(0,i.kt)("inlineCode",{parentName:"li"},"Delete Stack")," from the dropdown."),(0,i.kt)("li",{parentName:"ol"},"A confirmation dialog will be displayed. Click on ",(0,i.kt)("inlineCode",{parentName:"li"},"Delete")," to delete the stack.")),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Delete Stack",src:t(38357).Z,width:"2880",height:"1800"})),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Delete Stack Confirmation",src:t(65656).Z,width:"2880",height:"1800"})),(0,i.kt)("h3",{id:"reorder-stacks"},"Reorder Stacks"),(0,i.kt)("p",null,"You can reorder the stacks on the kanban view by dragging and dropping the stack to the desired position."),(0,i.kt)("h2",{id:"kanban-view-record-operations"},"Kanban View Record Operations"),(0,i.kt)("h3",{id:"move-records-within-stacks"},"Move Records within Stacks"),(0,i.kt)("p",null,"You can move records within a stack by dragging and dropping the card to the desired position within the stack."),(0,i.kt)("h3",{id:"add-a-new-record-to-the-kanban"},"Add a New Record to the Kanban"),(0,i.kt)("p",null,"On kanban, you can add a new record directly to a particular stack by using ",(0,i.kt)("inlineCode",{parentName:"p"},"Add Record")," button on the stack footer. This opens up an expanded record view where you can enter the data for the new record. Once you save the record, it will be displayed on the kanban view. You can also add a new record to the table, and it will be displayed on the kanban view. "),(0,i.kt)("p",null,(0,i.kt)("img",{alt:"Add Record",src:t(42950).Z,width:"2880",height:"1800"})),(0,i.kt)("h3",{id:"edit-an-existing-record-on-the-kanban"},"Edit an Existing Record on the Kanban"),(0,i.kt)("p",null,"Click on the card on the kanban view to open the record in the expanded record view. You can edit the record in the expanded record view and save it."),(0,i.kt)("h3",{id:"delete-a-single-record-from-the-kanban"},"Delete a Single Record from the Kanban"),(0,i.kt)("p",null,"Right-click on the card to access the context menu and select the ",(0,i.kt)("inlineCode",{parentName:"p"},"Delete")," option."),(0,i.kt)("h2",{id:"related-articles"},"Related articles"),(0,i.kt)("p",null,(0,i.kt)("a",{parentName:"p",href:"/views/view-types/grid"},"Grid View"),(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("a",{parentName:"p",href:"/views/view-types/kanban"},"Kanban View"),(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("a",{parentName:"p",href:"/views/view-types/form"},"Form View")))}k.isMDXComponent=!0},42950:(e,a,t)=>{t.d(a,{Z:()=>n});const n=t.p+"assets/images/kanban-add-record-6d53ed410a1ee0323790496461b53aff.png"},20865:(e,a,t)=>{t.d(a,{Z:()=>n});const n=t.p+"assets/images/kanban-change-stack-a8d26dff838ea4b480a30e2db1d0624f.png"},63472:(e,a,t)=>{t.d(a,{Z:()=>n});const n=t.p+"assets/images/kanban-collapse-stack-8ec03d704b55aba7bbc1510efd0f746d.png"},65656:(e,a,t)=>{t.d(a,{Z:()=>n});const n=t.p+"assets/images/kanban-delete-stack-confirmation-e4b55be5361259d84852953931f63f8c.png"},38357:(e,a,t)=>{t.d(a,{Z:()=>n});const n=t.p+"assets/images/kanban-delete-stack-b51611d8427f1a16a295861c0c91eb94.png"},9440:(e,a,t)=>{t.d(a,{Z:()=>n});const n=t.p+"assets/images/kanban-edit-stack-options-7f9e0324e6068956dae0268031c712f7.png"},24427:(e,a,t)=>{t.d(a,{Z:()=>n});const n=t.p+"assets/images/kanban-e00b90c6413259b626deeeb6659281ea.png"}}]);