Indicate finish of running backend workflow (loading/spinner-elements)

jupixy · 2024-11-15T17:23:05.695Z

Hi all,

I’m running a backend workflow after the user clicks a button.
Several things are running in the workflow (db-actions) and I want to display an indicator (spinner or loading screen). So I created a custom state called “API finsihed?” (yes/no) and want to set this element to no if the user click the button to run the backend workflow. after finish the backend workflow should send a “yes”, so that I can switch the custom_state “API_loaded?” to yes to hide the spinning wheel:

image1468×1092 90.4 KB

My backend wf:

image1468×1092 53.7 KB

Here’s my spinning element:

image1036×468 49 KB

If the user clicks the button, the spinner is switched to hidden. The backend wf is running correctly, but the custom state would not change to (finihed loading) ‘yes’.

Any ideas?

Best+many thanks in advance,
jupxi

adamhholmes · 2024-11-15T17:36:18.913Z

Unfortunately, as there’s no way to return data from a backend workflow to the front end, there’s no simple way to do this in Bubble.

One (perhaps the most common) solution is to run it through the API Connector (or App connector) instead of using a Schedule API Workflow action. That way you can return the data to the front end, so you’ll know when it’s finished running.

Another option is to use the Backend workflow to make a change in the database somewhere (perhaps have a WF log datatype specifically for the purpose), and then listen to that change on the page in order to know when the WF has finished running.

jagdish_bajaj · 2024-11-15T18:05:04.224Z

Yea this is a tough one.

What I find myself doing most of the time is creating a LOG data type to keep track of the backend workflow, its start and end times and a status field. So, in your case, log of backend activity can be used to communicate to the user if the workflow has completed or not.

Create a LOG, start the spinner and keep the spinner visible as long as the status hasn’t yet completed - this would probably be the easiest way to accomplish what you need.

jupixy · 2024-11-16T15:50:43.440Z

I just read an article about “App connector”. - Seems it is a solution to connect 2 apps and it seems that that is a ‘big thing’ to realize

Or I’m wrong? How to achieve it with this “connectors”?

Thanks,
jupxi

adamhholmes · 2024-11-16T16:49:21.136Z

Personally, I’d just use the API Connector if you’re going to go down that route.

jupixy · 2024-11-16T16:52:06.485Z

What do you specially mean with “API Connector”? - What is this?
I created a backend workflow and run it with “run backend wf…”
how to deal with your idea?

adamhholmes · 2024-11-16T17:07:51.753Z

jupixy:

What do you specially mean with “API Connector”? - What is this?

It’s Bubble’s plugin for making API calls.

jupixy:

I created a backend workflow and run it with “run backend wf…”
how to deal with your idea?

Instead of calling the backend workflow with a ‘Schedule API workflow action’, call the endpoint directly from the Api connector.

jupixy · 2024-11-16T17:48:24.070Z

Cannot find it ?!

image816×930 43 KB

adamhholmes · 2024-11-16T17:53:59.984Z

Have you set up the API call in the API Connector?

jupixy · 2024-11-16T19:21:55.105Z

Ahh, you mean this one:

image1096×1302 59.8 KB

I already have api calls for chatgpt tests, but how to achieve this with my own backend workflow? I don’t fully understand it yet.

Thank you so much

adamhholmes · 2024-11-16T21:03:32.615Z

Just create an API call, and use your backend workflow as the endpoint.

Once it’s initialised (as an action) you’ll be able to use it in your workflows.

jupixy · 2024-11-16T21:35:17.854Z

image1738×990 65.4 KB

API CALL ACTION GET
URL: https://abcde.com/version-test/api/1.1/wf

If I click on initialize call, I’ll get a html result?!

please help me. what settings do I have to set?

Many many thanks,
jupxi

adamhholmes · 2024-11-16T21:49:28.067Z

The URL needs to be the URL of the backend workflow.

johnny · 2024-11-17T00:40:38.880Z

I read about @georgecollier’s tip about using the app connector, so I’ve personally been using that since and not using the API connector

How To Return Data From Backend API Workflows (no manual API connector) Tips

TLDR: calling backend workflow from API connector is unreasonably tedious app connector auto-sets up and syncs fields result/returned data from backend workflow can be used in following front-end steps Returning data from backend workflow in front-end without manually setting up API connector calls I have a lot of feelings today, as I’ve learned something that would’ve saved me hours of time had I known earlier, and it feels like something that only a handful of people know about (based on th…

jupixy · 2024-11-17T15:50:39.712Z

You are really the best community worldwide !!!
Thanks a lot to @adamhholmes, who helped me out many times!
Best, Thank you!

jupixy · 2024-11-17T18:42:10.630Z

Just another question. Is it possible to create a progressbar indicator with this solution (using the API Connector)?

This is my current backend wf (triggered by API plugin):

image1576×836 66.5 KB

Best,
jupxi

system · 2025-01-24T17:23:45.113Z

This topic was automatically closed after 70 days. New replies are no longer allowed.