Forum Academy Marketplace Showcase Pricing Features

How to return objects from plugins (SSA, CSA, Element Update & Element Workflow Actions)

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. 
7 Likes

Thank you for these videos! I have found the closed (insider) nature of plugins to be frustrating and limiting. Your videos were a big help in solving various API interactions that require JSON parsing, and how to return that data to our App.

1 Like

I found it difficult too. Now to make the videos a little more friendly with voiceover, let’s cuts, and more clear instructions!

Glad you found it useful!!

We shouldn’t be limited by lack of knowledge. Doing this allows you to expand your reaches quite a bit in my opinion.

1 Like

I am astounded how you ever managed to figure this out but I am in awe! :raised_hands: :raised_hands: :raised_hands: :raised_hands:

Super useful.

1 Like

thanks for the support @lindsay_knowcode the real gold nugget is saving the instance from an element to the window variable. then you can literally publish data between elements.

that and using the API as a data type. it’s :moneybag: :moneybag: :moneybag:

1 Like