Output an object for server-side/client-side

Tips
1

Hello everyone,

I want to share a workaround, which will give you the possibility to return a whole object in the server-side action.

For instance, you have a server-side action, which should return the following object:
image

Goal:
Make that object be accessible in the Bubble editor.

Step 1:

a) Add a new server-side action in the plugin editor.
b) Create a new field. On its the Editor dropdown select the App Type.
c) Create a new return value. Select a field from the previous step for the Key Type dropdown.

image
image1647×519 35.6 KB

Step 2:

The idea is to create a template for our object.

a) Go to the API calls tab.
b) Click on the Add an API connection button in the case if you have no APIs already configured.
c) Set a test name for the API. For instance, Doughnut.
d) Click on the Add another call button. Use Server-side | Test action as a test name for the API call.
e) Here you need to use any link, which will have a JSON object in the response.
For instance,
https://jus4tests.bubbleapps.io/version-test/api/1.1/obj/Record

image
image976×837 40.5 KB

f) Click on the Initialize call button.

image
image937×760 35 KB

g) Click on the Show raw data element.
h) Click on the Edit raw data element.
i) Use the following JSON object:
{
“status”: “success”,
“payment_id”: “123456789”,
“amount”: {
“value”: 100,
“currency”: “USD”
},
“transactions”: [
{
“transaction_id”: “123456789”,
“status”: “success”
},
{
“transaction_id”: “234567891”,
“status”: “success”
}
]
}

image
image844×534 19.5 KB

j) Click on the Save button.

k) Take a look at the returned values. If all is okay, click on the Save button.

image
image882×612 27.7 KB

Step 3:
a) Go to the server-side action to insert the following code:
function(properties, context) {

let response = {
    _p_status: "success",
    _p_payment_id: "123456789",
    "_p_amount.value": 100,
    "_p_amount.currency": "USD",
    _p_transactions: [
        {
            _p_transaction_id: "123456789",
            _p_status: "success"
        },
        {
            _p_transaction_id: "234567891",
            _p_status: "success"
        }
    ]
};

return {
    "object": response
}

}

You can notice, that almost all fields have _ p _ (without spaces) prefix now. That it is a required step.
Also, the object amount was transformed from:

amount: {
value: 100,
currency: “USD”
}

to:
“_p_amount.value”: 100,
“_p_amount.currency”: “USD”,

It is required for all object fields.

b) Test it on your app

Result:

image
image1282×508 19.8 KB

BTW, I’m not sure if that solution wasn’t already shared by others.
I’m sorry for the spamming, If it was.

39 Likes
2

I just discovered this thread, thank you so much.

I have been trying to figure this out for months!!

2 Likes
3

Thanks for sharing this, @lottemint.md.

Am I correct that the “template” object created by configuring the API call (step 2) must remain in place in order for this to work, and that references to that “fake” data source in the editor should just be ignored? Or can the API call be removed after step 3?

I’m guessing the former (must remain), but I want to make sure, as it’s a neat work-around but sounds like it’s not suitable for distribution in a plugin due to potential confusion over the “nonexistent” data source (API call).

Thanks for the clarification.

4

Great tip, love it. Just hate having the fake or not needed API there.

It’s so limiting being not able to return an object to bubble. It had limited me in so many ways. Hope @bubble allows us to do it in the very near future…

8 Likes
5

Anyone know of a way to do this entirely client-side?

In other words, while the custom object in the technique described above can be referenced and displayed client-side, it seems it must be generated server-side. It would be great if there was a way to make a custom object available in the editor without hitting the server.

Publishing a state does not appear to be an option, as it seems you’re limited to Bubble’s built-in primitive types (no “App Type” available); and client-side actions (element or plug-in level) don’t have return values. :slightly_frowning_face:

6

I’ve been hoping this would be added for a few months.

@neerja any chance this is in the works?

1 Like
7

Yup, you don’t need to remove it.

I think a document with detailed instructions can solve that problem.

8

Take a look at the following topic, please:

9

Thanks!

Yup. :disappointed:

For instance, if you have a parameter that should contain a date value, you cannot send an empty value for that parameter in server-side actions. You’ll receive an error.

10

Holy App Type, Batman! It works! :smiley:

The piece I missed was that an “INPUT” (field / property) of type “App Type” must first be defined before that type is available as an “OTUPUT” type (the context being an exposed state in the case below).

