Learn how to prototype web and mobile apps

Your interactive prototypes: 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.

  1. 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.
  6. Click the gear icon next to the word “Do” in the Events tab and click on ‘Add Action’.
  7. Now choose an ‘On click’ + ‘Set Value’ event, and select the Text widget in the first panel of the Dynamic panel.
  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.
  10. Click OK and return to the Events dialog. Click OK again. You have 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 on 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!


    • admin

      December 9, 2014 at 1:54 am

      We have rephrased that section, hopefully it’s more clear now.

      • Chris Philip Smith-Hill

        September 10, 2015 at 11:57 am

        Adding the event went way fast. I’ve watched it 4 times and still can’t get it.

        • Danielle Schneider

          September 10, 2015 at 3:36 pm


          What in particular is confusing? We’d be glad to help clear things up for you.

  1. Chris Philip Smith-Hill

    September 11, 2015 at 2:59 pm

    At 30 seconds, the mouse goes lightning fast. Hard to follow.

Leave a reply

Your email address will not be published. Required fields are marked *

72 − = 68