Is this idea possible with Bubble?

Questions
1

Hi there!

Anyone know if creating something like this is possible with Bubble?

original-b061d51be7f67d94c8f7757ec77c022c
original-b061d51be7f67d94c8f7757ec77c022c1024×1311 89.4 KB

2

I only didn’t excercise the popup on selected text. Everything else is definitely possible.

3

Might be done using group focus.

1 Like
4

That seems to be an editor. I’m not sure whether there’s a plugin with exactly the same functionality, but there are several editors available, quite sure one would fit, though maybe not exactly that way.

5

Anyone know if creating something like this is possible with Bubble?

Which bit are you asking about?

All of it?

In any case, yes… if you know what you’re doing you can recreate that entire form in Bubble without too much trouble.

(If you’re asking specifically about the formatting tooltips for the Rich Text editor, that’s a standard feature of the Bubble Rich Text Input, although you’ll need to use some custom CSS if you want it to be light in colour, rather than the default dark grey)

Although I’m guessing your question is more about either the drag-and-drop re-ordering, or how to create and store dynamic form data in general?

6

Sorry. I meant the way they can create the “forms”. The drag and drop isn’t really neccesary.

7

Right, well then that makes it even easier.

But to answer the original question… yes it’s definitely possible.

8

Haha wish it sounded easy to me aswell. What direction would you point me in to achieve this?

9

I started in bubble watching a lot of videos of https://www.youtube.com/@BuildingWithBubble

He teach you how to create specific apps with a lot of details that you can learn

1 Like
10

I never said it was easy… just that it’s a lot easier than it would be if you wanted to include drag and drop functionality.

There’s quite a lot to it…

But basically, you’ll need to establish the ‘Section Types’ first - I’d probably use an option set for those, and include the ‘Name’ (e.g. ‘Target Duration’), ‘Description’ (e.g. ‘Description’), and ‘Icon’ (e.g. ‘[fa]clock-o[/fa]’) as attributes.

Then have a datatype for Form Section that includes a field of ‘Section Type’

You’ll also want a datatype for Form

To display the form sections, use a RG, and have a Group for each Section Type inside the RG cell, styled however you like, with the relevant input types, and show the relevant group based on the current cell’s Section’s Section Type.

When one of the Add New Section menu items is clicked, create a new Form Section of the relevant type and add it to the Form

To save the values you’ll need a datatype for Form Section Value with a relationship to the Form Section, and a field of the relevant type for the value.

Then you’ll need a way to either create new Form Section Values or update existing ones when the final Save/Submit button is clicked (I would use custom states, outside the RG, to hold lists of texts that contain the value and the relevant Form Section or Form Section Value ID).

2 Likes