This stumps so many of us when we first start with the plugin editor that I wanted to make a couple quick videos to demonstrate returning an object from your plugin.
Video 1:
Returning an object from a server-side action
– those notes I was writing are below.
https://api.thecatapi.com/v1/images/search
Getting an object back from the server side actions seems impossible at first but it actually really easy. Let’s start by creating a new plugin!
We will start by heading to the api editor, adding a ‘dummy’ api call, and then defining the object that we want to have returned to us!
To do this, we’ll need to use a ‘dummy’ url so that bubble knows we mean business (or that they know it’s going to work. They put a safeguard on the api calls so you MUST call a valid API service at least once and it must return something. Otherwise, without calling the dummy API, you cant return the object appropriately.
SO, let’s go!
P.s. we’ll be using the URL at the top of this doc for the dummy API call
So notice what i did there.
I initialize the API, save the call, and then click manually enter the response.
Here is where we will define the object we want to return.
And sometimes the api editor is a pain, so let’s validate that JSON
Fun fact, the editor doesnt like malformed jsons or single quotes. So fix that!
{
"string":"asdfasdf",
"boolean": false,
"number": 4,
"list":["asdf","asdf"]
}
After you click save, the editor will infer the data type each value should be
Make sure those dropdowns have the correct data type. Bubble doesnt like the single quotes. Use the double quotes
“”
Now, let’s define our server action to return some data based on the model we provided.
In the SSA you will need a field to define the type of data we we want to return. It must be “App Type”. What this will allow us to do is use the API response we just defined as the model of data to return within the app.
Actually, we need to do one more thing. Set the returned value. Set the return value to the field type we set in the prvious step.
If you plan to return a list of that model you created, set the return value to list.
IMPORTANTTTT. You must append each key name with
_p_
This lets the bubble engine display and interpret things correctly.
You must also remember to return the list of objects
Let’s check it out.
But of course, if you’re not returning correctly, it wont work. So,
You’ll need to return your data as an object that has your list of objects.
Like this
We’ll now test out the returned data.
Add a button to start the action!
One thing we need is the RG to display the list. We’ll set the element to have the data type that we just defined.
Sometimes the editor won’t update the name appropriately. Perhaps this is a bubble bug to be reported?
Video 2:
Returning an object from a client-side action
{{not yet recorded}}
— this one is more difficult but definitely doable!
Video 3:
Returning an object from a plugin element’s update field.
Now that you’ve learned to return them from server side actions, let’s float over to the element itself and see how to return objects there.
Note, we aren’t updating the API call in this video, just doing it again for show.
So in short to return the object,
You’ll need to
Instantiate an api call to any service and define the return data yourself.
Now that our API call is ready, we will head over to the element editor and work with it there. It’s a very similar process to the SSA.
Create the element, define an input as App Type
And define an exposed state whose data type is the input you just defined in the last step.
What this means is when Data Out publishes any data, it will be in the format defined in the ‘datatype’ input field
With actions that happen client side, we can only return objects using instance.publishState. We dont return an object the same way as in SSA, we only set it up the same way
And that should be it.
Always test though.
Even if the element wont have a visual element, it must be dragged on the screen..
Oh yeah. Now that we’re element side, the data comes out in an exposed state which can be bound to another element as the data source. An element like a RG.
We didn't set the exposed state to be a list
Be mindful that any change in the plugin editor will require a refresh in the app editor to be observed.
Video 4:
Returning an object from a plugin element’s workflow actions
— as a note. you don’t have access to instance from workflow actions. BUT YOU kinda DO if you publish instance to window.
you could do something like this
So what you do is save instance to the window (a truly global variable that can be shared between elements and plugins.
Then you call instance.publishstate from your window variable.
Other than that, theres no difference.
