Learn how to prototype web and mobile apps

How to change the value of text in your interactive prototypes

Change the value of text in your interactive prototypes with the help of this tutorial.

You will learn how to simulate that text, when clicked, becomes editable, and you will be able to replace its original value with a newly entered one.

change-the-value-of-text-in your-interactive-prototypes_gif

1) 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.

2) Select the Dynamic panel and create a new panel.

3) Insert an Input text field and a Button in the new panel.

4) Select the Button you placed in the second panel and click on “Add Event” in the Events tab.

5) 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.

Change Text Value in your UI prototypes. Set active panel event

6) Click the gear icon next to the word “Do” in the Events tab and click on ‘Add Action’.

7) Now choose an ‘On tap’ + ‘Set Value’ event, and select the Text widget in the first panel of the Dynamic panel.

Change Text Value in your UI prototypes. Set value event

8) At the bottom of the events dialog, select the option ‘Calculated’ displayed next to ‘Value is..”. Then select ‘Add expression’

9) 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.

Add value expression to your UI prototype

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

11) Select the Text widget in the first panel, go to the Events tab and push the ‘Add event’ button.

12) 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!

Next tutorial > Create multi-submit forms in your interactive prototypes