LESSON

Custom Input Template

Description

Learn how to create a custom input template that includes a label, text field, and validation of data.

Video recorded using: Ignition 7.7

Transcript

(open in window)

[00:00] When we're creating forms in Ignition, we use various input components, such as a text field or a numeric text field, or a drop-down list. And to your left-hand side, we use a label to describe what that field is. We sometimes put a validation in the text field so we can validate what the user enters in. Now this combination of components as well as a logect we built into it is something that we use several times throughout our project. Well, rather than copying and pasting it, we can actually create a template out of these objects. So let's create our own text entry in the template here. Let's go down to our templates. Right-click and create a new one. I'm going to right-click to rename this one as Text Entry. Just like any other template, we have to add a parameter first. So I'm going to right-click on the template, go down to customizers, custom properties and add two parameters here. The first one being the value on display in the labels. So I'll call this Display. It's going to be a string-data type. The second one is going to be the value of the text fields, so the actual text. I'm going to call it Text, and again, make that a string as well. Go ahead and press okay, now I've got those two things. I'm going to go back here to my window. I'm going to copy and paste these two components into my text entry. I'm then going to make the template a little bit smaller, so I can nudge it up against those components. First thing I'm going to do is, in the label here is I'm going to bind the text property to a property, which is the display of the template. And make sure it's not bi-directional, go ahead and press okay. On the actual text field, I'm going to bind the text property of it to a property selecting the text of the template. This is that property that we created. Now this one, we definitely want to make bi-directional. Now if we make this property bidirectional. Of course, we can set the text of the template which will update in the text field. But if somebody changes the value of the text field, it will also update the property of the template, which we can then use in a button or somewhere else on that window. So I'm going to go ahead and press okay. Last thing I want to do here is maybe change the background color of the text field, when the user doesn't have a correct value. So let's just say if it's empty, I want it to be red. If it's not empty, I want it to be white. So we can actually go down and bind the background property to an expression. And the expression is going to be, if, using the link on the top right, go and get the text field's text. If that text is equal to empty string, then I'm going to basically do a two color of red. So I need it set because it's in a non-valid entry. Otherwise, I'll make it white. And that's it from my if statement. So essentially, it's going to be a little bit of validation there for me. Now I've got this custom text entry that I can use on my screen. So I'm going to go ahead and close it, and save it, put my window here. I can drag text entry onto the screen. And of course, it has two properties I have to set. First being the display, let's say its first name. And the second being the actual text. So of course, if I use this component, and I put a value like hello, you'll see that's going to be white now. And the value of hello is here as a property that we can then use on the screen. But I can use this text entry multiple times and it can do a validation for me. So that way, I don't have to copy and paste these components. So second one here, I can say is last name. And of course, I can enter in a value here. And I would see that again on the component here in the bottom left. So we can definitely make our own custom input components.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.