custom-types
custom-types2768×982 201 KB

As for using it in a published plugin, I’ll have to give that some thought. I generally eschew detailed docs in favor of a friendly and approachable UI. In this case, however (and since the audience is a Bubble dev and not an app end user), I might have to reconsider. Despite it being a bit convoluted (and confusing at times) to set up, the benefit gained in the editor might make it worthwhile in some cases.

As @AliFarahat said, though, I hope Bubble makes it easier to do this in the future!

Thanks again, @lottemint.md, for working this out and posting it!

5 Likes
11

When used client-side in this way - i.e. as an exposed state that’s a custom type - it requires the user (Bubble dev) to configure the field (choose the custom type) in the properties editor. Is there any way around this? Or has anyone come up with a way to automatically set the “App Type” field in the properties editor?

Ideally, user intervention wouldn’t be required, but I see no way around it. Anyone have any ideas for an elegant solution aside from using the “documentation” for the field to instruct the user to choose the correct item?

Or am I overlooking some other approach entirely?

12

Hi, just wondering does Step 3 work for client side element plugins?

Specifically, am trying to make a whole object to return to Bubble using instance.PubllishState() for client-side plugin and was wondering if the p notation works for a client side object as cannot seem to get it to work

thank you

(for reference)

Step 3:
a) Go to the server-side action to insert the following code:
function(properties, context) {

let response = {
    _p_status: "success",
    _p_payment_id: "123456789",
    "_p_amount.value": 100,
    "_p_amount.currency": "USD",
    _p_transactions: [
        {
            _p_transaction_id: "123456789",
            _p_status: "success"
        },
        {
            _p_transaction_id: "234567891",
            _p_status: "success"
        }
    ]
};

return {
    "object": response
}
1 Like
13

Step 3 is required, but it’s a bit different for client-side. Instead of “Go to the server-side action to insert” the code, you simply expose the object using instance.publishState().

1 Like
14

Yes, I am trying to use instance.PublishState but don’t know how to format a whole object to send back to Bubble…

For example, I tried

var out = [{
_p_name: “Magic”,
_p_age: “32”
}];

       instance.publishState('output', out);  // set output state for use back in Bubble

But this doesn’t seem to work for client-side. Am I formatting the “out” object incorrectly?

thanks so much

15

First off, just to cover the bases, step 1 is also a bit different for client-side. You don’t create a field for a server-side action; but rather, as noted here, you must define a property editor field of App Type to allow the user (Bubble dev) to choose your custom type.

Then, define your exposed state to be of that type (which the user is free to choose but which you must “ensure” they choose correctly - typically via the field documentation). Otherwise, your custom object won’t be available in the Bubble editor.

Secondly, your out variable is a list of custom objects, which should be fine if that’s what you intend (although it must match the definition of the exposed state).

What does the JSON for your API definition look like?
What, if any, errors are you seeing in the console?

16

Hi,

yes I am using the App Type field that ties to the Exposed State and I have selected the same Custom Data type in the inspector (Bubble editor)

and there are no errors in the console

53%20PM
53%20PM1307×572 48.2 KB

thank you so much for helping me on this

17

So I just can seem to get the object formatted correctly… Do you happen to have an example of a object that you send back via instance.PublishState() ?

this would help immensely

Here is my code:

var out = [{
_p_name: “Magic”,
_p_age: “32”
}];
instance.publishState(‘output’, out);

where the App Type is mapped to this

24%20PM

thank you

18

Your screenshot shows the definition for a “Thing” in your DB, and your DB has nothing whatsoever to do with this approach (Bubble hack) for making a custom type available in the Bubble editor.

I think you need to walk carefully through Step 2 as described in the original post.

1 Like
19

Hi, I thought Step 2 is for a Server-side implementation and I am trying to do the same in a client-side element plugin

Maybe I am missing something? I do not understand how to reference the API call from a client-side plugin?

Or are you saying that I need to use the API as input for the App Type field in the plugin editor? I will try this and get back

thank you

1 Like
20

Yes. You’re missing the fact that Step 2 is nothing more than a bunch of “hoop jumping” required to “make Bubble aware of” your custom type - whether you wish to use it server-side or client-side.

EDIT: Again, I just want to emphasize that this is a “hack”, and a rather sophisticated (albeit very useful) one at that. :slightly_smiling_face:

2 Likes