Back to all Tutorials

Changing the Value of a Text Dynamically

Simulate text that, when clicked, allows you to directly edit it, and replace the value of the original text with that entered by the user.

  • Drag a Dynamic Panel component and write text in it. Remember that when you move a screen component to a dynamic panel, it is inserted into the active layer.
  • Select the dynamic panel and create a new layer.
  • Insert a text input field in it and also draw a button.
  • Select the button you placed in the second layer and click Add Interaction (the Event tab).
  • Choose the Show/Hide option and indicate that you want the first layer to be displayed. Click OK. The event that you just created is displayed in the Events tab.
  • Click the arrow next to the "Do" tab. In the open context menu, click Create Action to add a behavior to the existing one.
  • Now choose Set Value, go to the first layer of the dynamic panel, and select the text element.
  • Select the value by clicking on the Calculate option.
  • Build expressions through the dialog box that pops open. In the Screen tab, select the second layer of the Dynamic Panel and drag the text element to the top (in the dotted box).
  • Click OK and return to the Event dialog box. Click OK again. You selected all the necessary commands so that when the user clicks the button, the text entered goes to the first layer.
  • Go to the Events tab and add an interaction to make the second layer appear when you click the text.
  • Click the Simulate button to verify the results: the user can replace the original text after confirming it by clicking the button that you drew.
Back to all Tutorials