Need help creating a Kanban board in my app

Need help
1

Hi there

I am creating an order management tool and want to have a Kanban style board that shows what stage of the production process each order is in.

Here’s what it looks like in the app:

Screenshot 2016-09-07 15.09.54.png1269×644 45.8 KB

Here’s how it needs to work:

  • Every order that has a particular status (I.e. Order Status = Active) should appear on the board as a card. Order Status is a field against the order in the database.
  • Every card should be in the column relative to the stage of the production cycle it is in. I.e. Orders that have ‘Stage = Ordered’ should appear in the ‘Ordered’ list. Stage is a field against the order in the database.
  • Users should be able to drag and drop cards between each list/stage, and doing so would trigger a workflow that would update the ‘Stage’ field. I.e. Moving a card from the Ordered column to the Shaping column would update the ‘Stage’ field of that order from ‘Ordered’ to ‘Shaping’.

This is all pretty standard Kanban board functionality seen in tools like Jira, Salesforce (the Lightning Experience), etc. but I’m unsure whether it’s possible to do in Bubble.

Can anyone advise if they’ve had any success doing something like this before?

Thanks so much!

Aaron

1 Like
2

You’re in luck! You can create this type of functionality with Bubble. Take a look here [New Feature] Draggable/droppable elements

3

Also look at @vega.andrew post Drag - Drop Reorder Your Repeating Group

1 Like
4

You might also want to check this thread here 🤹‍♀️ Trelly - Projects & Tasks like Trello Template from Zeroqode - #4 by vega.andrew

Thanks,
Levon.

Founder at Bubblewits - Bubble Certified Partner

http://bubblestore.io – a place to buy Bubble templates for landing pages, e-commerce, workflows, APIs etc.
http://iambubble.com - one page Bubble demo
http://builtonbubble.com - Collection of apps built on Bubble

5

You can now use our Kanban board from the widget collection in openBuild!

This is what it looks like:

ezgif.com-gif-maker (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’

Your Kanban widget should work! Hit preview to check it out.

6

Hey Guys!
I recorded a video tutorial on how to create a kanban board do watch it if you want to create a kanban board in bubble’s new responsive engine.