How to read data from Plugin Actions as Data Source

Hi.

I’m working on a custom plugin to make HTTP Requests directly from the browser to a backend, passing custom headers and payload, without the requests being proxied through Bubble’s servers (such as using the API Connector).

I was able to implement the HTTP Requests, but I am not able to read the request’s response from the plugin back into Bubble.

Is there any way to use the Plugin’s Action as a Data Source, to “get data from plugin”, just like the option to “get data from an external API”?

The plugin’s functionality is coded as Plugin Actions with javascript’s fetch, running on the client side, and in my case I am not allowed to use anything server related or related to the Bubble’s API Connector.

Thank you.

The client-side Action API doesn’t allow you to return data anywhere. This is unfortunate, but true.

This is why any client-side plugins that deal with data are built as Element plugins. Element plugins have their own Actions (defined in the element plugin itself, not as separate client-side actions). The code from such actions can then use instance.publishState() to push data to the element’s exposed states.

For an easy-ish to understand, open source plugin that demonstrates this concept, see my Fielder plugin (you can inspect the code and/or fork it):

For some context around the “Fielder” plugin, see Do a Search for a Thing's List of Fields (Introspection) - #3 by keith

It is unfortunate that the client-side Actions API doesn’t allow us to return values to the client-side workflow (like Server Side Actions can do for backend workflows). There are many Element plugins with actions that would be better implemented as purely as Actions, but since we can’t publish data anywhere, it’s a non-starter at the moment. (AFAICT, the client-side Actions API was conceived purely as a way to manipulate things in the DOM as they don’t have many other uses. You’ll note that they do not have a way to specify any exposed states and they do not receive the instance object (where we find the .publishState() and .triggerEvent() methods), put only their properties (field values) and the context object.

4 Likes

Thank you. That helps a bunch.

Hi @keith ,

Hope you can help me out

i have a loop with a pulishState and an triggerEvent next to each other:

e.detail.data.forEach((file) => {
instance.publishState(‘uuid’, file.uuid);
instance.triggerEvent(‘file_uploaded’);
});

And the triggerEvent runs a workflow that saves the uuid. But Bubble cannot handle this an it results in saving duplicated file id’s. i think that the publishState is not parsed to the workflow and then the triggerEvent is executed, but that the triggerEvent is already executed before the publishState arrived, so it doesn’t wait for each other?

Then I thought maybe I can use the API option to trigger the backend worklow and send the right value. But do i understand it right that this is no option in Bubble? i cannot see a way to parse the file.uuid into the key/value in the api i added to the plugin.

Do you maybe know a way to get this in line. Is there some kind of callback function? Or do i need to set a timeout between the two. or can this not be done in Bubble?

Hey @jos2, I don’t build file uploader plugins, but the element plugin API enables file uploading (it’s a method on the context object, if I’m not mistaken). The right way to do this is to do the uploading in the plugin, not in a Bubble workflow.

Then you’d trigger an event that indicates that a file upload is complete.

@jonah.deleseleuc (who has built a mighty fine file upload plug-in) might have some insights to share or might have written a bit about using the file upload part of the API, and might chime in here if he’s feeling charitable.

2 Likes

Hey @keith ,

Thanks for your reply,

yes the upload method is part of the context upload on the client side. But we don’t upload to Bubble but to another service. The user can select multiple images and we upload them one by one and then we get back one by one the link to that image and then we save the links one by one (on every separated image upload) in Bubble.

In the plugin we send the image link to an API endpoint in Bubble that triggers a workflow that saves the image link in the database.

In that workflow are different other workflows scheduled and those scheduled workflows have also scheduled workflows and i guess that’s to much for Bubble to handle.

In the workflow i have a action that create a new record and next to that action i have another action that “add” that previous record into a column list of another table. And there it goes wrong. When that workflow is triggerd from the plugin then the workflow skips some “add” actions.

We did multiple tests with uploading 20 exactly the same image’s then Bubble “added” the first time 10 items to the column list the second time 2 item the third time 6. When i display the values in the console.log it are the right 20 unique images, so the loop in the plugin works okay, but adding values to a column list with scheduled workflows is not reliable i guess.

Now i created a very simple table where i save them as single records and i use the set list for the column to add all the records at once an that works.