OMG I cannot thank-you enough for this. I'm new to Bubble and about ready to give up on it trying to figure out how to write my own functions. This -- the way it actually works -- is fairly simple and straightforward (now that you made this video) and NEVER would I have figured this out. It is 100% NOT intuitive... at least for a programmer. I had a hundred different ideas in my mind for how the hell to use this, and none of them were to have the element act as a 'function' with an argument that IS the 'value' you wish to use (somewhere else). It makes the "run javascript" part easy now that I know its entire job is to end up sending a value to that element, etc. But I was so focused on my "run javascript" RETURNING something rather than passing a value into a function call that is a function I never actually see except as the name of an element... ahhhhhh OK I get it but, whew. In my perfect world, the workflow lets values propagate left to right in the Actions. So you could send the result of something to the NEXT action etc. But I guess this is not so bad. I'm afraid to ask my next question, which is ok what about accessing global variables as part of this... like what does "run javascript" actually have access to? [not expecting an answer, as this is an old post, so just THANK-YOU]
I think the magic of the run javascript action is that you can create your own native bubble expressions like you would anywhere else ("insert dynamic data") but inside of a javascript function. So you could, for example, access the value of custom states (kind of like a global variable?) inside of a "run javascript" action. Let me know if that makes sense!
BRILLIANT! So insightful. Reducing what would take me hours to figure out (maybe I'd just give up) - took only 10 minutes with 2x speed. You're a great teacher Jacob!
DUDE thank you so much for making this I have been smacking my head against the desk for days trying to get the javascript element to work for me thank you!
Hello and thank's for the video it's very helpfull, it could be interesting if you do one maybe where you take a value type then the result could be another type ( in my case i would like to use date to calculate range time and save it as a number in the database) Cheers ! i know you video is a bit old but still very helpfull
Thanks .... a well paced, well thought out instruction of what 'was' a complete mystery to me. I now have many windows of opportunity opening in my mind as to how useful this new knowledge is going to be.
Hi J|dev. Thanks for the video. I would like to know how you would calculate an average of 3 inputs using the Toolbox plugin, that even if one input is empty it would still give the correct average of the 3 inputs that are not empty. Thanks
Thank you very much, It helps me a lot and save my time, I have faced a problem when I assign const a bubble element's value, I kept getting "Syntax Error: Unexpected token ':' can you help?
just came across this tutorial! It's really helpful. I had come across that toolbox but never understood what it's for. Based on what you said in the video about other use cases, how would you go about implementing a simple SDK that is primarily a JS library but has some HTML/CSS components to it?
Thanks! Glad you found it helpful. Depends on the SDK. I got the TalkJS chat sdk working using the toolbox plugin. Will likely make a video on this at some point in the future. talkjs.com/docs/
thanks alot for this. I find it really weird that a coding software doesnt have a more straightforward way to use variables. What's the scope of these variables? Can you call them from other pages? or is every script isolated from the rest?
You can call a function that exists inside of reusable "A" from reusable "B" so long as both reusables are on the same page. It gets pretty messy pretty fast. Between pages is a no go out of the box but you could hack something together.
Hey Jacob...thanks for doing this. Question...how do you handle an object that is returned from a fetch. (for example, lets say I want to fetch user detail from Xano without it hitting the Bubble logs). I created a value type in the API Connector and tried to use that with the Javascript to Bubble connector. I am able to fetch the data, and can see it with dot notation, but when I tried to reference the individual fields from the element itself, they come up blank.
Hard to say what might be going on here without seeing how you’ve set everything up. One thought that popped into my head was that it sounds like it might be a timing thing?
Great Video and I was able to implement it with my use case. So, thank you! However, I think there is a bug in the plugin. In my first implementation calculating something before adding to DB, it works fine but when I'm editing a record and recalculating (with a different JStoBubble, it doesn't work. What happens is that the JS calculates and returns the value in the variable but the function doesn't pass the value to JS2Bubble the first time but does pass THAT value the second time edit functionality is used!! This updates a blank value in the first record, the first record's edit value in the second edited record, and so on. Any idea why this could be and a possible solution? TIA!!
Let's imagine you have a form, when you click on the submit button, it will create an entityA. But the form contains also a field where there are multiple values, and each values needs to be created as an entityB. How do you manage this case in bubble ? To be more concrete, via a form, I can create a restaurant in the database. But, in the same form, the restaurant can propose different event dates. When I submit the form, I would like to create the restaurant in the the Restaurant table, and if we filled 3 events, then creating also 3 records in Events table. The events field in the form could be - we have 1 field "events" containing : 11/03/2022 8:00 pm, 12/01/2022 8:00 pm, 12/03/2022 8:00 pm - or having a dynamic additional field each time we add a new date. This is a simple behavior that I used to implement often as developer, but in Bubble, it seems so complicate.
Why not create the date events while the user is going through the form before hitting submit? Alternatively, you could create the restaurant and pass the dates off to the backend to create all those events when the user submits.
@@jacobgershkovich i can’t because I need to link those event to the restaurant. So we need to create the restaurant first. But about your alternative, how do you do to loop through each event ? I mean either you have multiple dynamic field, so how do we retrieve each value ? Or either we have a field with multiple date separated by comma, so how do we split and loop over it ?
2:30 it is really unbelievable that bubble doesn't want to implement a prioritiy way to write expression such as this or those in the conditional statements....
@@jacobgershkovich Hey Jacob, I meant when a user logs in to refill his mail from the browser data... actually I already figured it out with the JS Toolbox plugin :) was a trial-error process but did it somehow :D
Please more JavaScript/ bubble videos
Your tutorial is even helping people after a year. Hats off to you man
OMG I cannot thank-you enough for this. I'm new to Bubble and about ready to give up on it trying to figure out how to write my own functions. This -- the way it actually works -- is fairly simple and straightforward (now that you made this video) and NEVER would I have figured this out. It is 100% NOT intuitive... at least for a programmer. I had a hundred different ideas in my mind for how the hell to use this, and none of them were to have the element act as a 'function' with an argument that IS the 'value' you wish to use (somewhere else). It makes the "run javascript" part easy now that I know its entire job is to end up sending a value to that element, etc. But I was so focused on my "run javascript" RETURNING something rather than passing a value into a function call that is a function I never actually see except as the name of an element... ahhhhhh OK I get it but, whew. In my perfect world, the workflow lets values propagate left to right in the Actions. So you could send the result of something to the NEXT action etc. But I guess this is not so bad. I'm afraid to ask my next question, which is ok what about accessing global variables as part of this... like what does "run javascript" actually have access to? [not expecting an answer, as this is an old post, so just THANK-YOU]
I think the magic of the run javascript action is that you can create your own native bubble expressions like you would anywhere else ("insert dynamic data") but inside of a javascript function. So you could, for example, access the value of custom states (kind of like a global variable?) inside of a "run javascript" action. Let me know if that makes sense!
BRILLIANT! So insightful. Reducing what would take me hours to figure out (maybe I'd just give up) - took only 10 minutes with 2x speed. You're a great teacher Jacob!
DUDE thank you so much for making this I have been smacking my head against the desk for days trying to get the javascript element to work for me thank you!
Easy to follow - thanks!😁
very insightful! I'd definitely like to see more videos showing the power of javascript and/or CSS inside bubble!
Best tutorial ever on Bubble related items - thanks fam
Thanks for the kind words Sonny!
VERY USEFUL! Thankyou !
Thanks Jacob.
I want to create an event when someone press and hold on their messages to delete or something.
We would love to your video for that.
Hello and thank's for the video it's very helpfull, it could be interesting if you do one maybe where you take a value type then the result could be another type ( in my case i would like to use date to calculate range time and save it as a number in the database)
Cheers ! i know you video is a bit old but still very helpfull
The second time I got the solution from this channel, great work! you're like the webdevsimplified channel for Bubble.io version
Thanks .... a well paced, well thought out instruction of what 'was' a complete mystery to me. I now have many windows of opportunity opening in my mind as to how useful this new knowledge is going to be.
Thank you! This video was super helpful and solved my problem.
Awesome, Thanks Jacob.
Thanks for watching!
Such a great video ! SO insightful... Thank you VERY Much !!
Glad it was helpful! Thanks for watching :)
Its so good man!!! thanks a lot!!!
Thank you! Quick question: how do you handle it if your JavaScript returns multiple different variables? (I.e seconds, minutes, days)
thank you so much. I will try to remove 9 lines of text from OFX files, which is a type of file sent by banks.
Thank you, this has answered a few questions. I am just starting out, and I utilising Javascript quite a bit. How do I use Javascript for triggers?
Hi J|dev. Thanks for the video. I would like to know how you would calculate an average of 3 inputs using the Toolbox plugin, that even if one input is empty it would still give the correct average of the 3 inputs that are not empty.
Thanks
awesome tutorial thanks for sharing
Could you show an example where i would capture a webcam image to record in Bubble´s database? Thanks!
Thank you very much, It helps me a lot and save my time, I have faced a problem when I assign const a bubble element's value, I kept getting "Syntax Error: Unexpected token ':' can you help?
awesome!!! Do you know how we use other library with Toolbox plugin?
Thanks :D
Anyone know if I can use the animation library GSAP with Bubble?
thank you!
You're welcome!
What if you want to run the Javascript as a backend workflow
Thanks a lot, your tip is really helpful. 👍
Great video. Thanks for the explanation.
Glad you enjoyed it!
Saved the day. Thanks.
Can you show how to parse json using that plugin 🙏
just came across this tutorial! It's really helpful. I had come across that toolbox but never understood what it's for.
Based on what you said in the video about other use cases, how would you go about implementing a simple SDK that is primarily a JS library but has some HTML/CSS components to it?
Thanks! Glad you found it helpful. Depends on the SDK. I got the TalkJS chat sdk working using the toolbox plugin. Will likely make a video on this at some point in the future. talkjs.com/docs/
how to use bubble events by jascript without using workflow?
Amazing!
Thanks Douglas!
thanks alot for this. I find it really weird that a coding software doesnt have a more straightforward way to use variables.
What's the scope of these variables? Can you call them from other pages? or is every script isolated from the rest?
You can call a function that exists inside of reusable "A" from reusable "B" so long as both reusables are on the same page. It gets pretty messy pretty fast. Between pages is a no go out of the box but you could hack something together.
Do you know, if the javascript code will be visibel to the end-user via developer tools in chrome for example?
Should be, yes!
Hey Jacob...thanks for doing this. Question...how do you handle an object that is returned from a fetch. (for example, lets say I want to fetch user detail from Xano without it hitting the Bubble logs). I created a value type in the API Connector and tried to use that with the Javascript to Bubble connector. I am able to fetch the data, and can see it with dot notation, but when I tried to reference the individual fields from the element itself, they come up blank.
Hard to say what might be going on here without seeing how you’ve set everything up. One thought that popped into my head was that it sounds like it might be a timing thing?
Great Video and I was able to implement it with my use case. So, thank you! However, I think there is a bug in the plugin. In my first implementation calculating something before adding to DB, it works fine but when I'm editing a record and recalculating (with a different JStoBubble, it doesn't work. What happens is that the JS calculates and returns the value in the variable but the function doesn't pass the value to JS2Bubble the first time but does pass THAT value the second time edit functionality is used!! This updates a blank value in the first record, the first record's edit value in the second edited record, and so on. Any idea why this could be and a possible solution? TIA!!
Hard to say without looking at the editor and diving into the weeds!
Great! I would like to know how to calculate the input elements in text format, like 2.36 * 5, even if the DB is text. It's possible?
Definitely possible
Let's imagine you have a form, when you click on the submit button, it will create an entityA.
But the form contains also a field where there are multiple values, and each values needs to be created as an entityB.
How do you manage this case in bubble ?
To be more concrete, via a form, I can create a restaurant in the database. But, in the same form, the restaurant can propose different event dates.
When I submit the form, I would like to create the restaurant in the the Restaurant table, and if we filled 3 events, then creating also 3 records in Events table.
The events field in the form could be
- we have 1 field "events" containing : 11/03/2022 8:00 pm, 12/01/2022 8:00 pm, 12/03/2022 8:00 pm
- or having a dynamic additional field each time we add a new date.
This is a simple behavior that I used to implement often as developer, but in Bubble, it seems so complicate.
Why not create the date events while the user is going through the form before hitting submit? Alternatively, you could create the restaurant and pass the dates off to the backend to create all those events when the user submits.
@@jacobgershkovich i can’t because I need to link those event to the restaurant. So we need to create the restaurant first.
But about your alternative, how do you do to loop through each event ?
I mean either you have multiple dynamic field, so how do we retrieve each value ?
Or either we have a field with multiple date separated by comma, so how do we split and loop over it ?
Amazing! 🙌
2:30 it is really unbelievable that bubble doesn't want to implement a prioritiy way to write expression such as this or those in the conditional statements....
Hey Jacob would you make a tut about how to make bubble prefill a contact form from the browser data using the JS toolbox plugin ?
What kind of data are you hoping to get from the browser?
@@jacobgershkovich Hey Jacob, I meant when a user logs in to refill his mail from the browser data... actually I already figured it out with the JS Toolbox plugin :) was a trial-error process but did it somehow :D
can we call node packages inside of this functions ??
You can build plugins that utilize node packages!
Excellent
Thanks!
Still not working on my app lol