Forum Academy Marketplace Showcase Pricing Features

[openBuild] UI Builder & Personal Library for Bubble: easily build custom design in your bubble app

Please let us know which elements so we can have a look! Thanks!

There were a few others but I can’t remember… I’ll update you :slight_smile:

1 Like

Exciting news!! We just released a Kanban board!

The second widget that we added to the widget collection is a Kanban board, basically a project management board. This allows you to create tickets and drag & drop them from one stage to another on your board.

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 (Required plugins)

Make sure that the following plugins are installed:

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

Step 2 (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 3

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 4

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 5

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

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

2 Likes

Hi there,

How customisable is this? Can you add / edit columns? And divide into swimlanes, etc.?

Thanks!

edit: I’m referring to the Kanban widget.

3 Likes

@VKB you can very easily add or edit columns. To do this, just enter the names of the columns that you need in the option set instead of ‘Backlog’, ‘In progress’, etc. (And of course you can also change the name op the option set itself)

If you want to have swimlanes I think you need to do some customization yourself :slight_smile:

Is the build automatically friendly to all device sizes? Like mobile and tablets?

1 Like

Hey @asiedu313, sorry for my late reply, but you’re right: all the components automatically adjust to the screen size!

1 Like

Exciting news! We just added a Question & Answer widget to openBuild!

The Question & Answer widget enables your users to publicly ask questions and receive answers from other users.

What the Question & Answer widget looks like:

ezgif.com-gif-maker (26)

Check out a live preview here: Question & Answer 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

The field- and option names in the database are case sensitive, so make sure to enter them exactly as specified below

Go to the data tab in your app and create a new type called “Question”. For this new type, create the following fields:

  • Field name = “Title”
    • type = text
  • Field name = “Question”
    • type = text

Step 2

Create another, new data type in your database and call it ‘Answer’. For this type, create the following fields:

  • Field name = “Answer”
    • type = text
  • Field name = “Parent Question”
    • type = Question

Step 3

Go back the data type ‘Question’ and add the following new field:

  • Field name = “Answer”
    • type = Answer - check ‘This field is a list’

Additional Step

This widget uses a few more data fields relating to the data type ‘User’, namely first name, last name and an avatar.

You might have already created these fields yourself. In that case, there’s no need to add new fields. Keep in mind that after pasting the widget in your app, some issues might arise and you’ll need to connect these entries to the right ones within your own database.

If you haven’t created these fields already, go to the data tab in your app and go to data type 'User’. Add the following new fields:

  • Field name = “firstName”
    • type = text
  • Field name = “lastName”
    • type = text
  • Field name = “avatar”
    • type = image

Tip: If you haven’t already created an app, we recommend starting your app on our openBase Starter Template. This not only includes the data fields as mentioned above but also some ‘dummy users’ and allows you to use our style system.

To add the openBase Starter template to your templates, go to this link and hit ‘use template’. When creating a new app, you will now see the openBase Starter Template appear in the list of templates.‌

Step 4

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

Step 5

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

The Question & Answer widget should work! Hit preview to check it out.

1 Like

Exciting update!! We just added a Testimonial widget to our openBuild library!

For those that don’t know, openBuild is a chrome extension for Bubble that gives you access to hundreds of UI components and widgets to build beautiful apps on Bubble. Learn more about it here.

The Testimonial widget allows you to show various quotes in combination with names and profile images on your landing page or app. The quotes are presented one by one in a repeating group and users can navigate between them by using the arrow buttons.

What the FAQ widget looks like:

ezgif.com-gif-maker (29)

Check out a live preview here: FAQ 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

The field- and option names in the database are case sensitive, so make sure to enter them exactly as specified below

Go to the data tab in your app and go to data type 'User’. Add the following new field:

  • Field name = “quote”
    • type = text‌

If your app was created based on the openBase Starter Template, the user already comes with the following fields - in this case you don’t have to do anything. If not, also add the following new fields:

  • Field name = “firstName”
    • type = text
  • Field name = “role”
    • type = text
  • Field name = “avatar”
    • type = image

To make sure that the fields won’t show empty when previewing the widget, you can enter some dummy data manually. To do this, go to the Data tab, go to ‘App data’, hit ‘All users’, hit the pencil icon in the table and enter a quote, firstName, role and avatar. Do this for one or few users.

Step 2

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

Step 3

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

The Testimonial widget should work! Hit preview to check it out.

1 Like

Components simply will not paste into the edit from the chrome extension. Please help!

Its the Grid Components. Those don’t work and I just upgraded @jeroen-romenij

It’s actually nothing beside reusable elements that work

Do you right click in app and click paste from openbuild?

Hey @ben29 ,

After you pick the component from the extension, right click in the bubble editor, and you need to select ‘Paste from openBuild’.

Let me know if that works!


i am able to use it can someone help me ?

Hi, does your browser accept third party cookies? If they are blocked you could be having issues.

Can this template be applied to an existing app project so as to start reworking pages to be more updated and responsive? Or is it just for starting a new project from scratch?

1 Like

Hi @underhill.dan,

You would need to use openbuild framework from the start, as more than a UI kit, openbuild is actually a framework using professional development principles and methods. Having said that, a lot of our users are actually rebuilding their apps into openbuild to take advantage of the scalability and flexibility of the framework.

Happy to discuss if you are willing to take that path!