Forum Academy Marketplace Showcase Pricing Features

Draggable Kanban Board

I am aiming to complete a basic kanban board where I can drag the j query draggable elements from one drop area to another and it stay and save. and record that movement.

The card will have text and an image.and other various data.

I have made 3 seperate drop areas. I can’t get the element to drop into one

There’s a good example in the template store that I think bubblewits made. @levon could you confirm? I think I remember you posting the fake-trello app on here a while ago.

I’d like to build mine from scratch. I don’t have money for a template. But If I could get any pointers towards a tutorial. Or anything else would be amazingly helpful. I appreciate it all.

1 Like

Bump I just need to basically drag the drop element from one drop area to another.

If you haven’t already, I would suggest reading this thread:

And take some time to look through this forum app example.

1 Like

You have to create a workflow that triggers once a draggable group has been dropped onto the drag/drop area.

This workflow should change the data field. For example one group contains items with data field Stage = “Prospect” and once it is dropped to second drag/drop area the workflow changes this field to Stage = “Customer contacted”.

Each of the groups / kanban boards are displaying only items according to the Stage field accordingly.

Hope you understand.

1 Like

A quick screenshot of the workflow? Deeply appreciated. I am stlil green.

Also do I need a repeating group in the drop area. Or the drop area in the repeating group?

If anyone has some sample apps they want to share. That would help tremendously.

You should insert the repeating group into the dropzone. Like in below (I have dragged the repeating group away so you can see the outline of the dropzone):

Regarding the workflow this is just a simple data field change:

That’s correct :slight_smile: here is the link to the template page

Thanks,
Levon.

Founder at Bubblewits - Bubble Certified Partnera


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

1 Like

I am terrible lol.

The forum app example no longer works. It seems people didn’t respect the effort to have it available for everyone to learn from. I’d like to see it fixed.

Fantastic template.

Well, it has been a while. :stuck_out_tongue:

In any case, did a bit of quick cleanup that shows the basic functionality.

2 Likes

Thank you. :+1:

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

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’

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