[00:00] Ignition is all about collecting, communicating, and visualizing data. The form component is designed to help you build attractive, responsive forms and form-like displays inside Perspective that collect, validate, and submit data with ease, whether you're online or offline. To do this, the form component leverages a built-in layout canvas, form data entry widgets, the power of CSS flex, HTML five form validation, and prebuilt online and offline data submission actions. In this video, we'll explore the structure of the form component and learn how to build this sample risk assessment form that includes many of the most common field types. We'll start by going to the component palette in the designer. I'll drag a form component into my new Perspective view and then we can take a look at the Property Editor for more information about our new form. The first thing I'd like to do is make sure my form covers the entire view, so I'll go to the position section in the Property Editor and change the value of this grow property to one That stretches it in the flex container and gives us a little more room to work with.

[01:17] What we really want to focus on now are columns, rows, and widgets in the Property Editor. I'll scroll back up to our props section and we can go to the columns configuration object. Within columns, you'll find items, an array of column configuration objects. Let's expand that and see what's inside. There's only one object right now with index zero because there's only one column in our base form. If I want to add a column, I can click on the plus sign next to items to add another array element. Now in our form you can see that it's showing in a two column format instead of just one. We have column zero on the left and column one on the right. So let's talk about rows next.

[02:02] Right now we have two rows in our form already-- the section header and the text field that ignition gave us is a starting point. Essentially, each form element we add will be considered a new row item. To demonstrate this, let's go check out the rows configuration object in the Property Editor to see what row items live in column zero. If I go to items, there are two objects in there as expected-- one for each of our default form fields. Now that you have a better idea of where to find the parts of our form grid, let's talk widgets and build the risk assessment report you saw at the beginning of this lesson. First, I'm going to change this header to reflect the title of my report by expanding 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 Risk Assessment Report. There's also a subtext description that I don't need in that widget, so I'll go to info and delete the text there.

[03:07] Our header looks right, so let's change the text field next. I'll go to the other item at index one and drill down to widgets, and then index zero. This form element has additional properties we can work with because it has a type of text. If you click on the dropdown next to type, you can see that there are a ton of supported field types, many of which we'll discuss in the course of this lesson. I'll change the ID to name and keep this one as a text type since I'd like it to be the Inspector Name form element. Let's change that placeholder text first. I'll expand text and change that to Enter name. Then I'll go to label and change the text to Inspector Name. I can also delete the info text since we won't need that either. As we make these changes, it's a good idea to save early and often. Now I'd like to add some contact information fields for phone and email, so that means we need some more row items in our left column.

[04:10] I'll collapse some of these items so it's easier to see the process. I'll hit the plus sign next to items to add another row item, and we'll see a very thin new row appear in our form that corresponds to index two under items. As soon as we add a widget id, the widget will become visible within the form, so let's go into widgets, expand index zero, and we can give our new form field an ID of tel. I'd like to set a type of tel using the dropdown menu. The types in this dropdown menu represent many of the most valuable and useful form entry types and we'll see much more about other types as we progress in building our form. Now that our telephone field has a type value, more properties will appear in the Property Editor such as this tel object. Within it, we can change lots of properties related to the telephone input.

[05:06] I'll go ahead and add a placeholder here. You can see how our form harnesses the power of HTML five form validation too. For example, under validation, I could go into this constraints object, select pattern, enable that, and add a regular expression or Regex value to validate possible US and international telephone numbers entered into this form. You can also make the telephone number a required value, so let's go ahead and do that. I'll set enabled to true. We'll go find label and info next so we can change the labels to fit our risk assessment form better. I'll change the label text to Inspector Telephone, and then we can delete the info text. Now let's add an email field with some fancy validation. I'll scroll back up and collapse row item two and we can hit the plus sign next to items again to give us a new row to work with.

[06:07] I'll expand widgets, go to index zero, and set the ID and type both to email. Inside the new email object, we have similar capabilities to the ones we saw for telephone. I'll update the placeholder and create a validation pattern under constraints with another very long regular expression that handles most different types of email formats. Then I can make this another required field. Let's change our label text so it suits the inspector email field a little bit better, and we can remove the subtext description under info text. We can pare this back down a bit to make the next steps a little easier to see. I'd like to create a set of radio buttons where our inspector can record which area of the furniture plant we're focusing on in this risk assessment, so I'll hit the plus sign again next to items, go to widgets, and expand index zero.

