Scope of Custom Events

[ihsanzainal84]

JavaScripttoBubble elements have their own WF event. You can set states as an action in those events like you would a custom event.

Read more in their docs
https://toolboxdocs.netlify.app/js2bubble#js2b

[jonah.deleseleuc]

Why don’t you just set a parameter on the custom event? When a button is clicked inside the repeating group cell, you can trigger the custom event inside the workflow and pass in the information you need in the parameter. Am I missing something here?

[boston85719]

@jonah.deleseleuc

Am I missing something here?

Besides the fact that 3 others have already suggested that, maybe only the OPs insistence that is not possible for his use case, but it sounds like he has figured it out already via javascript.

[stuart4]

not sure if you got to the bottom of this one, so I thought I would point you to a way that I do it, similar I expect to @ihsanzainal84 . - this will change your Bubble life, if you dont know it… if you do then this may help someone else

nested reusable data in any direction, not a problem.

install if you haven’t the JavaScript to bubble plugin - I will try to explain a very simple trigger from point A to point B and trigger a custom event from a reusable, then we can talk about data once this is done - then you will get the idea of how this works.

Ill create some arbitrary names for things so i can reference them, but you will understand once this is done and you can use how you need.

Create a new page - call is “page_a” - style it in some basic way.
Create a reusable element called “popup” - make it a popup and style in some basic way.

• within the reusable element create a custom event to show the popup.

Back on “page_a” add the new reusable called “popup”

• Add the JavaScript to bubble element on the page

• change its dimension to be 1 x 1 so its not in the way

• change the field “bubble_fn_suffix” to → open_popup (as in the image)

• tick the box to ‘trigger event’
  

  

• go to the ‘workflows’ tab on the page and ‘create a new event’ - Elements - a JavaScript to Bubble event - select the javascript to bubble element you created

• selected action trigger an event from a reusable element - then select the popup and the open event.
  

  

• Now create a new reusable element for the sake of testing this, call it ‘button_trigger’

• in the ‘button_trigger’ create a button and set a workflow action on that button trigger.

• this workflow action is going to be ;run javascript’ - in the box add this “bubble_fn_popup();”
  

  

No back on the page ‘page_a’ add your new reusable ‘button_trigger’.

load the page and click the button - this will open the popup from one reusable to the other.

Now this is just for a basic illustration in triggering an event - now the data part.

So once the above is working we will display some arbitrary text from the reusable “button_trigger” on “page_a” to the reusable “popup” also contained on “page_a”.

On “page_a” navigate to the JavaScript to bubble element and

• change the tick box to ‘publish value’

• then the value type to ‘text’
  

  

• now navigate to the popup reusable element “popup”

• create a state called “receiving_text”

• add text element to the page - and set the dynamic value to the the state you created.

• edit the custom event that opens the reusable and add a parameter of “receiving_text” - make it a text value.

• set the state of the reusable ‘popup’ to the value of the custom event parameter you just created.

• navigate the the ‘button_trigger reusable’ where you are sending data from.

• edit the workflow and amend as below.

bubble_fn_popup(“hello”);

→ youll notice you are sending data back this time, which is arbitrary text “hello” - this can be other data but for this is just text.

• now navigate back to “page_a” and go to workflows - edit the javascript tp bubble event that triggers the custom event from a reusable and set the new parameter its expecting to 'this javascript to bubbles value.
  
  

Now test it - you should have a popup with hello as a custom state that has been received from another reusable.

let me know if that helps or not

**Caveat- I deliberately added a layer of complexity to this by adding the receiving elements of the data as a popup (or a non visible element on the page) as i encountered an issue when I tried to use it with popups and floating group. So, IF both elements (reusable etc) are visible on the page you can add the receiving element directly within the reusable. IF they are not visible elements it wont work correctly - as in the js to bubble docs.

[ken1]

Correct. The issue is not getting data to the custom event. I do that a lot. The issue is using that data from the custom event to either change the value of an element or the state of an element that is out of scope for the custom event. It can’t see the element.

[ken1]

This will be very helpful. Thank you! It will take me some time to work through your example and understand it, but I think I will be making use of this.

Can I assume that this will work for repeating groups too? I can assign a dynamic ID using the current cell index to help identify “which” of the elements (rows) to use. I might have to restructure the bulk of my app using this if that works, but the benefit will be worth it.

Thank you.

[boston85719]

Thanks for sharing this. I’m excited to try this out…

@stuart4

this will change your Bubble life

Looking forward to that, I need a new thing to learn in Bubble. I believe you helped me out with some javascript in the past for group focus position, so really excited to try and dive deeper into this stuff.

Quick question…in the example screen shot for the JS2B open_popup you have the bubble_fn_suffix value set to open_popup

Then in the run javascript you have the script value as bubble_fn_popup

Should the script value for the run javascript action be bubble_fn_open_popup?

[stuart4]

Thats a typo, as i was trying to get the example out whilst working on something, apologies.

It should be: bubble_fn_open_popup

The name can be anything obviously, as long as they match on receiving and sending ends.

[stuart4]

I hope i explained it as clear as i could, and there should be no issues with repeating groups, although Ive not needed to use yet.

I suggest to test maybe amend the ‘button_trigger’ reusable above and instead create a repeating group with buttons instead and try to send the index or some other value to the popup?

i may write a separate tips post on some findings with this, as there are some other cool things you can do ( and plenty i don’t know) where other smarter folks than me may contribute.

an example format where you get more data for example: bubble_fn_CRUD_popup_message({output1: “Map analysis”, output2: “There have been no submissions received at this time.”});

on the receiving JavaScript to bubble element tick multiple outputs, and in output1, select text (as the data being sent) and the same with output2.

With this the text is send through to the receiving end and you would use a workflow to get the data from each output where you need it, database, state, anything.

[stuart4]

you could send an the UIDs through as text elements and then run a ‘do a search for’ and get the data - or send the data.

[jonah.deleseleuc]

I didn’t read the part where he said he cannot use elements in the RG. That’s why I was confused, I just didn’t see why he can’t do that. Also, I’m curious as to why he can’t do that? I think it’s bad practice to try and access the data using javascript because maintaining that is going to be complicated. However, if it’s necessary…

I would like to warn you all about using the javascript to bubble functions that come along with Toolbox. They are quite useful, but I’ve ran into situations where they work strangely. This is due to inconsistent timings of different actions / loading times of elements or data inside of bubble. While it might work on your computer (a function that you create) it could easily not work on the device of someone else or on a slower network. If you can grasp javascript already, it’s worth it to create a plugin where you can better control the timing of when you’re accessing data and publishing data. You will run into much less bugs this way, you will be able to make edits to workflows without by accident messing up your code and it will have better performance.

However, if you’re not super comfortable with javascript, then I understand why you want to use a few lines of code you got from the internet and handle the rest with bubble logic. But be warned!

My suggestion to @ken1 is to create a plugin instead of using the toolbox plugin! You will save a lot of time and headache in the future

[stuart4]

I just made a little test site for myself that will give you some idea about how this fits together, its a work in progress, may change as I experiment with new ideas.

https://sandy-box.bubbleapps.io/version-test/app/users ← user/pass
editor: Sandy-box | Bubble Editor

It may disapear at some point, as these things do…