Kanban View

Overview

Kanban View is a way to display data by grouping it and listing the data in card style under each group.

Application Scenarios

Kanban View is mostly used in scenarios with classified data such as task management, customer management, etc.:

Task Management: Classify and display in order according to the current status of tasks Customer Management: Classify and display according to the customer's region or customer status

Settings

Setting	Description
Column Width	Set the width of kanban columns
Column Grouping Field	Group by field data and display as kanban columns in the view
Row Grouping Field	Group by field data and display as kanban rows in the view. Optional

TIP

After dragging data to another group, the value of the grouping field in the data will be automatically changed

Card Style

Style settings for the card part of the view, supporting multiple card rendering methods.

Since other views also use this configuration, it is uniformly explained in the Card Style chapter.

Example

The following takes task management as an example to demonstrate the use of kanban

Create a data table Task Table that the view depends on

Identifier	Field Name	Field Type	Description
no	Number	Number	Number calculation expression: T${String.lpad(seq,6,'0')}
name	Name	Single Line Text	Task name
progress	Completion	Decimal
state	Status	List Selection	Options: Not Started, In Progress, Cancelled, Completed
who	Responsible Person	User Selection
startDate	Start Time	Date
planStartDate	Planned Start Time	Date
planFinishDate	Planned Finish Time	Date
finishDate	Actual Finish Time	Date
descs	Task Description	Rich Text	Business field
docs	Task Documents	Attachment	Business field
taskChildren	Sub-tasks	Sub-object	Used to build tree structure

Status Enumeration Values

Option	Identifier
Not Started	unstart
In Progress	progress
Cancelled	cancel
Completed	complete

Field styles on cards:

1. When the following conditions are met, set the text color of the Start Time field to #5D7092

   ${rowRecord.state == 'unstart'}

2. When the following conditions are met, set the text color of the Start Time field to #5B8FF9

   ${rowRecord.state == 'progress'}

3. When the following conditions are met, set the text color of the Start Time field to #FAAD14

   ${rowRecord.state == 'cancel'}

4. When the following conditions are met, set the text color of the Start Time field to #57CA8C

   ${rowRecord.state == 'complete'}