Toolbox plugin - collection of utility elements

Is anyone noticing a WU spike using List of Numbers function? I :count a repeating group to populate the list of number. Use that to display pagination data.

Wondering if I should move this function to list shifter as the list of numbers is my highest WU consumption at this point.

Any thoughts appreciated. Thanks

List of Numbers does not contribute to WU.

I’d suggest optimising the way you do the count, is it triggering a search too often? Perhaps calculate the count via a workflow, and store in a custom state, so you have more control over when it is repeated?

1 Like

Thank you, this makes sense. I’m looking into ways to reduce WU to populate the list of numbers.

I have a complex dashboard page that is receiving new data items frequently and has multiple filter criteria changing the number of items in the paginated RG very often.

For the Pagination to work I need to consistently count the RG being paginated to calculate the page numbers, etc.

I’m not convinced custom states would stay clean counting the RG items especially with new db items being introduced.

Hello, I started using ToolBox plugin for different needs. It is very useful. THANKS. I cannot modify certain values ​​of a custom state (not a list) based on a Bubble datatype. The script below modifies the object by adding attributes (key/value) rather than modifying the value of the corresponding key. Is this possible with the plugin? What is the correct syntax? Here is the javascript code:




I found in the case of a custom state based on a response from the API Connector “api_c2…” but I can’t find it here. Thank you in advance for your help. @mishav

Hello, Everyone, i dont know how to get the json data to display in a text field or even store in the data base


this is the run java script workflow


this is the data that should be received


this is how i set up the JS to Bubble element

i am wondering what im doing wrong, the JSON data is correctly being returned, i just dont know how to access it

i am very new to bubble so i dont really understand this

have you loaded the script in the page header?

UPDATE 2: SOLVED

I finally figured out that I need to place my dynamic data into the parameter fields and then use the properties.param1 syntax in my script. Now the values are correct and the script runs without errors!

Here is the final code:

bubble_fn_RemoveFromSortedList( 
{ 
output1: properties.param1, 
output2: properties.param2
} );

UPDATE:

I managed to send the correct data now. I needed to make the data type Text for output1 and remove the quotes when I name the unique ID. I think because it was already a string it did not need the quotes.

But now the Javascript to Bubble Event is no longer firing! As you can see from my screenshots below, the event is triggered and I can examine my variables.

Now, as I step through, that event no longer triggers. Any ideas?

I think I have output1 correct now because the data types match and there were no errors apparent. But I am getting this server error now:

Screenshot 2024-02-09 at 9.00.06 AM


I’m trying to trigger an event on the page from a reusable element. I’m getting close, but one of my parameters is always empty. Here is what I have:

Run Javascript: (in reusable element)

output2 is working fine.
output1 I want to pass the Thing (data type ActionBlock) to my event, but if I understand correctly, I have to pass the ID which is text. I have defined the data type for output1 as both text and ActionBlock with the same result. The value is empty (see below for more detail).

When I add a breakpoint in the debugger, I can see that Run Javascript has the correct values to pass in the function:

But when it gets to the Javascript to Bubble Event, output1 is empty and output2 has the correct value (I use the number of the sortOrder to find the option in my Option Set that matches and then grab the name. That’s why they look different. I can just use the name because they are not unique):


Screenshot 2024-02-08 at 11.41.36 PM

Here are the rest of the settings on the main page:

Javascript to Bubble element settings: (on main page)

Javascript to Bubble Event: (on main page)

Does anyone see anything I am doing wrong? How am I supposed to pass a custom data type as a parameter so I can use it in an event (and pass it to another custom event on my main page)?

Thank you!

No, I probably have not. Is it a element I need to place, or is it a workflow? Thanks a ton for your help Oliver!

1 Like

All good, for Toolbox to be able to use a JS function it needs to be defined.

So in the page page html header you need to add in a snippet like this one but the one from the google service you’re using.
image

Does that make sense?

