Forum Documentation Showcase Pricing Learn more

Output an object for server-side/client-side

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.

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

f) Click on the Initialize call button.

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”
}
]
}

j) Click on the Save button.

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

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:


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

10 Likes

I just discovered this thread, thank you so much.

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

1 Like

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.

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…

5 Likes

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:

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

@neerja any chance this is in the works?

Yup, you don’t need to remove it.

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

Take a look at the following topic, please:

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.

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

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!

2 Likes

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?