If you’ve ever kicked off a design or software project with a flowchart, you know how valuable they can be in planning (& executing) a well thought design. Unfortunately, the number of flowchart mapping apps that are both user friendly and feature rich are slim to none. I am wondering if Bubble can be used to build something like a flowchart builder (outputting something similar to image the blow), with shapes that can be dragged and dropped onto an art-board and connected by lines/arrows.
I started one approach to it as outlined below, but am out of ideas when it comes to connecting shapes with lines. Does anyone have maybe a different approach to what I’ve tried, or can expound upon it?
Probable Plugins:
Draggable Elements
One Considered Approach:
Database: Create a data table named “tbl_map.” Create another data table “tbl_map_element,” add the field “map_id” with field type = “tbl_map.” Add an “element_type” text field. Add 8 yes/no fields set to “false” and labeled “element_is_arrow_[#1 through 8]”.
- Add a new page with data type = “tbl_map.” Build a grid using a repeating group (same number of columns as rows). Set data type to “tbl_map_element” and source to "do a search for ‘tbl_map_elements’ with “map_id”=current page’s “tbl_map.” Populate the data base according to the size of your grid.
- Group (“Group Cell”) 2 shapes (for simplicity / MVP) in a cell and set both to hidden on page load. Ex: one default shape element and another with rounded corners set to 100. Set the group’s (“Group Cell”) data type to “current cell’s tbl_map_element.”
- Create a floating group ("FG Toolbar) outside of the repeating group to use as a toolbar, and add icons/shapes representing the two elements you just drew.
- Setup a workflow so that when an icon in the toolbar is clicked, it sets a custom state (ex: “active_tool”) of the floating group to ___ (whatever you want to call the shape).
- Setup a workflow so that when “Group Cell” is clicked make changes to parent group’s map_element, “element_type” = FG Toolbar’s “active tool.”
- Add visibility conditions to each shape corresponding to its parent’s “element_type” field in the database.
- Add one hidden outgoing and one hidden incoming arrow icon (8 total) to each side of “Group Cell.” Add visibility conditions to each arrow, referencing the database such that when parent group’s tbl_map_element’s “arrow [#]” (I would go clockwise, with evens representing incoming and odds representing outgoing) this icon is visible.
- Pair the arrows that share the same side together. (4 Groups total. Label “Group Arrows [up/right/left/down]” accordingly). Set background and border styles of all groups to “none.”
- Add a condition to each of the four “Group Arrows __” where when this group is hovered, background style = flat color, background color = X.
- Add workflow when page is loaded set FG Toolbar’s “outgoing” to “yes.”
- Add workflows for when each of the four arrows groups is clicked set FG Toolbar’s “active_tool” to “arrow” > make changes to parent group’s map_element’s element_type = “arrow” > make changes to parent group’s map_element’s element_is_arrow_[#odd] = yes only when FG Toolbar’s outgoing is “yes” > make changes to parent group’s map_element, element_is_arrow_[#even] = yes only when FG Toolbar’s outgoing is “no” > set FG Toolbar’s outgoing to “no” only when FG Toolbar’s outgoing is “yes” > set FG Toolbar’s outgoing to “yes” only when FG Toolbar’s outgoing is “no.”
Dream Features:
- Infinite artboard space to continue building