[00:00] With the power of a built-in layout canvas, form data entry widgets, HTML5 form validation, and much more, the form component refines the process of data gathering, validation, and submission inside Ignition, whether you're online or offline. In this lesson, we'll learn about different types of form data entry widgets, explore the structure of the form component, and look for helpful patterns to increase development speed and efficiency as we build this sample form. We'll start by going to the component palette in the designer. I'll drag a form component into my new Perspective view. There are several options available, if you have a specific format in mind. I'm using a flex container for this view, so that gives me access to CSS flex properties. To make sure we have enough room for our form, I'll go to the position section in the Property Editor and change the value of this grow property to 1. That stretches it to fill the available space.

[01:04] Let's take a look at the other properties associated with this form component in the Property Editor. The props section resembles a JSON nesting pattern that organizes information as a collection of objects with named properties. You can think about it this way. The form component is like a big grid container. In this grid container, we can create multiple columns if we want by adding more column items and we can build each row in our grid with items we'll call widget blocks. These widget blocks then become part of the row items in the hierarchy within the Perspective Property Editor. Let's take a closer look at the second widget. Each widget can have a different type like text, email, radio, et cetera. When we set up the type for one of our widget blocks using the dropdown in the Perspective Property Editor, Ignition responds by giving us a type object where we can customize what that widget looks like and how it behaves in the form.

[02:05] To demonstrate all this, let's go back to the designer and build out the rest of our simple form. The first thing I want to do is go to the columns configuration object and create two columns instead of one. Within columns, you'll find items, an array of column configuration objects. To make this a two-column form, we can click on the plus sign next to items to add another array element. Now, in our form we have column zero on the left and column one on the right. Next, we'll go to item zero to find the rows configuration object in the Property Editor. If I go to items, there are two objects in there as expected -- one for each of the existing fields Ignition gave us in column zero. I'll expand the object here at index zero, then the widgets array, and finally, index zero under widgets. I want to change my label text, so I'll expand that and change the title to Sample Report.

[03:06] I don't need the subtext description in that widget, so I'll go to info and delete the text there. Let's change that text field next. I'll go to the other item at index one, then widgets, then index zero. Ignition gave us this form element pre-populated with additional properties because it already had a type of text. I'll change the ID to name and keep this one as a text type so we can make it our name form element. A placeholder would help our users, so I'll expand text and change that to Enter name. Then I'll go to label and change the text to Name. I can also delete the info text. I'd like to add in some more form entry widgets, so that means we need some more row items in our left column. I'll collapse some of these items so it's easier to see the process. I'll hit the plus sign next to items a couple of times to create the row items we need in this first column, and we'll see tiny placeholders for our new rows appear in the form.

[04:10] As soon as we add a widget ID for each of these, the widget will become visible within the form. I'll make this first new row item at index 2 our email field. Let's go into widgets, expand index 0, and we can give our new form field an ID of email. I'll set a type of email using the dropdown menu. Now that our email field has a type value, more properties will appear in the Property Editor, such as this email object. I'll go ahead and add a placeholder here. The form component gives us access to HTML5 form validation, too. For example, let's look at validation in the Perspective Property Editor. This constraints object gives us a property called pattern. I'll enable that and then we can add a regular expression or regex value to validate email addresses entered into this form.

[05:04] You can also make this email field a required value here. I'll set enabled to true and you can see a red required star appear for this field in the form. We'll go find label and info next, so we can change the label to email and then we can delete the info text. We'll tackle radio buttons next. We can trim this back down a bit in the Perspective Property Editor to make the next steps a little easier to see. I'd like to create a set of two radio buttons, so let's go to widgets and expand index zero. We can set the ID to radio and use the dropdown to set the type to radio. Next, we can expand the radio object. One radio button is provided for us as a starting point. To add more radio buttons, I'll expand options and hit the plus sign to add one more index under it so we can see an additional radio button appear in our form. Now we just need to change our text and value for our buttons, so I'll zip through that in fast-forward mode.

[06:09] One important thing to note is that the values we set here need to be strings rather than numbers for our radio buttons to work properly. Let's change the label to zones and change our default info text to 'Please select a zone'. Now let's close up our work in column zero and move over to column one to make our last change: a toggle switch. I'll tidy up the Property Editor, expand column item one, and we can drill down into the row items to create a new widget array element at index zero for our toggle. I'll expand widgets and index zero, and we can set the ID to toggleSessions and type to toggle using the dropdown menu. Let's go into the toggle object. We can leave this as a Boolean type. Next I'll go into options and index zero and change the text to Sessions Initiated.

[07:06] Let's scroll down to our label and info sections and modify them as needed. We'll use this same toggle in an upcoming lesson to demonstrate the form component's powerful contingent actions. Those contingent actions can show hide, enable, or disable additional form elements based on data entered into the form, like a toggle switch being flipped. In future lessons, we'll also learn about form submission management and how the form handles data. The form component weaves together a built-in layout canvas, form data entry widgets, CSS Flex HTML5 form validation, and prebuilt online and offline data submission actions to make form building a convenient and easy process.