Misha I have an idea for Toolbox Javascript to Bubble

[chad5]

Hey @mishav Hope you are well and had a great christmas,

I’ve been working a lot with toolbox and JS and I found that you can create a json object using arbitary text and return it through a runjs (or any other block of code) and return it as a thing you have initialised in the API connected.

It works great however you can’t play with the json as it is initialised in the api connector, as you probably know bubble adds api_c2 before each field name which messes things up.

I was wondering if you could add a toggle or dropdown called something like Bubble API Prefix, that when checked it would automatically add api_c2 before each field in the object it is trying to return. This was I can easily return my object into bubble.

[DjackLowCode]

@chad5

I was wondering if you could add a toggle or dropdown called something like Bubble API Prefix, that when checked it would automatically add api_c2 before each field in the object it is trying to return. This was I can easily return my object into bubble.

Hey @chad5 - quick overview of how you do this?

[rico.trevisan]

Interesting idea. @chad5 you might also be able to fork the plugin, test out your idea, and then Misha can easily merge it into the main plugin.

[chad5]

I had a look but I couldn’t see how.

I could access the editor but in read only mode

[chad5]

Are you asking how I do it? Turn json into a thing?

Create your object

{
“name”:”Chad”,
“Colour”:”purple”
}

Go to api connector, I have an api group called json_api

In that I would create an api called person and then press the button to manually add response.
Paste in object.

Save to initialise

You don’t need a url or anything other than a name for your api

You can now use it a million different ways but what we are trying to do here is turn object that come in the form of text, perhaps you have some JavaScript and you want to return an multi level object that you can actually access as a thing or what I use it for a lot is creating temporary objects before saving them.

The simplest way to tell you how to turn the object into a thing is to

Create a JavaScript to bubble function element
Set the bubble_fn_xx field
Check the publish box
Set the value to your data type you initialised

Now add a run js action behind. Button and add some code similar to below

Bubble_fn_xx({
“_api_c2_name”:”Chad”,
“_api_c2_Colour”:”purple”
});

You must add the api c2 stuff, for some reason bubble saves the object field names like this behind the scenes. Having a toggle in the bubble fn element to automatically apply these would be great and really time saving. Do not put the api c2 stuff in the api connector or you will get fields that look like “_api_c2__api_c2_name”

Run the js then you should be able to access your object as “JavaScript to Bubbles values name/colour” you can even have the bubble fan trigger an action. In the workflow with the run js if you want to use the data usually a 200ms delay is enough. You can do the same with the server script action, however the spin up time can often be annoying.

Good use case:
I create a temp list to display data in a rg without touching the db so I can have a user add things (such as tasks) and then I might have a save button that saves them. This way I don’t have to delete and create things in the db for no reason, particularly annoying to clean up tasks if a use refreshes the page or something.
The might be a task name and due date, so I have a button that does a run js, the bubble fn then turns it into an object and I can display in the rg with the rg being the container, instantly fast.

Editing the tasks takes a little magic but basically you recreate the json (you might even have a custom event for this purpose) send it to bubble fn then when adding it to the RG you filter out the old one

[chad5]

It’s been a real game changer for me as you can integrate some pretty cool functions without having to create a plugin and those functions can return a lot of data that you can structure exactly how you want. Closest thing to variable in bubble

[adamhholmes]

Wow @chad5 great discovery! (I never knew this was possible)… this really is a game-changer!!

(although why this is not standard built-in Bubble functionality I’ll never understand).

I now have a way to create and work with objects in Bubble that doesn’t require slow and costly API calls to my own apps… this really is interesting.

[chad5]

I create a RE that I can put on any page I need and in it I have some custom events

Create/Modify/Delete Task (just one task not 3)
I pass in parameters
ID
Name
Colour
yn_delete_item
json_api_tasks_list

In the workflow i do something like the following
Run JavaScript and create an arbitrary text that

• filters out if ID is not empty or yn_delete_task is yes (gets rid of task if modifying or deleting)
• increase my task counter
• created an arbitary text with the new item or item that will replace the one we removed using the parameters in JSON form
• Calls bubble fn with the above object
• Wait 200ms
• Return data bubble_fn_xxx’s value which returns the new list of items back out of the wf

I also have a custom event called
Load list from DB
This uses arbitrary text to turn bubble db objects into the list of api_task

