Thank you for joining me for this tutorial, JavaScript with Servoy Part 2. Preservoy University, this is Scott Butler. In this hands-on tutorial, we're going to go through some examples of using JavaScript inside of the Servoy IDE. You can see I've got Servoy already open here. And what we're going to do is start with the concept of functions, because that's really where all your business logic gets coded at in Servoy. So we're going to start with global functions, like we talked about earlier in the slide. So I already have a solution open here called ServoyUDemo, and I can see that there's a global node underneath of it. When I click on that global node, down below it's going to show me all of the global methods that are defined for that solution. And remember, global is defined at the solution level. So each solution has its own set of global methods. So what we're going to do is make a new global. I can do that by clicking on the button here, or I can right-click on the global's node, and I can click Create Method. And for this method name, we'll call it test one. You'll notice as soon as I do that, it automatically opens up into a global's.js file. This is actually the JavaScript file that holds all of the global functions for the ServoyUDemo. So for example, if I were to come back here and make a new function, and notice that actually the exact verbiage here is Create Method in Servoy. Essentially a method and a function are used interchangeably throughout the Servoy IDE. So let's go ahead and create a new one, and we'll call this one test two. So now you can see I have two different functions defined here. You'll notice that each of the functions has these blue comment areas above here. These define the UUID for the function. So the UUID is just a unique value that ServoyUes uses to reference this function. So this is an area that you shouldn't really play around with much. We'll show you later how you can add some additional documentation using JS doc up in this area. But for now, we're going to focus on the functions themselves. So let's go ahead and get started with a basic example here. So I'm going to come up into my function test one, and we're going to clear out that comment, and we're going to start writing our code. And let's start with using variables and values. So in ServoyU when you want to declare a variable, you start by using there. And then you give it a name, so we'll call it my there. And I can set it equal to a value. Now it's also important to note here that I've declared my there with a capital V. When you're working with JavaScript, everything is case sensitive. So you want to be very careful with that. I can also use for debugging an application dot output command. So if I come over here to my solution explorer, I can see that there's lots of nodes here that I can work with. We're going to go through each of these in more detail. We're going to start with the application node. And if I scroll down here, I'll see a function called output. So notice when I click on that down below, it gives me some more information about how to use this. So I can see the arguments that it takes in, and I can see a description of how to use it. And I can scroll up and down in here if I need to see more info. And if I want to actually move this over into my code editor, all I need to do is right click and I can click move code or I can also click move sample. If I click move sample, it moves over an example of how to use that particular function. I can also clear that back out and I can just choose move code and it moves over a placeholder. And it's up to me to fill in the parameters. So in this example, we're just going to output our variable. So we'll do my variable. And we'll save that. Next, I'm going to start up the solution. And by default, several places all of your global methods under the methods node. So I can see there's my test one and test two. So to go ahead and test these real quick, I'll click on it. And if we take a look at the console, I can see that it's output at the value of 1.0. That's because my bear is an integer and when servoid or when JavaScript displays integers, it uses their full notation including the decimal value. We can also change this and use different kind of values. So we could change my bear over to the string value of one, for example. And so if we come back to our client and run that, we can see now it's just displayed. One as a string value. Next, let's do a little bit more with this. So we'll take and make a variable here. We'll call up my bear two and we're going to set it equal to my bear. Plus two. And we're also going to change the output here to my bear two. So we'll save that and we'll run our test again. We can see it's actually outputted one, two. That's because my bear is a string. And so when you use the plus sign, that means it's going to concatenate the values together. Now if we were to switch and make my bear an integer, my change gets value. and we were to run it again. We can see now it's actually added them together and it holds the value of three. We can also do some other things. So if I come down here and I say my bear two plus plus, that's shorthand notation for saying my bear two equals my bear two plus one. So if we come back up here and run that again, we can see it's now added one to the value and it's now four. And you can do the same thing with minus minus. Next, let's take a look at how to do a similar thing with strings. So let's change my bear back to a string. And let's say my bear two plus equals three. And we'll say that. So if we run this again, we can see we now have one, two, three. So start it off as one. And then added two to the end of it. And it's a string so it can catenate it onto the end. And then we use the shorthand notation of plus equals to add three to the end of it. So that's the same as saying my bear two equals my bear two plus whatever value. We're assigning here. Next, let's take an example at using the if statement. So we'll change this back to an integer. And we'll say if my bear equals one, then we're going to output the value. And we'll say good. Otherwise. Well put that. So let's review what I just typed here. So I started off with an if statement. And I've put in the parentheses the value that I want to test. And this value should return back a Boolean of true or false. So I've used a double equal sign here for a comparison operator. So this will tell me whether or not my bear is equal to one. If it is, it runs the code inside of a curly braces. If it's not, it runs the code inside of the else curly braces. And then it will continue on. So let's go ahead and run this. And you can see it's output good because of course one is equal to one. Let's change this a little bit and let's make my bear equal to a string. Now when we run this, it's also telling me that it is good. Because we used two equal signs. So we're only comparing the value of if we use a third equal sign. We can see it's now output bad because we're testing both the value in the type. Because this is a string and this is an integer, those would not be equal. We can also do multiple comparisons inside of the if statement. So if I have another variable here. I can add multiple comparisons in here using some of the special comparison operators. So if I wanted to check to see if both were true, I could use the double and percent. And so I could say my bear two equals two. So this is only going to run this statement if my bear is equal to one and my bear two is equal to two. So both must be true. And of course that is true. So it's output that for me. Now we can also check instead of and we can also do or. So I can use the double pipe and that will check to see if that one or the other are true. So my bear has to be one or my bear two must be equal to two. So let's test that. And of course that's still good. You can also do multiple different tests together by using additional parentheses. So I could do something like. Like this. And so what we're saying is we want my bear to be equal to one. Or those two values must be either equal to two or greater than one. So using these parentheses allows you to group your comparison operators. Then of course there's also the not value. So if I can I can do something like if my bear is not equal to one. And we can save that. You can see of course it outputs bad because my bear is equal to one. So using the not inverted and so that's basically saying if my bear is not equal to one. JavaScript also gives us some additional tricks that we can do without actually using any comparison operator. So if I click in here and I just clear this value out. And let's simplify this a little bit more. And if I just put the variable name itself in there. It's going to do a couple of different tests and that depends on what type of value my bear is. So if it's a number then it'll return true if it's not equal to zero. So anything other than zero will return true. If my bear were a string or some other type of object it'll return true as long as the value is not empty. So let's go ahead and show you what we mean here. So if I run this of course it outputs good. If I come back and I change this to something like let's say 500 and we test it again. And of course it still outputs good. But if I change my bear to the value of zero and I run this we can see it outputs bad. Because that's the way JavaScript interpreted. It's essentially one is sort of equivalent to a true and zero is equivalent to a false. But JavaScript also adds the additional layer that anything other than zero will return back true. It's also true for negative numbers. So if I did something like a negative five and I run it. We're still going to get good back. Now let's switch over and work with strings. So if I do something like make my bear equal to hello and I run this again we still get the value of good. Because it's checking to see basically that my bear is not empty. If I change that and just make it empty text then it outputs bad. So this is a nice little check for you to determine whether or not there's something in the value. It also works for null values. So null is a special operator in servoy. It essentially means that there is no value. Note that null is different than empty. Null is no value versus the value of empty. So let's run that. We can see again it outputs bad. We can also do a similar thing with true and false values. And we can actually just type these in. So I can type in the word true. And I don't need to put it in quotes or anything. And when I run that of course it outputs good. And if I switch that over to false. Of course it outputs bad. Now let's combine this with the not operator. So if I put the exclamation point in front of there. Then it's only going to run this code whenever my bear is empty. So it essentially does the inverse of what it did before. So let's test that. So now it outputs good. Next let's take a look at using multiple ifl statements. So let's change my bear back to a number and we'll set it equal to 2. And we'll do something like if my bear is less than or equal to 1. Then we'll output 1. And down here instead of just using an else I'm going to add another if to it. So we'll do another test. So we'll say if my bear is less than or equal to 2. Then we'll output 2. And then we'll do another else. Notice here when I type in the word application on IDA's tip period I automatically get the pop-up menu. That shows me all of the functions available here. And I could start typing like oh let's click back in here. So I could start typing the letter oh and it'll filter that for me. And as I move my arrow buttons on my keyboard up and down I can see some more information about those. When I find the one I want and it's highlighted I can just click return and I'll fill it in there for me. So let's type in large. So we're doing multiple checks here now. So first we're checking to see is my bear less than or equal to 1. If so this will happen otherwise if it's less than or equal to 2 this will happen otherwise will output large. So we can run this and you can see of course it outputs 2. Now there's multiple different ways of doing this type of procedure if you're doing it by actually just comparing direct values. Then you can use a different type of statement known as a switch statement. And to help us with that if we come over to the JS lib node we can go down to statements. And we can see that serve void gives us some statements that are available. And we reviewed these in the previous slide and here's that switch one that we went through last time. So let's go ahead and clear this out and let's click on switch and let's do a move sample. And so we get a little bit of example here. So the way the switch statement works is you specify what value you're going to be comparing in your switch statement. We're going to use my bear and then you build different cases that you're going to test. So the first thing would be like case one. And so everything you put in here is what's going to happen if my bear is equal to 1. So we'll go ahead and write that code. And the important thing here is you need to put in the break command. If you don't put in the break command then it will continue to run down to the next line. And you just keep building your cases. So you can say case two. Oops, let's just go ahead and copy and paste that one. And then not forget our break. And then there's the default value. So that just means it didn't match any other command. And since that's the last one there's no need to put the keyword break. So what's going to happen here is if my bear is equal to 1, it'll run this code. It's equal to 2, it runs this code. Otherwise it runs that code. So let's save it and test that. Of course it was equal to. So that's what I displayed. Next let's take a look at arrays. So we'll clear out this code. And we want my bear to be a new array. Well if I take a look at my JavaScript Live node here again I can see handy list of all those JavaScript objects. And I can click on there and I can see the constructor for an array. So the constructor just means it gives you back a new array object. So if I right click on that and click Move Code, I can see my bear is now equal to a new array object. So if I type in my bear and a period sort of what it automatically gives me back a list of all the functions that are available to an array. Because my bear is now an array object. So if I can do something like my bear dot push. And if I just click on that it'll bring that over. Now what push does is it adds something to the end of an array. An array essentially is an ordered collection of objects. So I can push one on there. And let's say later I wanted to do another one. So we would push two. Then I could do something like application dot output. My bear dot pop. Now what pop does is it brings the last value off of there. So let's go ahead and run that and see what happens. So you can see it's returned back to basically what's happened is my bear first had one on it. And then it added to. And then when I called pop it brings it back off. And it brings it back off from the end. So it returns it there. Let's actually walk through this in the debugger so we can see how this works. So now we're over in the debug mode. And I've got these buttons to work through my function. And we actually have a special tutorial on the debugger. If you want to take a look at that we're just going to briefly walk through this function. And so at this point I've walked through the first two lines of code. I can come over here to my interactive console and I can type in my bear. And I can see how it looks. So right now it's just an array of one object. Run the second one. And now I can see it's got two objects in it. So let's go back. And there are also other ways of adding items to the array. So for example we could do something like my bear. 0 equals 1. And my bear 1. Now notice what's interesting about this is that I started at 0. That's because the array's first index starts at 0. So these two lines are essentially the exact same thing as they were before. Just instead of arbitrarily adding it on to the end we're now being explicit about where we want to place those items in the array. So if we run this again and walk through and debug and there we are again the exact same value. So if you're curious about working with arrays, even more you can scroll through these functions and you can see some examples as you click on those of exactly what each of those do. The next thing we're going to do is we're going to show how to use a loop. And we're going to use our array example to continue with that. So if I come back down to our statements I can see that 4 is one of the statements. And this is a common statement used to do a loop. And if I click Move Code on that, just move over a simple little bracket there for us. And so there's a lot of details that we need to fill in. As you'll remember from our previous example, we start with an initialization expression. And so that's usually declaring a variable common notation is to use i. So we set var i equal to 0. The next option is the condition. So that's going to determine what's going to make the var continue to loop. And so we'll say while i is less than my var dot length. And you'll notice I did less than. And I'll show you why I did that here in a moment. And then the next one is the incrementing expression. And so this is going to run every time the loop happens. So we'll do i plus plus. So this is a very common example for a loop. So when we enter the loop, we're declaring a new variable, setting it equal to 0. We're going to check every time to see if the variable is less than the length of the array. Now I use less than instead of less than or equal to. Because when I call array dot length, it would return back to because there's two items on the array. But if I want to access the second item in the array, I would actually access it using one. Because remember, it starts at zero. And then in order to keep looping, I'm going to keep adding one to i. That way I can continue to work my way through that array. And what we'll do here is just output the value in the array. So I can say my var i. So that's going to output whatever the value of i is. If it's zero, it'll output the first item in the array. And when it's one, it outputs the second item in the array. And when it comes back up for the third loop, I will no longer be less than the length. So it will stop. Let's go ahead and run that. And you can see it outputs one and then two. And then stops. Keep in mind that this condition statement, you can also do many different things here. So basically, it just needs to be a value that returns back to true or false. So you can use those additional comparison operators like the double ampersand for and and the or operators if you want to do a more complex comparison as you're looping through that array. Another shorthand notation to do a very similar thing is to do something like we can do for i in my var. My var. And what that's going to do is set i equal to each property in my var. So it's first going to be zero and then it's going to be one. So let's go ahead and say that. And we'll run that again. And we can see again we get the exact same output. So that's sort of a shorthand notation to do what we previously did. Although the previous example gives you a lot more options and what you can do. Let's take a look at using some of the other loops like the do while loop. So I like that. Just do a move code. And so with do while we start with the do and it ends with while. So the way this is going to work is everything inside of the curly brackets is going to run. And it's always going to run the first time. And then on the second pass through it's going to check the value and the while expression. And when you use something like this you don't get the option of that initialization. So we actually needed to declare a new variable. Where I equals zero. And then inside of here we would do while I is less than my there dot length. Now this is going to be a little bit trickier because with the do while this is always running first. So what we're going to do is automatically increment our value here. So let's go ahead and actually step through this. So I can show you what's going on. So we automatically come into the do statement and it's going to run this no matter what. So it's going to output the first variable. It's going to add one to i and then our statement is still true. So it's going to output the second one add one to i. And then i is no longer less than the length. So it automatically exits. And it's very similar approach for doing the while loop. Essentially you can just take and move this up here. And you basically get the same thing. The only difference is it's doing the comparison first before it enters the loop. Next let's take a look at some of the special options in the JSLib node. So we'll start with the math node and we'll start by sitting my very equal to 1.3333. And we'll come up here to the math node and I can see that it has a round function. And so if I click in here and I just right click on that and do a move code. It moves over the round function. Actually I need to type in the first part which is math. And then I can type in my there. And let's set that equal to a new variable. So we'll set rounded variable equal to the result of that and we'll display that. Alright, let's go ahead and run that again. And you can see it's taken that value of 1.3333, rounded it to the nearest integer. Because that's what the round says that it does. And then displayed it for me. So if you need to do any type of mathematical functions, the math node is the place for you to do that. Just to review some of the other nodes that we have here, we've went through arrays. There's also the date node so you can make a new date object. Again there's the constructor for that. Notice there's multiple constructors so you can pass in a string to initialize the date to a certain value. You can also pass in, pass them separately like the year and a month and the day. If you have a string value, you can do lots of different things with it. So we can do things like index of. So I could check to see if a certain value is in a string. Let's go ahead and do that. So if I check my var equal to 1, 2, 3, 4, 5, 6. And I output my var dot again automatically pulls those up for me. .index of and I tell it what I'm searching for. So we're searching for 3. So we can run that. And so it tells me that that's in the second location. Again they started 0. Notice there's lots of other functions so I can do last index of where I start from the end. I can replace values. I can search values to see how often it's displayed in there. I can break the string up into other strings with these two functions. Lots of different functions in here for you to work with strings. The next one is number. Notice how these are green. That's because they're actually properties versus these down here. They have little fx next to them. And that's because they're functions. The difference here is that properties normally can be directly set. Although some of them are constants and can't be changed. And functions usually you pass a value into it. We've already went through the math operations. So anything you want to do cosine, tangent, maximum value, rounding, etc. Is in there. We talked about regular expressions earlier in the slide. We've gone through some of these statements. So those are your comparisons and your flow type of operations. There's some special operators in here. We talked about type of and the slides. And there's also some extra nodes that we'll go through in an advanced session for XML. Now you'll also notice that I've been using application. Throughout my program here when I wanted to display some values. Well, these nodes are actually the background of these is coded in Java. But by using the serve-roin environment, this gives us access to these Java functions in our JavaScript environment. And so when I click on application, these are all the different functions that I can use that effect. The application as a whole. So I can set the window size, show a calendar, things like that. That suggests for you to walk through these and review servois PDF documentation on how to use some of these. Underneath of applications, I can also see constants. Throughout your application you may need to do something like compare the type with the constants of the application type. So underneath of here, if I do something like, my there is equal to application.getApplicationType. I can see that that returns back a number. Well, rather than having to hard code what those numbers are, I could do something like if my there is equal to, and then I can access the constants. So as it equal to application types, I had this client. Instead of hard coding in the numerical value that that represents. So that's how you can use these constants. Throughout the application, you'll see the JS event node. And we'll work through that in a later example. And then there is uuid. We can get back a uuid object. We'll go through the solution model again in a later example. But this is what lets you go through and actually design and change the application at runtime instead of having to pre-program it all. Underneath database manager is where you would access database functions. So for example, maybe you want to get information about your database with the JS table and JS column. Or you can also use some of these direct functions here where we can directly access the database. The one I want to show you next is the utils node. So these are some utilities that sort of way is added for us that are not in the existing JavaScript libraries, but they're fairly common uses that you may need. Some of these are also matched against other environments. For example, FileMaker has a function called middle words. And so the string middle words exactly matches what the FileMaker function was. The next one down is the history node. So we can move backwards and forward through history. Then we have the security node. We can add in it users. There's the I18n node for working with internationalization. And then we'll skip down to the plugins node. And so all these plugins add extra features, not existing in the servoy IDE. And you can review how to use each of these plugins and the plugin documentation. We've actually created videos for each of these individual plugins. Next, let's take a look at how we can pass parameters between our functions and return back results. I'm going to define test two to take in a couple of parameters. I'll call them param, one, and param, two. And what we'll do is set of variable equal to the concatenated result. So here are equals param one plus param two. We're going to return back. Now, here in our test one function, we're going to call test two and pass in some parameters. The thing we have to keep in mind here is proper context. Because test two is a global function, I need to prefix it with the globals. prefix. And when I type in globals. I get a pop up here. And I can choose test two that I want to call. And I can pass in the parameters. And since it returns a result, I can also specify what I want to hold. A variable I want to hold that value that gets returned. And then I can display it. So let's go ahead and run this. And what you can see is we called our method and we passed in one and two. It took and concatenated those together. And then returned it back to us. And the result of that got returned back into our variable called results. And then we displayed it. So that's how you pass in parameters from one function to another function and how you return the result. And again, there's lots of additional things you can do using JS documentation. So for example, we can define what types of parameters these are. We can write some documentation about their description. Whether or not they're required, that kind of thing. And we'll review that in a later video. Next, let's show how this works with forms. So I've got an example form here. And let's take and add a new button. And we'll call it test. And we'll click on the button. And over here on the on action, this is what's going to run when the button gets clicked. So whenever I click on an element, I see the properties over here on the right. And so I'm going to double click on on action. And I'm going to create a new form method here. And I'll call it test on action. And I'll choose OK. So now I can see that that function is assigned to this button. And if I want to edit that function, I can just quickly click on that folder. And it'll open up for me. Now the thing to note here is that this function, when it got created, it automatically specified the parameter. That's because certain functions, depending on how they're used in servoy, automatically get default parameters. So for example, a function that's an on action function on a button will automatically get an event object. And you can see servoy has used the JS.Notnotation to tell me what kind of object it is and a little description about it. So what I could do here is something like application.output event.get form name. And that'll tell me what the form name is. Now the proper way to do this using our example that we saw earlier, there's a chance that maybe I'm going to call this function from some other place. And there won't be an event object. So defensive coding technique would be to do something like if event. That way this piece of code will only run if there is an event object that got passed in. So let's go ahead and run this. And we'll click our button. And we can see that it outputs JSON, because that's the name of the form that we run. Now let's see how we can integrate these two things together. So if I want to come here and I'd like to call my global function, I can do that again with just that global notation. So that will call the global test one function from my form function. I can also go the other way. So over my global function, I can call the function on that form using the form prefix. So I can say forms dot and then it'll give me a list of my form names. I can choose date JSON. I can type in a period and then I'm going to get a list again. And we can find my function. There's the test on action. And I could pass in all if I wanted to just supply an empty result. Now I can also do this with a slightly different notation. So I'm using the dot notation here using periods to separate the objects. We can also use an array notation. So if I did something like that and I can just copy this here. Those two are actually the same thing. Oops, let's put the s on there. There we go. So these two calls are actually the same thing. The only differences here is we're referencing the form name dynamically. So what's nice about this is you could have a variable, for example, that represents the form name that you want to call. We can also check to see if a method exists before we run it. So for example, I could do something like this. And by referencing the method or function object without the parentheses, that just checks to see if it exists. And if it does, it will then execute it. Also notice that I'm using another shorthand notation here. So I don't have any curly brackets around the if statement. If you leave the curly braces out, then what happens is only the first line after the statement gets executed if that happens. So if I have something else here, this code will always run. However, this line will only run when that result returns true. And it's common coding technique to indent that one line so that you always can remember that this line only runs when that line is true. And that works for if and else statements. These functions that you create in your program can be ran from many different places. We saw how to run it from a button here, so we have an on action event. But we can also run it, for example, on double click or on right click. We can also assign the functions to run with our fields. So maybe I want to run my function whenever data changes in a field, for example. I can assign it there or when the user clicks into a field or clicks out of a field. If I just click on the background here, I can see the form. And I can see that there are default commands and events. So I can assign my functions to run whenever these things happen. And again, I suggest that you assign your function from this dialogue here, where you actually let servoy create that method for you. That way servoy will pre-fill in the default parameters for that function. At least when you're first starting, so it'll help you to get familiar with what the parameters are that are getting passed into those functions. That's the end of part two of JavaScript for servoy. And part three, we'll go through how to actually write some live business logic with your solution and show you some more hands-on examples.