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!
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!
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!
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
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 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?
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
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?
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.
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!!
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/
@@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
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....
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 ?
Your tutorial is even helping people after a year. Hats off to you man
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!
Please more JavaScript/ bubble videos
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!
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!
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!
Easy to follow - thanks!😁
Thank you! This video was super helpful and solved my problem.
The second time I got the solution from this channel, great work! you're like the webdevsimplified channel for Bubble.io version
Thank you! Quick question: how do you handle it if your JavaScript returns multiple different variables? (I.e seconds, minutes, days)
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
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.
Could you show an example where i would capture a webcam image to record in Bubble´s database? Thanks!
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?
VERY USEFUL! Thankyou !
Such a great video ! SO insightful... Thank you VERY Much !!
Glad it was helpful! Thanks for watching :)
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.
Where is the Calculate Button workflow or javascript handled?
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?
Great video. Thanks for the explanation.
Glad you enjoyed it!
Its so good man!!! thanks a lot!!!
Awesome, Thanks Jacob.
Thanks for watching!
awesome!!! Do you know how we use other library with Toolbox plugin?
Thanks :D
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
Anyone know if I can use the animation library GSAP with Bubble?
What if you want to run the Javascript as a backend workflow
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
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?
awesome tutorial thanks for sharing
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.
Saved the day. Thanks.
Can you show how to parse json using that plugin 🙏
Do you know, if the javascript code will be visibel to the end-user via developer tools in chrome for example?
Should be, yes!
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!
how to use bubble events by jascript without using workflow?
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.
Thanks a lot, your tip is really helpful. 👍
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/
Muito bom parabéns pelo vídeo!!
What if the return value are in lists ….
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
Amazing! 🙌
can we call node packages inside of this functions ??
You can build plugins that utilize node packages!
Amazing!
Thanks Douglas!
Excellent
Thanks!
thank you!
You're welcome!
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....
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 ?
Please more javascrip i'd like
Still not working on my app lol