Save the board’s image

In Wonderful Whiteboard plugin, you can take the current screenshot of the board and save it to the your database.
⚠️
You need to enable your Backend Workflows. Here is a guide to do it → https://manual.bubble.io/core-resources/application-settings/api#enable-workflow-api-and-backend-workflows
You need to use these:
  • Get Image action
  • Whiteboard’s image exposed state
  • Save file API call
  • Backend Workflows
  1. Draw a button into the page to get current image of the board
    1. Image without caption
  1. When the Button is clicked > “Get Image” action will work
    1. Image without caption
With the Get Image action, the Whiteboards Image exposed state will have a value.
  1. Add a new event to check that the Wonderful Whiteboard’s Board Image is saved with the “Get Image” action.
    1. Image without caption
  1. If this condition true, run the “Save File” API Call
    1. Image without caption
  1. Enter the values
      • Website home: Your Website home URL.
      • Endpoint name: The name of the event you will use in the backend workflow.
      • filename: Your file’s name.
      • content: Wonderful Whiteboard’s board image.
      • boardCode: Your whiteboard’s board code.
      Image without caption
  1. Go to the Backend Workflows and create a new API workflow with “save-file” name.
    1. Image without caption
  1. Click on the “Detect data” button.
    1. ⚠️
      After doing this a window will open and show you a URL. You will see the text "initialize" at the end of the endpoint name in this URL. So we need to go back to where we ran the "Save File" API call and add "initialize" next to the endpoint name just for the first time.
      Image without caption
  1. Go to your whiteboard page and change the endpoint name like this. After detecting data we will delete the “initialize” again.
    1. Image without caption
  1. Go back to the Backend Workflows and click on the “Detect Data” again.
    1. Image without caption
  1. While this window open, go to the preview and click on the button to run the action.
    1. Image without caption
  1. Click on it.
    1. Image without caption
  1. Back to the backend workflows. You will see the detected data. Click on the “SAVE” button.
    1. Image without caption
  1. After this, add a new action to save the image.
    1. Image without caption
  1. Go back to “Save File” API Call and delete the “initiliaze” text.
    1. Image without caption
It’s done! 🎉
Image without caption
Share