The Text Input component

The Text Input component allows you to display a field for the user to write text. This text can be reused elsewhere in the application, sent to a database, or used to trigger an action.

Insert a text input field

Insert the Text Input component.

In the properties, customize the appearance (size, alignment, color) and add a generic message if desired.

You can choose from several types of text to customize the display format of this text:

• Text
• Text Area
• Password
• Email
• Number
• Phone
• URL
• Date

Validate the entry

Once the user has completed the field, you need to add an action to validate the entry. You have two options:

• Automatically validate the entry
• Create a validation button

Automatically validate

To automatically validate, simply activate the Live Validation option in the component properties.

Create a validation button

To create a validation button, insert a button and add an action.

Select the event Simple Tap / Click and the action Interact with a component. Select the Text input component and the action Validate.

Display the entered text

You can reuse the validated text in the application.

Insert a text block and customize the style. Add a data binding on the Content: From a component > Text input.

Add a conditional action

You can trigger actions based on the text entered by the user using Conditions.

Based on the entered value

Let's imagine an English learning application. The user must enter the word pineapple to get the correct answer. A pop-up message indicates whether the response is correct or incorrect. You need to create a condition If the text is pineapple and another If the text is not pineapple and associate the correct actions.

Insert the Condition component, and in the properties, create the two conditions using the value of the Text input component.

Add an action to evaluate these conditions.

With the Condition component, add actions to open the correct pop-ups based on each condition.

Add an action Condition Evaluation > Interact with a component > Pop-up > Open the pop-up.

Based on validation status

With the Condition component, you also have access to other parameters:

• Is empty
• Is valid
• Is validated

Store / send the data

The data entered by the user is local: when the application is closed, this text disappears.

It is possible to store this data locally to keep it persistent through a variable and the PandaSuite database, send it to another service using the HTTP component, or associate it with a user session through the Firebase Session component.