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.
change default value text header
Follow the steps below to create an interaction to edit the value of text when it’s clicked:

  1. Create a new mobile prototype and drag a Dynamic Panel onto the Canvas. Right click on it and select ‘Edit content’.change text value new prototype
  2. Then, drag a Text widget inside the panel and type in a value.change text value add text
  3. Select the Dynamic Panel and create a new Panel by clicking on the ‘+’ icon.change text value add panel
  4. Insert an Input Text Field widget and a Button widget in the new panel.change value text input widget
  5. Select the Button you placed in the second panel and click on “Add Event” in the Events palette.change text value add event
  6. 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.

  7. Click the gear icon next to the word “Do” in the Events palette and click on “Add action”.change text value gear icon
  8. 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.
  9. 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.

  10. 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.