[New Plugin] Draw Flow - Drop Drag Flow Chart Canvas

Showcase
1

Hey Bubblers!

I’d like to introduce you to my new plugin “Draw Flow” this utilises jerosolers Draw Flow Library,

ezgif.com-video-to-gif-converter

Draw Flow allows you to create data flows quickly and easily, connecting the flows and outputting JSON to collect the inputs on those flows

:white_check_mark: Customise the headers, icons, inputs, and colours of blocks using JSON
:white_check_mark: Easy Drop Drag Canvas
:white_check_mark: Output Data to JSON for use in workflows etc

Utilising JSON you can customise your own blocks for selection, with an easy drop and drag and connection of blocks on the Canvas

:point_right: Demo Here: https://flowy-13592.bubbleapps.io/
:point_right: Plugin Here: Draw Flow Plugin | Bubble

Would love any feedback, ideas for more additions or questions, please feel free to reach out!

4 Likes
2

This looks really cool.

Would you be able to demo a few simple use cases? I have a few ideas in mind but not very sure how this can be implemented at a basic and advanced level inside Bubble.

3

Hey @sam.cr thanks!

Sure I can put a couple of demos together,

One of the use cases I had for this was for users to be able to build their own workflows within your app.

I.e you stipulate what blocks with inputs they can drop onto the canvas and then in the backend when you receive the JSON schedule workflows.

e.g When Thing is created (get inputs from block to tell you what thing) > Send Email (get the inputs from the block to tell you who to send to)

1 Like
4

Cheers mate

This is exactly what I want to do. I have a customer satisfaction management app where businesses can analyze support tickets. I want my users to be able to visually build automation workflows based on support ticket score. For example, if score is below 5, send email to manager, else a different action.

I think the term I’m referring to is branching.

I have not worked with JSON or any code before so it would be very helpful to see some examples put together in the editor

5

Hey @sam.cr I put together the below - which kind of illustrates your example. From this you’d need to extract what you need from the JSON output and create some workflows to manage your if/then/else process

I have included the JSON code used to create these blocks, yell out if I can help further,

[
  {
    "label": "Get Support Score",
    "iconClass": "fas fa-star-o",
    "description": "Utilise the Support Score to determine follow up",
    "fields": [
      {
        "header": "Support Score",
        "label": "Select Option",
        "type": "dropdown",
        "options": ["More than 5","Less than 5"]
      }
    ]
  },
  {
    "label": "Send Email",
    "iconClass": "fas fa-envelope",
    "description": "Send an automated email from content within the workflow",
    "fields": [
      {
        "header": "To",
        "label": "To Field",
        "type": "input"
      },
      {
        "label": "Subject",
        "header": "Subject Field",
        "type": "input"
      },
      {
        "label": "Body (HTML):",
        "header": "Body Field",
        "type": "textarea"
      }
    ]
  },
  {
    "label": "Send SMS",
    "iconClass": "fas fa-sms",
    "description": "Send an automated SMS from content within the workflow",
    "fields": [
      {
        "header": "To",
        "label": "Recipient's Phone Number",
        "type": "input"
      },
      {
        "label": "Message",
        "header": "Message Field",
        "type": "textarea"
      }
    ]
  }
]

Cheers

6

uh i like it a lot - i think you could give the user also an styling option for the css so i can add types in css and then the data with your json strukture… looks pretty good to be honest and is highly felexible.

Also a good thing is a button function and a “is focused” function so u can get the id of the json that is selected.

i think then u able to build everything really good.

1 Like
7

Hey @buero thanks so much!

Thanks for your feedback, I’ll take a look and hope to incorporate those additions in the next update

1 Like