Aha! Makes sense. I already have this configured with Cloudflare Zaraz, I guess they’re somehow not speaking to each other through there so will have to see if it works if I do it directly inside of Bubble. Thanks Oliver!

1 Like




image

Can someone help me understand why this is happening? If feels like toolbox is being blocked from reading my scripts. The weird thing is it is only happening to a couple of my hundreds of users.

How can I debug this?

The error says that the function gtag is not defined.
I think you didn’t add the initialization script to load GTM in your website or page header. You can add the import script in Bubble Settings > SEO / metatags so it will be available on all your pages.

Follow these steps on GTM docs, it should look like this (add your own container tag):

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->
1 Like

@mishav Is it possible to extract the content of a RG using this and submit the data to an API?

You can also extract content of a RG and use it as a plain text list or specific JSON format using the Bubble operators :format as text and :formatted as json safe.

Check the docs to know more about how to use them for your use case:

No need to use JavaScript.

But it’s also possible to use the Toolbox plugin and “run javascript” workflow action to build a payload with your JSON in which you insert dynamic values. When doing this, ensure you properly add the double quotes (") around values that should be strings, and transform numbers into numbers with functions like parseFloat() or parseInt() because otherwise they are interpreted as strings.
Be careful because numbers in Bubble are written with a comma so you also have to replace the comma (,) by a point (.) before using the parseFloat().

Here is an example of a script in my project, where I build a JSON payload to be used by a function defined in my page header, with a list of Things saved in page state turned into a proper JS list with numbers like [[2.4, 3.5], [1.2, -3.6]]:

Also note that I didn’t add the quotes around the inner content of JS arrays, only around strings and numbers.

The script seem to work perfectly. What is the issue exactly? You want to enter more than 7? Change the number 8 to something higher?

Hi. I posted my question in the main Help topic, but I think I should have put it here. Instead of reposting it, here is the post I made:

Hey Misha,
I am trying to use you plugin on a field that should lowercase any uppercase letter.
There is an issue that I cannot figure out, the JS works only when I focus > unfocus >Refocus again on the field.

Any suggestions?

The code I used

function waitForElement(id, callback) {
            var element = document.getElementById(id);
            if (element) {
                callback(element);
            } else {
                setTimeout(function() {
                    waitForElement(id, callback);
                }, 100);
            }
        }

        function convertToLowerCase(inputElement) {
            inputElement.addEventListener('input', function() {
                console.log('Input changed:', this.value);  // For debugging
                this.value = this.value.toLowerCase();
            });
        }
        
        waitForElement('artist_name', convertToLowerCase);

this is the link on the Artist name field

Why is this not an official plugin? Kind of bizarre.

1 Like

Hello, like many others I am encountering an error with the plugin… @mishav could you please help me fix the issue:

The plugin Toolbox / element Expression threw the following error: SyntaxError: Unexpected identifier ‘startDate’
at eval (PLUGIN_1488796042609x768734193128308700/Toolbox-update–Expression-.js:3:134)
at https://openocean.website/package/run_debug_js/9b1455bf9f5484614456e64cc5dca0bb06244cca0edf5bbbec61cd1d1ee68783/xfalse/x29/run_debug.js:593:651

I’ve been using the Toolbox in a number of ways, but always with few values to pass. I have a situation that confuses me. It seems like the list of parameters doesn’t match up with the list of outputs. Of course, I know it will, but here is what I mean:

In the Run Javascript action, there are five parameters and five parameter lists.

In the element where I define the data types, there are only four outputs and four output lists. But there is also a single value or a single list (but not both at the same time).

I suspect I am not matching them up correctly, because the values in my JS2Bubble event are empty. Here is my JS script:

bubble_fn_sortCollapsibleList( 
{ 
output1: properties.param1,
output2: properties.param2,
output3: properties.param3,
output4: properties.param4,
outputlist1: properties.paramlist1,
outputlist2: properties.paramlist2,
outputlist3: properties.paramlist3
} );

How do I map these correctly? Thanks!