---
title: "Custom Input Template"
---
# Custom Input Template
>
Sometimes you may need to have text fields in your project for the user to input data. Rather than copying and pasting these text fields into each window, you can create a template for them that includes a label and a text field. A template can contain scripting to validate the data in the text field.
## To Create a Custom Input Template
1. In the Project Browser, right-click **Templates** and select **New Template**.
2. Right-click on **New Template** and click **Rename** to change its name it to something, lets say **Text Entry**.
3. To add a parameter, right-click the checkered area and select **Customizers** > **Custom Properties**.
4. In the **Custom Properties** window, add two **Template Parameters** by clicking the + icon twice and entering the following:
1. 1st Parameter
- Name: **display**
- Type: **String**
2. 2nd Parameter
- Name: **text**
- Type: **String**
5. Click **OK**.
6. From the Component Palette, drag a **Text Field** and a **Label** to the checkered area of the template, resizing so that the label and the text box occupy the majority of the space.![" "]()
7. Select the **Label** component, go to **Property Editor**, and click on the binding icon of the **Text** property. The Property Binding window is displayed.
8. In the **Property Binding** window, click on **Property**, choose the **display** property. Make sure the **Bidirectional** Box is not selected, and click **OK**.
Don't worry if the label on the template disappears. Its is simply displaying the value of the display custom property which is currently blank.
9. Now select the **Text Field** component, go to **Property Editor**, and click on the binding icon of the **Text** property.
10. In the **Property Binding** window, click on **Property**, choose the **text** property. Make sure the **Bidirectional** Box is selected, and click **OK**. Suppose you want data validation on the Text Field. We can have the background color of the Text Field change depending on whether the user has entered a text value or not. We can set the field to red when its empty, and white when it has a value.
1. While the **Text Field** component is still selected, go to **Property Editor**, and click on the binding icon of the **Background** property.
2. In the **Property Binding** window, click on **Expression**, enter the following expression:
```java
//Inside the if statement is the len and the trim functions that are availible when doing expression bindings.
//The trim function will trim the blank spaces from the text therefore validating that there is actual text rather than spaces.
//The len function will count the lenth of the recently trimmed text.
//The if statements asks the question: Is the length of the trimmed text greater than zero?
if(len(trim({textBox.Text Field.text}))>0,color(255,255,255),color(255,0,0))
```
3. Click **OK**.
11. Close the template, click **Save** on the prompt window, and click **OK**.
12. To set data validation, drag a few the **Text Entry** templates from **Project Browser** to the screen or window. Notice that the text field is red.
13. In the **Property Editor**, go to the **display** custom property and enter something like First Name. Do something similar for the other templates. Notice how the label gets filled in with the data we enter.![" "]()
14. Put the designer into Preview Mode, and enter in some values into the text fields. Notice that the background color changed to white, and the information that was entered is now in the **text** property that can be bidirectionally bound so that it writes to a tag or is used in a script.![" "]()