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

How to change default value text

Follow the steps below to create an Event to edit the value of text when it is 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 add some text. In our example we wrote ‘Click to edit this text’ inside the Text widget.
    • 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. You can select the first panel by clicking it on the canvas, or in the Outline. Click OK.
    • 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. Now choose an “On tap” + “Set Value” event, and select the Text element in the first panel of the Dynamic Panel. 

    • At the bottom of the Events dialog, select the option Calculated” displayed next to Value is…” and then select “Add expression”.

  9. The Expression builder will appear. Using the Outline, select the second panel of the Dynamic Panel and drag the Input Text Field element to the open area of the value expression.
    • Click OK twice. The event you have created 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. Now select the Text element in the first panel, go to the Events palette and click “Add event”
    • change text value text element
  11. In the events dialog, add an “On tap” + “Set active panel” event, and select the second panel as the destination. Click OK to finish building the event.

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.