Changing the default value of an Input Text Field
With Justinmind, you can create simple interactions to change the value of text based on user input.
Follow the steps below to create an interaction to edit the value of text when it’s clicked:
- Create a new mobile prototype and drag a Dynamic Panel onto the Canvas. Right click on it and select ‘Edit content’.
- Then, drag a Text widget inside the panel and type in a value.
- Select the Dynamic Panel and create a new Panel by clicking on the ‘+’ icon.
- Insert an Input Text Field widget and a Button widget in the new panel.
- Select the Button you placed in the second panel and click on “Add Event” in the Events palette.
- Add an “On Tap” + “Set Active Panel” event and select the first panel to be set as active. You can select the first panel by clicking it on the Canvas, or in the Outline.
The event you just created is now displayed in the Events palette.
- Click the gear icon next to the word “Do” in the Events palette and click on “Add action”.
- Create an “On Tap” + “Set Value” event, selecting the Text element in the first panel of the Dynamic Panel as the target of the action. For the value, click the “Calculated” radio button and the “Add expression” text. You’ll see the Calculated Expression builder appear.
- In the builder, select the second panel of the Dynamic Panel and drag the Input Text Field element to the open space in the expression.
This event will transfer the text entered into the Input Text Field back to the Text element on the first panel, and will set the first panel as active again.
- Back on the Canvas, select the Text element in the first panel and add an “On Tap” + “Set Active Panel” event, selecting the second panel to be set as active.
That’s it! Click “Simulate”, tap on the Text element and enter text into the Input Text Field. The text you entered will be shown in the Text element.