Output an object for server-side/client-side

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?

1 Like

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!

5 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?

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

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

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

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?

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

thank you so much for helping me on this

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

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

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

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

Ok am trying this and will get back… thank you again

1 Like

Hi,

Its works!!! :smile: You were right about the super-hack to create a “custom output object”… then using the p notation to make the JSON object does the trick. I thought step 2 was for server side, but I see it is the hacky-step to create a custom object for output that can be used with the instance.Publish state

Thank you very much for your time to help me understand this work-around-hack :slight_smile:

2 Likes

A bit late to this, and brand new to Bubble, but why hasn’t Bubble simply made custom data types available in the plug in editor?

Every instruction in this list works for me, except the very last one, where I do not see the Plugin Action as a valid selection within a workflow action.

I even went so far as to recreate this Test action identically.

The funny thing is this Plugin already has one action that I do see, but this action I do not.

Any idea what critical step I’m missing?

Later edit: It appears I was merely impatient. I took a 30 minute break, and when I returned, the “missing” Plugin Actions were no longer missing.