How to create a Kanban board

I have tried to set up a Kanban board but it’s not working as expected.

  1. The data is not being updated.
  2. The card moves back to the original list.

What I have done is -

  1. Created a RG (in red) with Type of content as Job post which searches for job posts with Status as Interested. Another RG which searches for job posts with Status as Applied.

  2. A Drop area (in green) with Type of content as job post with Data source as Current cell’s job post.

  1. A Drag/Drop Group (in blue) with Data source as Parent Group’s Job Post.

  1. A text (in white) with dynamic data as Parent groups’ job post’s company name

The workflow is as such -

I want the status to be updated when a card is dragged from one list to another but it is not working. What am I doing wrong?

We added a Kanban board to our widget collection in openBuild that you can use!

This is what it looks like: (24)

Check out a live preview here: Kanban Widget

This widget comes with workflows and is close to plug and play. You only need to go through a few steps to successfully paste the widget in your app.

Step 1

If you haven’t already, install the openBuild extension. You can do that here.

Step 2 (Required plugins)

Make sure that the following plugins are installed:

  • Draggable Elements (by Bubble)
  • openToast (by Ideable)

Step 3 (Setting up your database)

Go to the tab ‘Data’, go to the tab ‘Option sets’ and add a new option set called “Status”. You do not need to create new attributes. Add the following options:

  • New option = “Backlog”
  • New option = “In progress”
  • New option = “Review”
  • New option = “Done”

Step 4

Now go to the tab ‘Data types’ and create a new type called “Task”. For this new type, create the following fields:

  • Field name = “Description”
    • type = text
  • Field name = “Order”
    • type = number
  • Field name = “Status”
    • type = Status

Step 5

Go to the Kanban widget in the openBuild extension and hit ‘Pick me’. Bubble will recognize that the Kanban widget is a page and will show the popup ‘Paste a page’.

Step 6

Modify the page name if desired and paste the page by hitting ‘CREATE’

You’re done! Hit preview to check it out.