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
Username: username
Password: password
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)
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.
- 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
- 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.
- JSON exported
- Triggered when a new JSON text is exported
- PDF exported
- Triggered when a new PDF file is exported
- 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
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.
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.
Last modified 1yr ago