Change the value of a text
Change the value of a text in your interactive prototypes with the help of this tutorial.
You will learn how to simulate that a text, when clicked, becomes editable, and you will be able to replace its original value with a newly entered one.
- In a new web prototype, drag a Dynamic Panel into the canvas. Right click on it and select ‘Edit content’. Then, drag a Text widget inside the panel.
- Select the Dynamic panel and create a new panel.
- Insert an Input text field and a Button in the new panel.
- Select the Button you placed in the second panel and click on “Add Event” in the Events tab.
- Add an ‘On click’ + ‘Set active panel’ event and select the first panel (it’s easier if you use the Outline tab). Click OK. The event you just created is displayed in the Events tab.
- Click the gear icon next to the word “Do” in the Events tab and click on ‘Add Action’.
- Now choose an ‘On click’ + ‘Set Value’ event, and select the Text widget in the first panel of the Dynamic panel.
- At the bottom of the events dialog, select the option ‘Calculated’ displayed next to ‘Value is..”. Then select ‘Add expression’
- The expressions editor dialog will show up. In the Screen tab, select the second panel of the Dynamic Panel and drag the input text element to the expression.
- Click OK twice. You have now selected all the necessary commands so that when the user clicks the button, the text entered goes to the first panel.
- Select the Text widget in the first panel, go to the Events tab and push the ‘Add event’ button.
- Add an ‘On click’ + ‘Set active panel’ event, and select the second panel. Click OK.
Now click on the Simulate button to verify the results: the user can replace the original text by clicking on it!