Kanban Board

A kanban board is an project management tool designed to help visualize work, limit work-in-progress.

In AppFlowy, the kanban board is one of the ways by which a user can visualize the data stored in a database.

Definitions

Board

contains multiple groups and each group represents as an independent state

Group

contains list of cards and each card represents as a record in database

Card

contains list of properties and each property belongs to a specific FieldType

Grouping field

using the grouping rules provided by the Field to organize all rows

Grouping cell

the FieldType of the cell in row equal to the FieldType of the grouping field

Grouping data

each group has its grouping data that represents as the group id

Group

The UML of the classes used in grouping shown in the following picture.

Generation

The groups are generated by the selected grouping_field. Currently, AppFlowy supports these grouping fields. These groups are generated by its own rules shown below.

FieldType

Single-Select

The number of groups equal to the number of options

Multi-Select

The number of groups equal to the number of options

URL

The number of groups equal to the number of different URLs in Cells

Checkbox

Only two groups

Date time

Splits up the range of date times into groups according to differing levels of recency. For example, last month, next seven days, next year.

In all of the possible field types except for the checkbox, there exists a special, non-removable group called the No Status group. It contains the cards that the grouping cell doesn't contain the grouping data specified by the grouping field.

Modifying Groups

Groups can be modified in several different ways:

  • create a group when the grouping field is single select or multi select field type by clicking on the plus button located at the right-end of the kanban board and then submitting a name for the group.

  • hide a group by clicking on the respective action in the more actions popup. The hidden group and its cards will no longer be shown in the board, but rather collapsed in the "hidden groups" section located at the left-end of the kanban board

  • delete a group by clicking on delete button in the more actions popup. Note that deleting a group will also delete any cards which belong to it.

  • rename a group when the grouping field is single select or multi select field type by clicking on the name of the group and then submitting a new name.

  • groups can be reordered by drag and drop.

Card

Create

To create a card, either click on the plus button on the top-right corner of a group, or on the "Create New" button at the bottom of a group. The created card will automatically fill in the cell corresponding to the grouping field according to the group in which it was created. For example, when the grouping field is a Single-Select field, creating a card in a group whose option is "To Do" will fill the data of the cell with that option.

Delete

Deleting a card from a group is analogous to deleting the entire row in the database.

Update

Moving a card from Group A to Group B via a drag-and-drop will set the data of the grouping cell from A's grouping data to B's grouping data. And vice versa, updating the data of the grouping cell to the group data of a group other than the current one it is in, will move that card over to that group as well is equal to moving this row to that group.

Shortcuts

A set of keyboard shortcuts are available to users to speed up their interaction with the kanban board.

  • ⬆️ and ⬇️ for navigation. If this doesn’t work immediately, first click on the region within the kanban and try again

  • Shift + ⬆️/⬇️ to expand the selection

  • Esc to clear focus (deselecting the selected cards)

  • Backspace/Del to delete when one or more cards are selected

  • Enter when 1 card is selected to open it in the row detail page

  • E when 1 card is selected to begin editing (then esc to complete as usual)

  • N when 1 card is selected to begin adding a card to that group, characterized by the bottom text field gaining focus

  • Shift + Enter to create a new card below the current one when a card is selected OR when a card is being edited

  • Cmd + Shift + ⬆️ or Ctrl + Shift + ⬆️ to create a new card above the current one when a card is selected

  • , (comma) to move the selected card to the previous stack, if it exists

  • . (period) to move the selected card to the next stack, if it exists

PreviousCalendarNextBackend

Last updated