I have a workflow that calls three different APIs in sequence → get the thing, create the thing, activate the thing. I have a spinner+text that’s visible to the user while this is happening, and I’d like to update the text as each API call finishes.
I’ve tried a number of different approaches, but I’m unable to update the string element while the API calls are happening. Specifically: I can update just before API #1 runs, and immediately after API #3 runs, but that’s it.
I’ve tried: a) running JavaScript that sets getElementById().innerHTML; b) triggering custom events in between the API calls; c) setting custom states for API status; and d) storing the output of API #1 in a custom state, so APIs #2 and #3 aren’t explicitly linked to API #1. But nothing seems to work.
Hm, I tried creating a custom events for each API call, with a quick JS function to update the spinner string within that custom event. But still the same issue → I can only update the string just before the APIs get called, and after they’re finished, but not in between.
Here are three screenshots – of my main workflow, and the two custom events therein.
Each custom event contains a basic JS function to update the text via document.getElementById(‘this’).textContent = ‘New Text Here’;
It then calls the relevant API in the card creation process.
In all cases, I’m still experiencing the same issue → text updates just before the first API triggered, and after the last one’s triggered, withing nothing in between. (Note that I’ve slimmed down the flow to just two API calls, but I’m still getting the same issue.)
Why to use run javascript?
Custom Workflow should be
Set state text: First step running > Show spinner > api issue card > set state text: Running step 2 > second API call > set state text: Last step running! > Run last API call > set state text: completed > Hide spinner
I saw the JS suggestion elsewhere on the forum as a possible workaround. I just tried your suggestion as well → Setting state text as a way to update the user-facing messaging. Unfortunately, getting the same result.
“First step running” appears as expected. But then it stays on screen for the duration, followed by a flash of “Completed.” ¯_(ツ)_/¯ It’s almost like the Bubble app’s UI thread is frozen while API calls are active (?)
I created a brand new / blank page with only this workflow and one custom event per API. I added a single button to kick off the flow, with text fields underneath to print the API responses.
As expected (unfortunately), the text fields only get updated once all the APIs have been called. Even though I’m setting state within each custom event. It really does seem like the UI thread is totally frozen until the APIs are finished. Bummer :-/
Thanks @Jici . I’ve been trying to validate most of my setup using the Free tier before upgrading. Looks like it’ll cost me $30 to try the backend WF option (which I’ll likely end up doing). Appreciate all the suggestions!
@Jici following up → it’s working! Here’s the WF setup that (finally) worked for me:
Have a custom state apiStepCompleted that tracks progress (0, 1, 2, 3, etc.)
Have a custom state apiStatus that contains the string you want to show to users
Have a set of ‘When condition is true’ events for apiStepCompleted = 0, 1, 2, 3, etc.
Within each [while true] event, update the user-facing string (apiStatus), call the relevant API, and then trigger the next stage by incrementing apiStepCompleted by 1
