Installation & Usage Instructions 1. Add the element

Install Kanban Board Pro – Web and place the Kanban element on your Bubble page.

Give the element enough width and height for the number of stages you want to display.

The board automatically handles horizontal navigation when necessary.

2. Create your Card Data Type

Create a Bubble Data Type for your Kanban cards.

Recommended fields include:

Field Suggested Type
title text
description text
stage text
created_at date
due_date date
assignee_name text
assignee_id text
assignee_avatar image
tags list of texts
priority text
status text
progress number
value number
image image
card_metadata text

A position field is not required.

Kanban Board Pro automatically calculates the visual position of every card inside its current stage.

3. Configure the stages

Provide the stage IDs and stage names using the corresponding plugin fields.

Example:

Stage IDs

todo, in_progress, review, testing, approved, done

Stage Names

To Do, In Progress, Review, Testing, Approved, Done

The order of the values must match.

You can also provide colors and WIP limits for each stage.

4. Connect your cards

Connect the corresponding card fields to a Bubble search, for example:

Search for Kanban Cards

Provide matching lists for card IDs, titles, descriptions, stages, images, priorities, statuses, tags and other information you want displayed.

The lists should follow the same record order.

5. Add Card

The plugin includes a native + Add Card button.

Clicking the button opens the built-in creation popup.

The user can enter the card information, select the destination stage, optionally upload an image and click Create Card.

Use the plugin's Create Card Requested event to create the record in your Bubble Data Type using the corresponding new_card_... states.

6. Edit Card

Select a card on the board.

The Edit Card button automatically becomes available.

Click it to open the same native popup in Edit Mode. Existing card information is automatically loaded.

Use the Update Card Requested event to find the record using edit_card_id and update it with the corresponding edit_card_... states.

Users can also change the card's stage directly from the Edit popup.

7. Moving Cards Between Stages

When a card is dragged to another stage, the plugin publishes the moved card and destination stage information.

Use:

When Kanban Board Pro → Card Moved

Find the card using:

moved_card_id

Then update:

stage = target_stage_id

No position database update is required.

8. Card Reordering

Cards can be freely reordered inside their current stage.

The plugin automatically recalculates their visual order and displays the current position in the circular badge next to the card title.

Positions are managed internally by the board and do not require a Bubble database field or workflow.

9. Search

Use the built-in search box to find cards.

Search results update dynamically.

The refresh/reset icon inside the search field clears the current query and restores the complete board.

10. Filters

The board supports dynamic filtering by:

filter_assignee_id
filter_priority
filter_status
filter_tag

Leave a filter empty when it should not restrict the board.

11. WIP Limits

Use the stage WIP limit configuration to restrict the maximum number of cards allowed in each stage.

For example:

0,1,3,0,0,0

0 means unlimited.

A stage configured with 1 can contain a maximum of one card.

The current WIP information is displayed directly in the stage header, and the board prevents additional cards from being moved into a full stage.

12. Dark Mode

Use the plugin's Dark Mode field to dynamically switch between Light and Dark themes.

The value can be connected to a Bubble expression such as:

Current User's dark_mode

Changes are applied immediately without requiring a page reload.

13. Native Popup States

The plugin provides popup states including:

add_card_popup_open

and

add_card_popup_closed

These can be used when your Bubble workflows need to know whether the native Add/Edit popup is currently displayed.

Important

Card ordering is handled visually and automatically by Kanban Board Pro.

You do not need to create or maintain a position field in your Bubble database.

For persistence, save business information such as the card's stage, title, description, status, priority, tags, assignee, image, dates and other relevant data.