At the same time on the RE element I have an optional parameter that points to the bubble_fn which is now holding my list of tasks so I have the dynamic list exposed as a data source additional to returning when you call the custom events.

It’s like a litttle magic box of bubble things freedom

[boston85719]

This is awesome. Saw similar concept built into the JSON Assistant Plugin. Was curious the way that worked.

@chad5

• created an arbitary text with the new item or item that will replace the one we removed using the parameters in JSON form
• Calls bubble fn with the above object
• Wait 200ms
• Return data bubble_fn_xxx’s value which returns the new list of items back out of the wf

I have a use case for this right now, wish I saw this before I built out another method earlier today as this setup you explain would reduce complexity.

Thanks for sharing this.

@chad5

I’ve been working a lot with toolbox and JS

I’ve been doing the same for the past few months. And a lot with JSON and the API connector for bulk create functions. This approach you have fits right into the mix. Will help reduce WUs significantly for so many functions.

One way is to eliminate the need to run the make changes to thing actions conditionally based on whether the thing in db translated into the API thing is the same as the API thing as transcribed from the input fields. No need to try and attempt to log changes between the DB values and input element values on CRUD forms when editing an existing DB entry.

[boston85719]

@chad5

Go to api connector, I have an api group called json_api

In that I would create an api called person and then press the button to manually add response.
Paste in object.

Save to initialise

I’m trying to do this, but the save button is not clickable for me, so I must be doing something wrong.

Does anything jump out at you as what I have done wrong, or something I’m missing?

EDIT
Found it, it is the backward double quotes.

{
  "name_last": "Dodger",
  "name_first": "Roger",
  "email": "rogerdodger@gmail.com",
  "weight_kg": 34
}

[DjackLowCode]

@chad5 you legend!

I’ve been using the API json extensively but would always need to call the API.

Now all we need is plugin types to be available in Backend workflows and this could all be fired from the front end to the backend!

[rjwilkinson10]

So this enables you to create a temporary object/list of objects before saving them to the database therefore, without touching your backend? That’s brilliant. So many uses cases for this! Looking forward to trying this out.

[chad5]

You can use the api data types in the backend but unfortunately you can’t pass using to a backend workflow, you can however pass the text and put it back into a data type in the backend workflow

I used this method also to upload stuff to the database. I had a scenario where I needed to upload csv files with 10k rows+

So I upload the csv as json, run it through the bubble fn. then I have 10k of api data type which I can use filter to check if any fields are empty.

You can also write into the js a function to check if the json has bad data or transform the data before it gets turned into the thing.

I had another case where I had make sure that the row called car registration matched a dt_car I had in my database. With this method I could check to see if the rego field matched with a rego field in my db. Then once everything was good you convert into json in the format that the bulk api connector wants in order to upload as a dt_expense and either on the front end or backend use the bulk upload data api to upload. You can literally upload 70k items in less than a minute in this way.
The bulk data api passes back a text with a response for each object, you can also turn these responses into an api_data yep so you can access the item created uuid, success/fail and reason for failed if it’s failed. This is great cause you can use the server script of bubble fn and pass these uuids straight through to get the objects you just created without the unreliability of search

[chad5]

It’s pretty easy to do, bubble should just add some ui around this so it becomes a feature. All the framework is there

[DjackLowCode]

Thanks @chad5 yea heaps of bulk data features under the hood ready to be set up with more beginner frendly UI

[rico.trevisan]

Very cool find.

@chad5

I had a look but I couldn’t see how.

I could access the editor but in read only mode

You’re right, the plugin is indeed not sync’ed to GitHub so you can’t fork it that way. Pity. Maybe @mishav is around and could set that up. When he does that, you could fork it and potentially create a PR.

Otherwise, you could copy-pasta his code to build your prototype: Bubble Plugin Editor - Toolbox

I guess you could add a small loop at the beginning of this function to check if the toggle is on and then iterate through the keys to rename them.

[chad5]

I had had gpt to help me with some code and I think it’s pretty easy to do.

Maybe @mishav could opensource it I love opensource haha

[ihsanzainal84]

JSON Assistant already has this functionality. Give it a shot if you work with JSON alot.

Good find. Actually this has been around for sometime, it was a hot topic then too.

[mishav]

Yes it is a good idea to include this as a preprocessing feature to JS2B.

I’ll have a look at implementing this on the weekend. If you paste your code in here, it will go quicker, haha.

[boston85719]

@rico.trevisan

copy-pasta

Somebody is hungry