[07:08] We can set the ID and type to radio and then expand the radio object. If you look in our form, we have one radio button provided for us, but I need three for this form. To add more radio buttons, I'll expand options and hit the plus sign twice to add two more indices under it, so we see two more radio buttons appear in our form. Now we just need to change our text and value for all three buttons, so I'll do that quickly. There are also lots of built-in ways to restyle your radio buttons available, but I'll leave mine at the default for now. Let's change the label and info text to fit our needs next, with the plant name and some directions. A set of check boxes comes next, since we'll need to give our inspector a brief list of hazards to look for in the area being inspected on the plant floor.

[08:14] I'll add in another row item, go into our new widget, give this an ID of hazardCheck, and select checkbox as the type. Under checkbox, we'll change the type to string and go to options to add in another checkbox to our widget. I'll click on this plus sign, and the second checkbox will appear. Let's add in the text and value we need for the checkbox labels, and then we can scroll down to the label and info sections. Under label, we'll call this widget Hazards Discovered. Next, we can add some directions in the info text. Now we're running out of room in the left column, so I'll collapse some of this, and we can start adding entry widgets to the right column.

[09:07] If we go back up to columns and look at the column items, index zero refers to the left column where we've been doing most of our work. Index one refers to the right column, so that's where we'll go next. I'll expand rows and items and we can add in row items to the next few form entry widgets. I'll add four with this plus sign, since I have four more form entry widgets I want to add to our form. The first widget on this side will give the inspector a place to include notes on hazards observed on the plant floor. Under index zero, I'll go to widgets and fill in the ID and type. Let's give it an ID of notes and set it to a type of text-area. I'll expand the new text-area object in the Property Editor and set a placeholder. Now all that's left is to change the label and delete the info text.

[10:04] Another interesting form entry widget is the toggle. I want to set up a toggle so our inspector can indicate whether the required safety trainings have been completed or not. I'll tidy up the Property Editor again, and we can go to index one to set up our toggle. I'll expand widgets and index zero and we can set the ID to trainingToggle and type to toggle using the dropdown menu. Let's go into the toggle object. We can leave this as a Boolean type, but we need to alter the text for our toggle. I'll go into options and index zero and change the text to Training Completed. Let's scroll down to our label and info sections and modify them as needed. There's additional functionality built into the form component that can show hide, enable, or disable form elements based on data entered into the form, like a toggle switch being flipped. For more information on these contingent actions for form elements, please see the link to the Ignition User Manual.

[11:08] below this video. I'll collapse this row item and open the next. The slider form element will be useful in this form to show the percentage of employees that have been through the required safety trainings. Let's open widgets and go to index zero. We can set up an ID of percentTrained and set the type to slider as well. Then, we can open up the new slider object and take a look at the settings. I think I want to show the numbers at intervals of 10 so I can open up labels and enable the show property. With that interval, we can update the label text to Percent Trained and delete the info text to wrap up that widget. Our final widget will contain the number of days since the last safety incident, so we can close up the slider widget and open item three to get our numeric entry field set up. Let's go into widgets and index zero and set our ID to safety incidents.

[12:10] I'll set the type to number next. I'll expand the number object and set our placeholder first. Then it's just a matter of changing the label text and deleting the info text. Let's put it into preview mode and see our form in action. I'll enter our inspector's information first, then we'll select area three for inspection. Uh oh, it looks like the inspector found some problems. I'll paste in some notes about what they found and I'll demonstrate the toggle, but we'll have to set it back to false, since no training has been done yet this quarter. Our slider will stay at zero too, since none of the employees have been trained at this point. As for the number of days since the last safety incident -- only one day.

[13:05] As you can see, our fictional furniture factory could really benefit from a risk assessment and some intensive training sessions. Really gives us some Perspective, doesn't it? In future videos, we'll learn more about form submission management and how the form handles data at the root of the component. The form component is a quick and convenient way to build responsive web forms inside Perspective that make data collection practically frictionless.