---
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 that includes a single label and text field. Parameters can then be passed in so that the label and text can be used for different types of input. The template can then contain an expression to validate that there is data in the text field. This template can be reused many times on multiple windows to allow users to input data.

## Custom Input Template Example

In this example, we'll create a template containing a Label and Text Field components. We'll add two parameters to be passed into the components. We will also copy the expression in the code block below to let the user know that there is data in the text field.  Once you get the template created, you can copy the template to a window and test it out.  

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 meaningful such as **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 Add ![" "](custom-input-template-add-icon.png) icon twice and entering the following:

    - 1st Parameter
        - Name: **display**
        - Type: **String** 
    - 2nd Parameter
        - Name: **text**
        - Type: **String**

    ![" "](custom-input-template-add-params.png)

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.

    ![" "](custom-input-template-label.png)

7. Select the **Label** component, go to the **Property Editor**, and click on the **Binding** ![" "](custom-input-template-binding-icon.png) icon of the **Text** property. The Property Binding window is displayed.

8. In the **Property Binding** window, click on the **Property** binding type, 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. It is simply displaying the value of the display custom property, which is currently blank.

    ![" "](custom-input-template-property-binding.png)

9. Now select the **Text Field** component, go to **Property Editor**, and click on the **Binding** ![" "](custom-input-template-binding-icon.png) icon of the **Text** property.

10. In the **Property Binding** window, click on the **Property** binding type, choose the **text** property. Make sure the **Bidirectional** box is selected, and click **OK**.  

    ![" "](custom-input-template-property-binding-2.png)

11. Next, make the background color of the Text Field change depending on whether the user entered a text value or not. While the **Text Field** component is still selected, go to **Property Editor**, and click on the binding icon of the **Background** property.

12. In the **Property Binding** window, click on the **Expression** binding type, and copy and paste in the following expression.

```python title="Expression - Input Validation"
// Inside the if statement is the len and the trim functions that are available 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 length 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))
```

13. Click **OK**.

14. Close the template, click **Save** on the top menubar, and click **Save** again.

15. To test it out, drag a few of the **Text Entry** templates from **Project Browser** to your window. At first, text field will be red as it is expecting data.

    ![" "](custom-input-template-label-2.png)

16. In the **Property Editor**, go to the **display** custom property and enter something like **Name**. Do something similar for the other templates to fill the label. Note that the background color changed to white.

    ![" "](custom-input-template-label-result.png)

17. Put the Designer into **Preview Mode**, and enter values into the text fields. Now, the information that was entered into the **text** property can also be bidirectionally bound so that it writes to a Tag or can be used in a script.

    ![" "](custom-input-template-label-result-2.png)