The Bubble.io Toolbox Plugin | How to save a value from Javascript to Bubble | Bubble.io Tutorials

hey what's up you guys hope you're doing well so i wanted to answer another question from the forum about the toolbox plugin so this was posted by neil pierce i'm using the toolbox plug but plugin and the javascript to bubble feature for some reason i can't store the value it publishes to the database i can see the value in a text element or in a custom state so i know the value is there and working it just won't save the value to the db so obviously this question has been solved and the answer is right there but i wanted to take this as an opportunity to just kind of talk about this one feature of the toolbox plug-in this javascript to bubble element because the toolbox plug-in is something that i use all the time now in every app that i create and it's also something that i think when i first started before i really knew how it worked it was something that was really confusing and i kept seeing people talk about it in the forum all the time about how it was this great plugin that you could use to do so many things it took me a long time before i actually realized how it worked so we'll talk about one part of the toolbox plugin today which is this javascript to bubble element that we can use and if you already know how this works then that's fantastic but if you don't know how it works and if you're curious about this javascript to bubble feature this element that you you see your both the toolbox plug-in in general then do keep watching um if you're new here my name is jacob i am the founder of jdev um and if you'd like to learn how to build on bubble with me all of the links that you need are below this video so click on them and uh yeah come learn with me be fun anyways let's get started i'm going to jump into bubble here and we have a page inside of the editor that looks like this okay so four inputs all of these inputs have numbers inside of them and default values and we're basically just going to do a calculation here so the calculation is going to be what is 5 divided by 10 and again this is just input 1 divided by input 2 multiplied by input 3 minus input 4. and we can't just take a text element and do this math like this we can't just say input 1 value divided by input 2 value times input 3 value minus input 4 value the reason we can't do this is because bubble just takes this expression and goes from left to right and we are concerned about the order of operations here thinking back to high school math right so what i want to do is i want to put some brackets around this first part of the expression but i can't really just do this inside of a text element like this in bubble so there are a few different ways to solve this problem we don't have to use the javascript to bubble element to do this by any means but i wanted to use this as an example here because doing some more complex calculations is one thing that this javascript to bubble element or just javascript in general is is really great for and it's one way that i often use javascript inside of bubble for more complex calculations but again you certainly don't have to use this plugin to do this then there are many other reasons why you would want to use the javascript to bubble element or just javascript in general that have nothing to do with with math so with that said let's take a look at how we can do this now i have the toolbox plugin installed right here and what we're going to be using from this toolbox plugin is this right here this javascript to bubble element so i'm going to go to the design tab and i'm going to drag this onto the page and there we go we have our javascript to bubble a element now the first part of this plugin this element rather the first property that we're concerned with here is this bubble fn suffix here and if we click on show documentation it says type the suffix to create a function name for example type a and a function named bubble fna is created ready for javascript to call now if that sounds like complete gibberish that's okay it did to me at first too but let's take a moment here and just talk about what a function is in javascript okay so i'm gonna hop over to this tab right here on codepen and we're gonna play around a little bit with some code here and i'll have to move myself out of the way to the left in order for you to see this properly but what i'll do is i'm just going to put a button on our page here we go so we have this button and if i click on it right now nothing is happening but what i can do is i can create a function down here that i can call when this button is clicked now a function in javascript is basically just like a piece of code a set of instructions that will do something when you call it okay so for example the way that we create functions in javascript we can create them in a few different ways but what i can do is i can say function do or let's just say say hello which is the name of my function and i'm going to put these brackets like that and then inside of these curly brackets i actually write the instructions so that when this say hello function is called whatever i've written in here will happen for now i'm just going to say alert we'll say hi so we have this function here that we've created and what i can do is when button click me is clicked i can add some instructions here for an on click event so i'm going to write on click and whoops let's do on click equals what we can do here is type the name of our function that we want to call so when this button is clicked we want to call this say hello function just like that and now watch what happens if i click this and i think i am sharing my entire desktop so you should be able to should be able to see this alert hopefully but if i click this there we go we see this alert comes up that says hi so i mean if you think about this like translating what we just did here to bubble it's very similar right we're creating a workflow in bubble and when we create a workflow what are we doing we have some piece of code that runs basically that does what all of these different actions that run that we've defined earlier very similar to what we have here right another important thing to understand about functions so we can they can take properties right so what we can do let's change the function name here let's just say do math okay and do math is going to take two properties let's just say number one and number two but whenever this function do math is called we're going to receive these two values and let's just say for now we're going to alert number one plus number two and what i can do now is when i call this function when this button is clicked i can say we changed the name of it so let's change the name here do math and we're going to inside of these brackets here we're going to pass these two values for number one and number two so i'm going to say let's just say five and three so these two numbers will be passed into this function and then we're going if we've set things up properly we should see number one plus number two in this case we should see eight inside of an alert all right so if we click on this there we go there's the number eight okay so now that we know there's obviously a lot more to uh to functions in javascript and a lot more things that you can do with javascript but now that we know how functions work at least a little bit let's go back into bubble and look at this this problem here one more time type the suffix to create a function name for example type a and a function named bubble fna is created and ready for javascript to call so i'm going to create a function name here bubble fn say do math now what we can do is inside of our workflow actions we can let's go back to the plugin for a second you can see that we have this action that comes with this plugin called run javascript right so let's say that when this button right here is clicked what do we want to do we want to run some javascript we want to basically do this calculation that we talked about earlier so i'm going to say start edit workflow we'll click to add an action the action will say run javascript and now we can run some javascript inside of here so i'm going to define a few variables number one will be equal to input number one's value and so on number two will be equal to input number two's value and let's make sure that the spacing is right between them and we'll say number four is equal to input four's value okay and now that we have our variables defined here again there are a number of ways to write this out you don't have to do it this way but what we'll do is we'll define another variable called the solution going to be equal to number one what was it i forgot what we were doing with number one divided by number two times number three minus number four okay and now how this all ties together with that element if we look at it what we can do is we can call a function called do math now and pass a value to this function right so inside of my javascript here at the end what i'm going to do is i'm going to call this function now how do i call this function the way that i actually do that is by typing bubble fn and then whatever suffix i've put right here so inside of my code i'm going to write bubble underscore fn and we're going to say do math and you can see from the documentation here from this plugin that it says for example blah blah blah if if we want to publish a value which we do here if checked the first argument to the function will be published as a value in bubble okay so the first argument to the function let's check this and then just like we did inside of codepen here i can pass a value to this function and the value that we want to pass here is going to be the solution right what we've defined right here okay now what we can do another thing that we forgot to do with this is we want to say what type of value this javascript to bubble function or this javascript to bubble element is going to hold because again you can think of it like this element exists here we're running some javascript somewhere else and then passing a value back to this element and the value type that we're passing back is going to be a number right here right we're going to do some calculation right here and pass a number back and so this is happening once that button is clicked let's make sure this works what we'll do is i'm just going to create another text element down here clear everything and all i'm going to do inside of this text element is i'm going to reference this javascript to bubbles value here we go okay so hopefully we set everything up right let's preview this and what should we expect here 5 divided by 10 would be 0.5 multiplied by 20 minus 15 which would be five so we should expect 2.5 if we've done this right and there we go right calculate 2.5 if we change the value here to 5 divided by 20 and press calculate again then we get some new value right here so that's one way that we can use the javascript to bubble element from that toolbox plugin now again like i said it's it's not the only reason we would use that element to do math like this there are lots of different reasons why you would want to use javascript and publish a value to this javascript to bubble element it's handy for a number of things but as long as i think what took me a long time to understand when i was learning this stuff is that process where we can run some sort of javascript whatever we want to run inside of a workflow action and then publish that value to this element right here by calling this function bubble fn do math or whatever you're going to call it in your situation and then passing some value to it like this right now if we go back to the actual question too the question from the forum was about how do i actually take this value that's passed to the javascript to bubble element here and save it to the database and if you go and read the solution on the forum the solution has to do with this trigger event right here so if i check this box what's really cool is i can go back to my workflows and i can click to add an event and if i go to elements you can see now that i've checked that box it says a javascript to bubble event right here right so when javascript to bubble a's event in this case basically when javascript to bubble is has an event or has some value passed to it we can trigger an event that happens let's say that we wanted to save this number to the database um i don't have a field set up for it but let's just say data make changes to [Music] the current user and we'll create a new field for the current user called number will be a number and if i wanted to save whatever value was passed to that javascript to bubble element i could say that number is equal to this javascript to bubbles value just like that right that's what is passed to this event is this javascript to bubbles value and because i've said that the value is a number here we're fine to save that value right if i change this to a text we're going to get an error because bubble is saying hey this field that you just created is a number but you're trying to pass a text value to it right now which doesn't work all right so that's about it let me know if you have any other questions in the comments below about this this plug-in and again this is there are a number of different use cases so don't think that um you're only going to use this for math because once you start learning more about javascript and all of the different ways that you can use it as long as you know how to publish a value to this plugin element right here like we just went over in this video you'll be able to use it for a whole number of different things anyways that's all i have to say right now i'm sure that i'll make more videos in the future about this toolbox plugin because we can use it in a number of different ways so i hope you found that useful and i'll see you again later bye

Channel: Jacob Gershkovich

Views: 20,642

Keywords: apps without code, bubble.io, bubble.io tutorial, build an app without coding, learn bubble.io, no code app development, Bubble.io plugin tutorial, bubble.io plugins, Bubble.io toolbox plugin, how to use plugins in bubble.io, how to use the toolbox plugin in bubble.io, Javascript to bubble, bubble.io lesson, learn no code app development

Id: 9jVEzPLRebI

Length: 17min 1sec (1021 seconds)

Published: Fri Jan 28 2022