Applies to: GUI Design Studio Professional v4+
How do I display user-input texts on another element? How do I use variables for Text Substitutions?
In GUI Design Studio Professional, practically every piece of text that is displayed can include data values set from elsewhere, such as text entered into an Edit Box element. This is known as Text Substitution because it allows you to substitute placeholder text with actual values when running the prototype.
First you need to define the data value. This can be done by assigning a Variable Name to the Edit Box element. Variable values can also be assigned using Set Data boxes or Project Options.
To embed variable values in any text, the basic format is to enclose the variable name in double curly brackets (note that variable names cannot contain spaces):
This example shows how an Edit Box text simultaneously overlays the text onto a Text element.
1. Create a design that allows you to type in using an Edit Box and to display a text using a Text element. Below is a good example for this exercise.
2. Double click on the Edit Box element to see Edit Box Properties. Click on Prototype tab and assign "EditValue" as its Variable Name. Click OK.
3. Notice that a purple note now appears at the top-left part of the Edit Box element. Mouse-over the note and it will show you the Variable Name.
4. After assigning a Variable Name, we can now use this variable to overlay the text displayed in the Text element. To do this, double-click the Text element. Go to the Text tab in Text Properties. Type in the desired text, adding the basic format for embedding variables. Click OK.
5. When in Prototype, changing the text in the Edit Box element simultaneously changes the text displayed in the Text element.
Click on the video below to view the example:
For further information, see the "Text Substitutions" section of the Help, under "Extended Interaction Features" ("Help | Contents" menu command).
I've attached both the .gdd and .gui files here: