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

Run mode
Username: username Password: password

Setup

In order to set up a working integration in production mode, the following things are needed:
  1. 1.
    Rappid license
    1. 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. 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. 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.