Toolbox - how to change one field of datatype using JS2B

[hrvoje.zrilic]

Hello!

I’m trying to use Toolbox plugin (JavascriptToBubble) to change a field in my search result, but I don’t know how.

I have simple data type “test” with only two fields (TestNumber, TestText):

I have simple page with JS2B control, button and repeating grid:

I configured JS2B as shown in picture above.

Repeating grid’s data source is as following:

On button click, I am calling following javascript:

I would like to change the value of testtext field (or testtext_text as it is interpreted in javascript) but I can’t manage to do that. I tried:

mylist[0].testtext_text = “from JS”;

But it didn’t change anything since I got original list from database in repeating grid (and in JS2B value list when inspecting in debug mode).

I would appreciate help about this very much.

I can see that paramlist1 is not exact array of objects from my database…

The creator of the plugin made an example where he shows how to alter the whole record:

// alter second item in sorted list
mylist[1] = {
“_api_c2_userId”: 999,
“_api_c2_id”: 888,
“_api_c2_title”: “Bet ya didnt expect this post”,
“_api_c2_body”: “Running like rubber chicken”
};

His example is on api result, not on database search, maybe there is some kind of difference.

I have also tried to enter Do a search for directly into javascript (without paramlist), but I got the following error:

I have seen examples with :each item fieldName join with “”, but I need complete record, not just one field.

Thanks!

[keith]

You can’t. The only way you can make changes to a Thing is via Bubble’s “Make Changes to a Thing” action.

[hrvoje.zrilic]

Keith, thanks for your answer, but I don’t want to save anything to the database, maybe I wasn’t quite clear in my first post.
As far as I can understand, the list in javascript (and in JS2B control) is “disconnected” from a database.
To prove that, I added following code in js:

var x = mylist[0];
mylist.push(x);

Now, I can see that my repeating group is showing additional list item (four items instead of three that I have in db), without any database changes:

Also, with mylist.pop(), I can remove item from list, and my rg will show only 2 records.

So, I guess, if I can add and remove items from list, there must be some way to change items in list (or at least, I hope so).

I need this for reporting purposes (showing data in rg or in chart, for example), to do the calculations “on-the-fly”.
I know I can add calculated field in the database and manage it with every insert and update, but there are few reasons why I think this is not good solution:

1. I am slowing down every insert and update (it could be significant, especially if I have more calculated fields)
2. The database becomes more and more redundant - I think that’s not good.
3. If I want to change formula for calculation, or add new calculated field, I have to update all existing records in db. When I have thousands, hundred thousands or millions records in db, it is quite a pain in Bubble - for example, I have test db with cca 400.000 records, and all operations on this number of records last for hours, even 10-12 hours, which is quite unusable. And I’m talking about simple updates that lasts in normal sql for a few seconds (work a lot with mssql, mysql, postgres…). So, Bulk option in Bubble doesn’t help at all in this case. I don’t know if there is any way to connect directly to embedded postgres database to execute such sql commands directly? I didn’t find anywhere connection string for my Bubble database…

[mishav]

A generally useful technique for calculated fields on the page, is to use the list operation :format as text, you can make arbitrary structures (but all within a text string).

---

A more esoteric technique that might suit your situation is:

1. Set up an API Connector call with a manually defined return value structure.
2. Pass into JS your list of database things
3. Use/alter the values to compose a list of artificial API results, as per the example you found.
   (listProperties helps to discover the internal property names for the API results, assuming an API result is passed in)

Before deciding on this approach, be sure to test for maintenance cost, ie. the effort it takes to change the API structure.

Whether it is worth the effort depends on how you want to use the resulting calculated data.

[hrvoje.zrilic]

@mishav , thanks for your useful tips! I needed these calculated fields as a source for your ApexCharts and at the end I managed to fill data series and labels with multiple “Do a search for” + group by + split + convert to numbers (using new editor with parenthesis) and it worked well, except for chart of type “Pie”. I think I’m doing something wrong in options - maybe you can help me with that?

I have prepared simple test pie chart:

Pure text for options:

{
“chart”: {
“type”:“pie”,

"toolbar": {
  "show": true,
  "offsetX": 0,
  "offsetY": 0
}

},
“dataLabels”: {
“enabled”: true
},

“xaxis”: {
“show”:true,
“type”:“category”
},

“yaxis”: {
“show”:true,
“type”:“numeric”
}

}

I tried also various combination for plotOptions and pie chart general properties that I have found in your documentation, but I’m obviously missing someting…

For labels I use Arbitrary text split by comma to get List of texts:

For series I use also Arbitrary text which is split by comma and then each item converted to number, to get the list of numbers:

But my chart shows only a toolbar and series-1 as name (although I entered TestSer1 for the series name) with no pie chart. When I inspect chart element I can see that X labels and Series1 datas are properly set (at least I think so :)).

But when I choose “Export to csv” from toolbar, I can see that source for this chart is wrong:

I’m obviously missing something, can you please help me with that?

I manage to use bar charts, line charts, date dimensions - everything works great, but I’m now stucked with this one.

Thanks!

[mishav]

I’m no expert on Apex charts, but should the dataLabels, xaxis, etc. be inside the chart object?