Welcome to the tutorial, JavaScript with Servoy Part 3. For Servoy University, this is Scott Butler. In this example, we're going to go through some real world examples of using JavaScript with Servoy. As you'll find, when you're coding your methods in Servoy, the methods and the user interface sort of go hand in hand. So we're going to start by just building some sample forms and writing some code to go along with them. So I've got a little example solution here called JS3 and we're going to start by creating a new form. And I'm going to choose from my data sources. I'm going to go up to the example data database. And this database comes pre-installed with Servoy if you choose the examples in your installer. And so we'll choose customers here. And we'll choose next. And then on the next screen, of course, we get some options for our data providers. And we're just going to choose a couple of those and we'll hit Finish. So I've got a little sample form here showing some basic info about my customers. And what I want to do is just start with creating some sample buttons to do some simple things like creating new records, deleting records, things like that. So we'll start by placing a new button and we're going to do that from our toolbar there to drop a new button and we'll call this new. And I'll click on my button and I can see over in the on action event here, I can specify my method that I want to run. On action is what we'll run when the button gets clicked on. So I can double click in here and I can choose to create a new form method or a global method. We'll do a form method. And I'll call it BTN underscore new. And I'll say, OK. So now this button is tied to that function called BTN underscore new. And as a shortcut, I can just click on that little folder and it'll take me right there. Notice that since it's being ran from a button event, we actually get an event object that gets passed in here. We're not going to use that in our sample here because we're just creating a new record. So what we're going to do in this function is just simply create a new record. And so I can see my form that I just made here called customers. And if I expand it out, I can see I get some additional information under here. And we go through some of these in more detail and some of the other form designer tutorials that we have. We're going to focus on the controller element for now. So every form that you build has a controller. The controller lets you do things like change the mode of the form so you can put it in Find mode, you can create new records with it. You know, so it's a manipulation with that form. So if I scroll down here, I can see that there is a new record option. And I can double click on that and I can see it moves over controller dot new record. And I get the option of specifying a location. And I know that it's optional because servoy has put in the blue brackets around it. That means it's an optional parameter. So we can just click in there and clear that out and save it. And we'll save our form and we'll go ahead and launch our sample solution here. And if I click this, I can see it makes a new customer record. And if I click on the background, it attempts to save it. But of course it can't save because I didn't have a customer ID. Next let's make another button to delete the records. So we'll make a new button here. We'll put delete on there. And in the on action, we'll specify a new method, BTN underscore delete. And I can open up the code for that again. And we're going to have really a similar code. And as you start to get used to working with servoy, you don't always have to go over to that left hand side solution explorer. You can use some of the pre-filled in options. So I can just type in controller dot and the code completion comes in. And I can type in D and I can see there's delete record. And I can just choose that. So now I've saved my method, saved my form. And if we launch it again, I can make a new record. And then I can delete it. Or I could come down here to an existing record. And I can just delete that record and it's gone. Let's do a little bit more. Maybe you want to be able to do a search. So what we'll do is we'll place a new button on here. And we'll call it search. Create a new on action and we'll create a new form method called BTN underscore search. And we'll open up the code for that. And then, serve way. There's two commands that you need to know about when dealing with the search. The first is controller dot find. If I click on that, I can get a tool tip. That tells me that that's what you used to start a find request. So that's what you call entering in to find mode. So I can just do controller dot find. And if I launch my code here, I can see I'm entered into find mode. And so I could, for example, find all the addresses that start with one. And I can see that there's seven. Now notice I had to hit enter on my keyboard to actually perform that search. So let's come over here and modify that search function to be a little bit more advanced. So the first thing we need to do is be able to detect whether or not it's already in find. And so we'll do that by referencing the found set object. And so we'll say if and then we're going to go to the found set of the form. Now that's not actually listed in here. We're going to find this click on the form name itself. I can see that it has a found set object. And I can again click and do that over or as you get more comfortable. You'll learn to type that. And if you want to see all the functions that are available for a found set, you can go underneath of the database manager node and you'll see the Js found set. So these are all the functions that you can run on a found set. Every form in serve way has a found set. However, you can also choose to have found sets which are not tied to forms. So I can do something like if found set dot is in find. And that'll be turned true or false. So that's why I can place that right inside of that if statement. So if it's already in a find mode, then what I actually want to do is perform the search. So I'm going to go back up here to my form. And I'm going to go to the controller. And I'll see that there's that second command there called search. And I'll move that code over. And again, I get a few options about clearing their last results or reducing the search. which is going to use the default for now. And then I need to put in an else here. And so now I have a button that will function as both. So it'll start the search if you're not in find mode. If you already are, it'll actually perform the search. So let's test this out. So I'll click search. And let's say all city is London. And I'll click my button again. And you can see now it actually performs that search. Next we might want to make some buttons like previous and next. So let's start with a button for previous. And another button for next. And we'll create those functions here. And another one for next. And I'll save that and let's open those up. So I can see my two methods there. And in servoy we call the selected record. Sort of the selected index. So if I look under controller, I'll see a function here called set selected index. And so I can clear that part out and say set selected index. And it takes in a number. And so what I can do is get the selected index. And subtract one since it's previous. Now you may wonder what happens if I'm at zero. Sort of what won't throw any errors. It just won't do anything. If you want to add some more advanced code here, you could detect if you're on already on the first record and you can choose to hide or show those buttons. And we'll actually do that next year. And we're just going to copy this code because our next code is identical. Except that we're just adding one instead of subtracting one. And so let's check this out. So now I can hit next and walk through my records and hit previous and go forwards. Now next what I want to do is to hide and show some of those buttons depending on where I am. And so I would do that with a servoy event. I can see we have an on record selection event. And so this event runs every time a record gets selected. So we're going to double click in here and create a new method. And I'll leave the default name on record selection and say, OK. So now we have a function that's going to run every time a record is selected. So what I want to do is hide and show those buttons. Well, in order for me to be able to hide and show them, I first need to give them a name so that I can reference them in my methods. So if I click on this, I can go to the name and I can call it BTN. Preve or previous and BTN. Next for next. And I can save that. So now when I go back to my methods, I'm going to start writing in the code here. So what we'll do is we'll first work with the previous button. So we'll say elements dot and now I see a listing of all my elements. And there's my next and previous. So I'll start with previous type in a period again. And I can see I get a visible property. So I'll set visible equals to and now I need to type in a function that will return back a Boolean as to whether or not that element should be visible. So the previous button should only be visible if you're on any record index after one. So we'll say if controller dot get selected index is greater than one. And next we'll do the next button. And for the next button, that will only be visible if the currently selected index. Is not equal to the max record index. So that returns back the maximum record that we have in our index. So we'll save that. And now let's test it. So I can see I get a next button. And now that I go to the next record, I get the previous button again, but you can see that event firing automatically. And as I hit the end, it goes away. So what we've built here so far is a set of functions that are very specific to one form. But as you might imagine, you're going to be doing these types of things very commonly on lots of your forms. And so in server, we usually call that building some sort of framework code. So I'm going to show you a really simple example of how to do that using form inheritance. So we're going to start by making a new form. And we're going to choose none for the table. This is because we don't really need this base form that we're going to make to contain this code. We don't really need that to hold any data. So we're going to be reusing that in various different forms. And we're going to call this button here. And I'll click finish. And so I can see it's created a form for me, but I actually don't want it to have a body on it because the way I'm going to be reusing this inheritance, each form is going to have a different body part. So I'm going to go to parts and I'm going to add a header. I'm going to remove the body. So we'll save that and we'll go back to the design. So now I have this header here. And so now I'm going to create those functions that I had before that were specific to that form. I'm going to create them here. And so what I can actually do is I can come over here and I could copy these and I could paste them on my header. And we're just going to line them up left to right. And we'll save that. Now you notice since I copied them from another form, the on actions are unresolved. But what we're going to do here just to speed this up is I'm going to come over here and I'm going to select all on the source code. And I'm going to come over here to button header. And I'm going to open it up and script editor. And I'm going to paste. Now the key thing here is when I paste in code from some other place, I need to clear out this common area because it's got these UUIDs. And I'll cause all sorts of problems if I choose to leave these in there. So now when I save this, you'll notice survey automatically creates new properties for me. And when I go back to my form, I can see that survey needs to be retied to these. So I'll go to my on action. And we'll choose that runs the new method. That runs our delete method. That runs our search method. That runs our previous. And of course that runs the next. So I'll save that. And then we're going to come back over here to our customer form. And I'm going to take these buttons off since I don't need them anymore. And I'm going to move this down just a little bit. And I can see that there is a extends property on the form. This allows me to extend a form and we call that inheritance. So I'm going to choose that. And I can see my button header is available as one of the forms to extend. And so I'll choose that. And now you can see I automatically get that header element. And it shows my buttons here on my form. Notice there in red that lets me know that they're inherited. And so I can't change them. Let's launch our solution again. And let's go to our customer form. And I can see I can work through these and all my code stowers. The advantage here is now I'm able to actually make a new form. And let's make one based off of the orders table. And let's choose a little bit of information about that order. And I'll move this down again. And I can go again over here to my inherits or my extends form. And I can choose to inherit that button header. I can say that. And when I run it again, I can go to my new orders form. And I can see that it too automatically gets all of this. Next, let's show how to interact between multiple forms. So what we're going to do is show some information about the customer. And then be able to show some information about their orders. And click and get a bit more detail about their orders. So let's shrink this orders form up here a little bit. So we just set that in the center. And we'll slide that out there. So it's a little bit smaller. Okay. And then we'll come over here to customers and we'll do kind of a similar thing. And we'll just stagger that a little bit. And what I want to do is show the customer's order information down below here. So in order for me to show related data, I need to create a relation. And again, we go over this in more detail in some of the form design tutorials that we have. So I'm going to quickly create a new relationship. Just going to right click on the relations and choose create relation. And I'm going to go from customers over to orders. And that link is based off of the customer ID. So I have a real simple customer's orders relationship. So now I can come down here and I could create some like a portal if I wanted to display some of that related data. So I can choose the portal element from my toolbar here. Now I can see there's customers to orders and I'll choose some information that I want in there. And so now I have myself a little portal here. And let's see what that looks like. So now what I have here is as I scroll through each of my customers, it's actually showing me the orders down below here in the bottom. Now what I'd like to do is place a little button in here such that I can pop up a new window that'll show me a little bit more information about that order. So I'm going to click on the portal element first and with the element selected, I'm going to place a button. And we'll just call it detail. And we'll stick it down here at the end. And then the on action I'll create a form method called show order detail. Now I'm going to start with some of the basics. So the first thing that you want to do is just to show that order form that we have in a new dialogue. There's a couple of different ways to do that. I prefer to use application.show form in dialogue. And you know, it takes in a lot of parameters here. But you can use some shortcuts. So for example, we can specify the form that we want to show and that'll be form dot orders. And instead of passing these in, we're just going to clear all these out. And that'll basically just take all the defaults and it'll just show the orders form in a new dialogue. So let's go ahead and launch it and see what we have. So go to our customer form. I can see my little detail button there. Although it's not big enough to show the whole thing. But if I just click on my button, I can see it shows that form in dialogue. Pop my half here as you can tell, it's not showing the right order. That's order ID 10692 and 110248. So we need to fix that. So let's open up our detail here. And instead of just showing the form, I need to actually load the appropriate records. There's many different ways to do that. I want to show you a couple examples. We'll start with a really simple one. So the first way we're going to show you is just loading with a relationship. So since I'm showing a portal that's based on the customers to orders relation, that means that that form's found set is based on that relationship. So what I can do is to say forms.orders. Controller.load records. And I can pass in that relationship that we're using customers to orders. So now when I click on it, you can see that we're on the right, the right one. The only trick here is since I passed in customers to orders, it's actually showing that whole relationship. So it's showing them that I'm looking at six records. And then again, I'm still looking at six records, but it's selecting the right one. And I can move through those. Now, notice as I move through these, because we're based on that same found set, it's changing the selected record here in the background. It's because that's a shared found set because we're using the relationship name. Now there's a couple of other more advanced ways to do this. So what I'm going to do is create a little global method here. And I'm going to call it load record in dialogue. I'm creating it as a global so I can access it from several different places. You could also choose to create something like this through inheritance. But just to keep it simple here, we're going to create it as a global. And I'm going to define some parameters that this takes in. The first thing that we're going to take in is the form that you want to load. And I like to use the notation of an underscore so that I know that it's coming in as an argument. So I'll do underscore form. And then we'll take in the ID that you want to load. So the first thing we're going to do is to check our parameters. So we're going to say if no underscore form or no ID. Return null. And we need to take that comment out of there. So we'll save that. So if you don't pass in the proper parameters, this will just return null. That way we don't get any errors. So next we're going to write the bulk of the code here. Now that we know that we have a form and an ID and I expect that form to actually be a form object. So what we'll do is we'll say form and we said that every form has a controller. So I can type in the controller and another controller has a function called load records. And if you're unsure about that, you can go down to any form and look at the controller object. And you'll find a function called load records. You'll see that that takes in various different options here. But the main one that you can use is either a relationship or a data set. So we're going to use a data set. And if I go down to database manager, I can see that there is a function called convert to data set. And that takes in some different options like an array of IDs. So I can move that code over. And we'll clear that part out and we only have one ID. So we use the brackets to give, turn it into an array and we'll pass in the ID. So now this will actually take and load that record, whatever ID you pass into the form. Next we want to show it in a dialogue. So we use our show form in dialogue command. And we'll clear out those parameters and we'll just pass in the form. All right. So now we're going to go back to that event or that method that we have here. That was previously showing our order. And we're just going to comment this out since we don't need that anymore. And instead we'll call our global function. So I can go over to the globals and I can move that code. So globals.load record in dialogue and the parameters that it takes in. And so the form that I want to load, which is going to be forms dot orders. And then the ID and I can get the ID of the selected record through my relationship. So I'm looking at the customers to order's relation. And I can scroll down and I can get the order ID. And so that's going to give me the order ID that you're on when you click that button. So let's check this out. So now we'll go to customers and let's click on this one. You can see it loads the 10 9 52, which is the one I was on and notice that it only loads that one record because I was very specific about just loading that one record. So as you can see, when you when you have things in your program that you're going to do very often like showing more details in a dialogue or standard navigation, you should really think about making those dynamics throughout your application. That's the end of part three of this JavaScript tutorial. If you have any specific examples that you want to see, please do contact us. We'll be continually making more example videos with example coding techniques. In the future. So always stop by and check out the latest videos at Servoy University.com.