Text Input

The Text Input component allows the user to enter text. Its content can be displayed elsewhere in the application or used to trigger an.

Insert text input

Click Components and insert the Text input component.

In the Properties window, customize the appearance (size, alignment, color) and add a placeholder message if desired.

To validate the input, you have the choice between  automatic input (option Live Validation) or creating a validation button (action Interact with a component > Text Input > Validate).

Display text input in the application

Get the data entered by the user and display it elsewhere in your application.

Find the component ID

To get the data, double-click on the name of the component in the Properties window and paste the formula.

By example: 

Text-input9142 -> 5f903e615ccbd73fda000453

5f903e615ccbd73fda000453 is the component ID (ID_COMPONENT)

Display component data

Insert a block of text and customize the font style.
Instead of static text, we will connect to the component to display the data entered by the user.
In the Properties window, click on the Dynamic Data icon and the Add > Text button.

Replace  my-bind  by: 
[data:ID_COMPONENT(/inputValue)]

Trigger an action based on text data

This feature is particularly useful in the field of education. You can trigger an action based on the text, for example to validate whether or not it is the right answer.
For this you use the Condition component. You need to create 2 conditions "If the entered text is correct" & "If the entered text is not correct" and assign actions accordingly.
Let's take the example of an English learning app. The user has to type the translation of "pineapple": "pineapple". Depending on his answer, the pop-up "Good answer" or the pop-up "Wrong answer" opens.

Create conditions

Insert the Condition component and from the Properties window create the condition "If the answer is pineapple".
Here are the parameters of the expression: 
Data: [data:ID_COMPONENT(/inputValue)]
Function: Equal
Value: ananas

Create a second condition "If the answer is not pineapple":
Data: [data:ID_COMPONENT(/inputValue)] 
Function: Not equal 
Value: ananas

Prepare your 2 pop-ups that notify your user of the right and wrong answer.

Evaluate conditions

Now that your conditions are ready, you need to create the action to evaluate them. Indeed, we have not chosen automatic evaluation so that the user has time to type his answer and confirm it.
Select the button and create an action by typing: Interact with a component > Evaluate condition for each of the 2 conditions.

Trigger based on condition 

Now according to the evaluation, the right actions have to be assigned.
Select the Condition component and open the Actions window.
Choose for each of the conditions Interact with a component > Pop up


Still need help? Contact Us Contact Us