How to Create a New Form
Thanks for joining me for this video. For Sephora University, I’m Bob Q. Sick. In this video, we’re going to take a look at how to create a new form. I’m starting with a blank and empty solution called demo, and creating a new form is super easy. Come up with the forms node, right-click, and say create new form. You’ll see dialog box that asks you for a form name, a data source. Something called extends a style, a template, and a solution. So let’s start at the top. For the form name, you can go ahead and type one in, or you can choose your data source, and it will name it based on the table that you choose. For example, if I come over here and create a new form based on the customers, I click OK, from the example data connection. It will name my form customers by default. And we’ll show me the data source with the name of the database connection, which is example data, a period, and the name of the table that is based on. The extends setting makes it so that you can set up base forms that have a bunch of functionality on them, and then reuse them, or extend them to other forms. If you have a style, you can go ahead and apply that style. A couple of different styles already in there. But you can go ahead and just leave it blanking because you can always set it up on the form. If you have pre-existing form templates, you can choose one of those. The solution drop down allows you to create this form in either the main solution or any modules that were attached to this solution. Since this one doesn’t have any modules, the default is just the main solution demo. Let’s go ahead and click Next. Now I have the option of adding one or more database columns to my form automatically. So I can go ahead and choose multiple by clicking and then holding down my shift key, or I can hold down my control key and deselect certain ones. So I’m going to go ahead and put the custom ID, company name, contact title. Now let’s put the city and the country on there. And now we have different options. I can place them with labels next to them. I can fill out the text property of the actual field themselves. I can place them as labels instead of fields so that they’re not editable. And I can place them horizontally instead of vertically. This is handy when you have like a list view, for example. And you want to place them horizontally across instead of going vertically down. And you can also actually fill in the name property of the column to be the same as the column name. I’ll just keep the defaults. Those look good. I’m going to click Finish. And here we have the new survey eight editor. So let me go ahead and double click this so you can see it better. Okay, so here’s my form. It has all of my fields that I specify on it. As you can see, the new editor looks a little bit different than the classic editor in versions previous to eight. And if you like the old editor, you can always go back. If you come over here and click this HTML5, you can switch to the classic editor. So just click it. And here you have the classic editor. When you use the classic editor, you’ll see that there’s a whole bunch of new elements here. So you have, let’s go ahead and collapse these up so you can see them better. So you have all of the basic elements that we’ve always had. You have the containers, which is the tab panel, tabless panel, etc. And you have the Servoy beans, including the DB tree and the DB tree table view. And then there’s some extra one, Servoy extra, Servoy default bootstrap components. Servoy core. These are all meant for NG type solutions only. They really don’t apply for the web client and the smart client. And then of course, you also have your shapes. I can come over and take a look at the properties of the form. So there’s all kinds of commands, including on delete all records, on delete record, on find, etc. that you can tie methods to so you can invoke specific behavior when any of these commands is issued on the form. Next we have our events. Our events are on drag, on drag over, on load, on hide, on resize, on go to the next record, starting and stopping editing. So when these events happen, you can also attach methods to all of those different events. And then finally we have the actual physical properties of the form. So you have stuff like the border type, page format, scroll bars, all of those kinds of things, including the width and the height. Something that may not be totally intuitive to you is you can set the width, but if we come over here, we take a look at our form. Once closed is back up for a minute, closes up. So our body part, I can make smaller or bigger, but this actual body part itself, has its own properties. And that’s how you set the height. So I can set it from a numerical value, I can make it 400. And then I can click on the form itself and go down to its width and make that, let’s say, 400 as well. There are lots of different properties and lots of different commands and events that are at the form level. I would encourage you to take a look at the Servoy documentation at wiki.servoy.com. And I would also just encourage you to go ahead and play around with different settings and see what they do. Well, that’ll do it for our brief look on how to create a form. I hope you enjoyed this video. Thanks for watching.