[JavaScript] Using synchronous AND asynchronous code in plugin actions, anyone had any luck with this?

Hi! I’m creating this topic because it seems we didn’t had a discussion on this before. I’m out of luck trying to work with sync and async JS code in plugin element actions, what happens is that the sync code runs before the async one, as expected.

However, the sync code is running first even among different actions in the workflow, and I needed that a workflow action would only run after both sync and async code from a previus workflow step.

For example:

In this case, the synchronous code from both steps will run, and then the asynchronous code from both steps will run. Has anyone managed to run each step individually? Like, sync and async from step 1 and then sync and async from step 2.
Else, has anyone managed to wrap several steps in the same async (through promises) or whatever?
My only async need is to make a network request (for an image) and then save it to a instance.data.whatever

That happens because I need to write to a specific instance.data.whatever in every step.

Any thoughts? (:

one option is for step 1’s asynch code to emit a workflow event upon completion, which triggers a second workflow containing step 2.

Having step 2’s synchronous operation wait for step 1’s asynchronous operation, makes step 2 effectively asynchronous to the workflow as well, unless you make it blocking, which isn’t usually a good thing to do.

This is the approach that I take. Once the async operation is complete, an event is triggered and that is used to kick-off another (or, Part B) of the workflow.

@exception-rambler @mishav these “workflow triggers” and “event triggered” you mention are done as bubble workflows or through custom javascript code?

@mishav

What do you mean by that, how do you achieve that? If I could see an example that would be great.

@exception-rambler

Same question haha! What do you mean by that, how do you achieve that? If I could see an example that would be great.

I’m still wrapping all that stuff in my mind

Here’s an example from a current project… I will walk you through the steps:

  1. This workflow finishes by calling some code within a plugin (defined as an Action)

  2. Inside the plugin that looks like this, and I have highlighted where the async operation kicks-off…

  3. Most async operations in JS require you to specify a ‘callback’ function… i.e. to specify what code should run once the async operation returns a result. In this example I am making a GET call to Google Sheets. And below, I am showing you some code from my callback function, and in that code I trigger a Bubble Event - I have called it ‘data_initialised’ (and I have defined it within ‘Events’ higher up the plugin page)…

  4. Then, finally, I use that Event to kick-off another workflow that completes the operation that was begun in Step 1. That workflow is triggered by the Event that was called within the code in Step 3. See below…

    .

So… to summarise:
(1) Trigger some plugin code from your Workflow, maybe as an Action as I did.
(2) Within this plugin, kick-off your async operation.
(3) As part of your async operation (e.g. some type of API / XML request) you will define a Callback function, to be run when the async operation is completed… and within this function you should trigger a Bubble Event.
(4) Use this event to trigger another Workflow, and you now know that that the async operation is complete.

5 Likes

Thanks for the thorough reply! For some reason I ignored the custom events part of the Bubble engine. But no more.

Now I see what you meant and have some ideas that I will try. Thank you again (:

Just for a feedback, I ended up wrapping the needed code parts of different workflow steps (different plugin actions) in a promise written to a instance.data.promiseName by appending instance.data.promiseName.then(function(“previous code”)) and also doing a conditional to check if the promise is undefined, to run it synchronously (in case the async part wasn’t really used).

1 Like