Output an object for server-side/client-side

[jared.gibb]

are you doign this for a client side action? i cant figure out how to return the value like is done with the server side action?

[sudsy]

No. AFAIK, client-side actions can’t return a value. To make values available client-side, creating an element and publishing one or more Exposed States is the approach I take.

-Steve

[jared.gibb]

Thanks for the rapid reply! I just tried the same approach and failed. I’ve been returning lists instead of an object. Works for my needs for now. The server side Firebase auth sdk actions are so slow but I don’t know another way to return objects from my outside data calls.

It’ll work for now. Again, thanks for the input!

[Minty]

This is amazing!

Thanks for sharing, and everyone else for making it easier (node module, etc).

My small contribution is that in Step 2 you do not need to add a fake API link. You can just click the Manually Enter API Response button instead.

This means you can skip parts E, F, G and H of Step 2.

[redvivi]

Hey guys !

Quick question/update to checker whether things have improved since or not.

Is this still the only available method to return a Key/Value pair object from SSA ?

{
   "Key1":"Value1",
   "Key2":"Value2",
   "Key3":"Value3"
}

PS: The keys and values are parameterized, so unfortunately I can’t initialize this object the way in the API connector.
Or alternatively I can pass this object as string and trying to do some magic on the front-end ?

Any suggestion is welcome.

Thanks!

[jared.gibb]

Hey! So to this logic I wouldn’t be able to return deep nested Json? I haven’t tried anything like the complex example of Json you’ve demonstrated with.

[exception-rambler]

@lottemint.md my mind explodes at how you worked this out.
For how I like to build in Bubble it’s a game changer.

@jared.gibb from my experimentation you can return deep nested JSON. I’m currently working with JSON several layers deep and Bubble handles it perfectly. A great bonus is that for every new layer / object within the JSON, Bubble allows you to refer to it a as a Type of thing in its own right.

For example, if you had a nesting structure like Transaction > Category > Product where each of those related to an object with fields, when you push the Exposed State to Bubble (if you’re client side) then all three of those objects will be reference-able within Bubble. I.e. you could set a Dropdown Menu to return a Category Thing, and then refer to the fields relating to the selected category elsewhere in workflows etc.

They show up in App Type fields like this

[jared.gibb]

Sweet! Thanks for sharing to everyone here! I implement this approach for returning data with my plugins and love it!

[lottemint.md]

@jared.gibb

So to this logic I wouldn’t be able to return deep nested Json?

Sorry for the late reply. As @exception-rambler said, it is possible to use deep nested JSONs.

@exception-rambler

my mind explodes at how you worked this out.

I found this feature by accident. I was playing around with the custom API object and the JavascriptToBubble (Toolbox) element. I was so excited when I saw when I sent the custom JSON object, and the Bubble read it!

Regarding deep nested JSONs with arrays:
There is an issue when a template has an array of nested JSON.
For instance, param_1.param_2.param_array. If you send an empty param_array to Bubble, the Bubble will prompt an error, for instance, cannot get the length of undefined/null. As I understand, the Bubble engine parses it and trying to get some info about the array.

[lottemint.md]

BTW, the latest version supports chaging prefix:

So, the default prefix is _p_ - it is for object templates built by all plugins.
The prefix - _api_c2_ is for object templates built by API connectors directly in the app.

[lottemint.md]

@redvivi

Any suggestion is welcome.

Do you still have that issue?

[aaronsheldon]

@lottemint.md

Regarding deep nested JSONs with arrays:
There is an issue when a template has an array of nested JSON.
For instance, param_1.param_2.param_array. If you send an empty param_array to Bubble, the Bubble will prompt an error, for instance, cannot get the length of undefined/null. As I understand, the Bubble engine parses it and trying to get some info about the array.

I don’t think Bubble is that tolerant of mismatches between the JSON contents and the initialized structure to be able to pass empty objects and arrays.

[redvivi]

@lottemint.md

Do you still have that issue?

I ended up passing this object as string.

I wish Bubble would have a key/value return type.

[aaronsheldon]

I wish Bubble would add a “Data Tab” to the plugin editor to allow for the definition of custom types. This would make initializing API calls very nice because instead of the kind of hacky “Manually Specify” you could simply pick one of the custom types that were defined.

[aaronsheldon]

So one solution would be to call your data API directly inside of the Server Side Actions. For example to create a new record, assuming you pass the home URL in homeurl, and return only the status of the POST:

// Create your thing
var newthing = ...

// Incantation to upload file
var postoptions = {
    uri: properties.homeurl + "api/1.1/obj/mything",
    method: "POST",
    json: newthing
};

// Send post success status
return context.request(postoptions).body;

Remembering to replace mything in the path with the name of the thing you want to create. The caveat emptor being that your plugin Server Side Action is no longer agnostic to the implementation details of your specific app.

[laboratoriodosfundos]

@lottemint.md
@sudsy
@redvivi
Friends, is this approach still working?
I am trying something simple like this on the client side:

{“texto01”:“abc”,“texto02”:“abc”} ««« My JSON in the API Connector

obj = {"_p_texto01":“ABC”,"_p_texto02":“ABC”};
console.log(obj); ««« Confirm to me that this is an object
instance.publishState(“temporary_thing”, obj); ««« I get nothing in the exposed state

I have read all the messages in this post and have gone over everything I have done several times.

