Yes, 100% possible! 
There’s three things you will need to know how to use to achieve this:
- The Fetch Data / Import actions
- The Draw API
- “Selected Coordinates” Exposed State
Fetch Data / Import
First create a test page and place a whiteboard on the page (provide API keys and board code as per usual). You’ll want to place a button somewhere, call it Fetch Data. After creating the desired shape, setup a workflow for when this button is clicked. When this button is clicked, run the action “Fetch Data”. Next, create an event using the “Fetched Data is Ready” event. On this event, save the whiteboard data using the “Data (JSON)” exposed state to the database.
Next, place another button this time called “Import”, and when it is clicked, run the action “Import Data”. Make sure to provide the data from where you saved it in the database.
What you have just created is a basic save and then load whiteboard data flow. This is already really powerful, but now let’s make it more interesting using dynamic data from your database. This might require some trial and error (be warned!)
The Draw API
Create a new type of data “Test” inside of your database. Create two fields: 1) JSON and 2) Dynamic Text. Copy the whiteboard data you got from the fetch data action from before, create a new thing of type “Test” and paste that whiteboard data inside the JSON field. Create another exact copy of this in your database. In the first “thing” set the dynamic text field to “This is a test string” and in your second one fill it with “this is some crazy testing going on here!”. Here, what we have done is created two exact templates with some differing texts.
"Selected Coordinates" Exposed State
Next, go back to your whiteboard preview where you created your template. Find where you want to put some text and just place an empty text. Next, place a button on the page and call it “Listen for Select”. When the button is clicked, run the action Listen for Selected. Next, place a text somewhere on the page and set it’s value to the whiteboard “Selected Coordinates” exposed state. This text should populate with some coordinates later.
Next, load the page and click the Listen for Selected button. Now select the text we placed in the whiteboard before. You should see some coordinates show up in the text that we placed in the editor somewhere on your page. Save them somewhere safe. Congrats, we’re almost done!
All together now
Finally, what you’ll want to do is clear the current whiteboard. Create a workflow for “When the page is loaded” and the first action will be to import the whiteboard data from the first “Test” thing we created earlier. Now run the action “Draw Text” and use the value saved inside the “Dynamic Text” field we created and use the coordinates that we saved from before in the X and Y fields so that we make sure we’re placing this text where we want it to be. Et voila!
Now if you want to change the value of the text on page load, you just got to pull from the second “Test” thing we created and the text should change from “This is a test string” with “this is some crazy testing going on here!”
Now I understand this is a little bit arduous but it works and I’ve done this several times in real apps! Once you get the hang of it, this becomes a super powerful and unique tool and opens up a lot of creativity
Let me know if you have any questions
Cheers
Whiteboard Pro is a powerful way to add a real-time collaborative whiteboard to your app. Lets you create apps like Paint 3D, Figma, Miro or Canva
Whiteboard Pro brings new and exciting features that build upon Whiteboard Lite. To try Whiteboard for free, see Whiteboard Lite.
Want to give it a try? See the Demo
