Rappid flowchart

Rappid is a flexible framework that allows for the creation of many different types of interactive UIs, from a flow chart (as implemented here) to an ancestry graph, or any of the other examples here. 
Rappid is the paid version of the open-source JointJS library, and costs $2500/developer for a license.
Rappid and JointJS Comparison
Overview of Rappid and JointJS
Demo
​Demo editor ​
​Run mode ​
Username: username
Password: password
​
Setup
In order to set up a working integration in production mode, the following things are needed:
1.Rappid license
1.We can work with a trial license prior to releasing the feature. This causes an alert popup to show each time the plugin element is loaded, warning that the app does not have a license.
2.AirDev Rappid plugin (private plugin as of November 2021, talk to Chris or email [email protected] with the ID of your Bubble app to get this)
1.For new integrations, we may need to make a copy of the plugin and add the new license (not sure)
Plugin element
The "Flow chart (bundled)" element is intended to be used on a standalone page with minimal Bubble elements, as in the demo page. Functionality within a popup or with multiple elements on the same page may be buggy, and showing/hiding the flow chart editor element may also result in bugginess.
Top-level properties/inputs
Theme (Dropdown)
Apply an overall theme, choosing from Material, Modern or Dark.
Custom colors (yes/no)
Set to "yes" to be able to set custom colors in the below fields
Toolbar background color
Set a custom color of the toolbar background
Toolbar separator color (material theme)
Very specific field to allow a custom color in the vertical separators for sections of the toolbar. Only applicable when the material theme is selected
Toolbar separator color (modern/dark themes)
Very specific field to allow a custom color in the vertical separators for sections of the toolbar. Only applicable when the modern or dark theme is selected
Toolbar separator boxshadow color (dark)
Set a boxshadow color for the dark themed toolbar. Only applicable when the dark theme is selected
Actions
Export
Export the saved graph in order to save it and be displayed in the element again later. This does NOT save a PDF or other image export of the graph - it saves a JSON text that can be loaded into the plugin later on.
Import
Display a saved graph on the flowchart editor element. 
Input: JSON (text), a JSON which was previously exported from the plugin element.
Add image to list
Add an image to the list of images that the Image type of block can use within the flowchart. This allows users to add custom images to their graphs.
Another use case for this is to assign custom images rather than the default images that users can pick from. If this is cumbersome/hard to use, we can develop a different way to specify these images.
Inputs: image URL
Display sample graph
Show a hard-coded sample graph. Useful when testing the plugin - not very useful for an end user.
​
Events
JSON exported
Triggered when a new JSON text is exported
PDF exported
Triggered when a new PDF file is exported
Exposed states
Exported JSON (text)
JSON that can be imported into the plugin later on using the Import action.
PDF (file)
Generated PDF that is created when the user presses the PDF button in the plugin toolbar
General notes
If there are other features necessary, like a "Clear" or "Reset" action, or a Bubble action that generates a PDF or anything else, please contact [email protected] or Chris with a request.
Technical notes
The plugin's code is located in a private GitHub repo here and must be bundled using Webpack. This is to stitch together a number of JS files - the demo "Kitchen sink" flowchart app had many different CSS and JS files, and they are combined into just a few files via this flow.
Old versions of the plugin had the JS code directly pasted into the Bubble plugin editor. However, this was very unweildy with such a large code base, so the more sophisticated WebPack flow was implemented in order to tie together the many files in the correct way.

Resources - Previous

QR codes

Next - Resources

Recursive workflows

Last modified 8mo ago

Copy link

Outline