• My “custom_data” field is of type “App Type”.
• I have an exposed state “temporary_thing” that is of type “as custom_data”.
• I select in the element field the data type created in the API Connector.
  I tried a lot before I bothered, I tried JSON.stringify and JSON.parsemas and several other things. I ran out of ideas so I decided to ask if this technique still works.

[sudsy]

Double check that you’ve covered the bases as described in this post and this post.

There’s some configuration required by the user via the plugin’s properties panel in order to connect your custom type to the App Type field.

-Steve

[reggie]

I am trying to use this method to populate a drop-down menu with the results of an api call. Hitting my head against a wall here, and I am sure it is because I am a plebe.

Hopefully, this thread is still alive to help me.

I’ve got a database that I can retrieve the value and display attributes of an option set. I want to use those values in a drop down menu in my bubble app located here: Dev-ramcotraininglogger | Bubble Editor

The dropdown field is located in Popup A.

Now here is some background as well as what I have done so far with my plugin.

The response I receive from the database looks like this:

{
"ResponseCode": 200,
"ResponseText": "OK",
"Data": {
    "740300008": "Accounting",
    "740300005": "Advanced Find / Reporting",
    "740300007": "Automation",
    "740300000": "Classes",
    "740300006": "Committees",
    "740300002": "Core",
    "740300003": "Dues",
    "740300001": "Meetings",
    "740300004": "Membership",
    "740300009": "Other"
   }
}

I am under the impression, that in order to use this values in a dropdown menu, they must be a list of objects–not a single object as shown above.

So, I thought I would use a series of .replace() functions to restructure the JSON, then pass it to Lottemint’s convert function to prepend the p notation.

I wound up with this:

Reformatted JSON String

{
  "ResponseCode": 200,
  "ResponseText": "OK",
  "Data": [
    {
      "Value": "740300008",
      "Display": "Accounting"
    },
    {
      "Value": "740300005",
      "Display": "AdvancedFind/Reporting"
    },
    {
      "Value": "740300007",
      "Display": "Automation"
    },
    {
      "Value": "740300000",
      "Display": "Classes"
    },
    {
      "Value": "740300006",
      "Display": "Committees"
    },
    {
      "Value": "740300002",
      "Display": "Core"
    },
    {
      "Value": "740300003",
      "Display": "Dues"
    },
    {
      "Value": "740300001",
      "Display": "Meetings"
    },
    {
      "Value": "740300004",
      "Display": "Membership"
    },
    {
      "Value": "740300009",
      "Display": "Other"
    }
  ]
}

Converted to Bubble Object Format

{
	"_p_ResponseCode": 200,
	"_p_ResponseText": "OK",
	"_p_Data": [
		{
			"_p_Value": "740300008",
			"_p_Display": "Accounting"
		},
		{
			"_p_Value": "740300005",
			"_p_Display": "AdvancedFind/Reporting"
		},
		{
			"_p_Value": "740300007",
			"_p_Display": "Automation"
		},
		{
			"_p_Value": "740300000",
			"_p_Display": "Classes"
		},
		{
			"_p_Value": "740300006",
			"_p_Display": "Committees"
		},
		{
			"_p_Value": "740300002",
			"_p_Display": "Core"
		},
		{
			"_p_Value": "740300003",
			"_p_Display": "Dues"
		},
		{
			"_p_Value": "740300001",
			"_p_Display": "Meetings"
		},
		{
			"_p_Value": "740300004",
			"_p_Display": "Membership"
		},
		{
			"_p_Value": "740300009",
			"_p_Display": "Other"
		}
	]
}

With regards to the api call, I have created it with and without the section here:

{
	"_p_ResponseCode": 200,
	"_p_ResponseText": "OK",
	"_p_Data": 

That made no difference.

I also attempted to output the result of the action into an object (both list and nonlist), and I tried to out put the result as text (list and nonlist)

Here is a action code, all the comments are there because I tried several versions of this to see what worked:

function(properties, context) {

const {convert} = require('json-to-bubble-object');

var jstring = properties.json_string
var jstring = jstring.replace('{"ResponseCode":200,"ResponseText":"OK","Data":','');
var jstring = jstring.replace('{','[{');
var jstring = jstring.replace('}}','}]');
var jstring = jstring.replace(/","/gi,'"},{"');  
var jstring = jstring.replace(/":"/gi,'","Display":"');  
var jstring = jstring.replace(/"7/gi,'"Value":"7');
//var jstring = jstring.replace('[','{"ResponseCode":200,"ResponseText":"OK","Data":[');

//var njobj = JSON.parse(jstring);


 
//var obj = convert(jstring);
//return {"options_object": obj}    

var objlist = convert(jstring);   
return {"options_object_list": objlist}


//return {"reformattedjson": jstring}

//var obj = convert(jstring);
//return {"convertedjson": obj}



}

And here is a pic of the properties:

How bad did I screw this up?

[jared.gibb]

You may find this helpful!

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 t…

Learn more

Tired of struggling with Bubble or API’s? Need a little functionality that’s not available yet thru current market plugins?

Are you ready to step-it-up or speed it along? Need some custom code or a plugin built? Contact me today to learn how to book a 1-on-1 session, get your plugin built, or yet freelance building support!

[lottemint.md]

Wow… You did a great job!
Thanks for the details.

Here you need to define the type of return value:

I would recommend renaming it from Array to Output Type to avoid future confusion.

Let me know if that helped, please.