Change a prototype while it plays with variables
You get named values on a prototype that a click can change, so a label can count, or an element can appear and disappear, when you click through it in Present.
You need a prototype with at least one clickable element. See Make a prototype clickable.
What a variable is
A variable is a named value on the board, with a default. There are four kinds: Colour, Number, Text and Yes/no. The kind is fixed when you add it. The default is what Present starts with, and what it goes back to when you press Esc.
Nothing binds to a Colour variable yet, so use Number, Text or Yes/no for now.
Add, rename and delete a variable
- Click empty canvas so nothing is selected, and open the Design tab. The Variables section is at the bottom.
- Click Add variable and pick a kind.
- Type a name in Variable name and set the default in its value field (labelled "<name> default value"). A yes/no variable has a box and says Yes or No.
- To remove one, click the bin icon, Delete variable and its name.
Deleting a variable also removes the Set actions that point at it, and anything bound to it goes back to its own value. Undo (Ctrl+Z) brings the variable back, with its Set actions.
Bind a label or Visible to a variable
- Select an element. In the Design tab, find the Visible row. Text and boxes also have a Label row.
- Click the braces button, Bind label to a variable or Bind visibility to a variable. It lists the variables that fit: Text or Number for a label, Yes/no for Visible. New … variable makes one and binds it in one step.
- The row now shows a chip with the variable's name. In Present, the label reads the variable's value, or the element shows when it is Yes and hides when it is No.
To detach, click the x on the chip (Detach label from the variable's name). The element keeps the value it showed at that moment. Typing a new label into a bound label detaches it too.
Set a variable when something is clicked
- Select the element and open the Prototype tab.
- Under Add action: set a variable, pick the trigger (When to set the variable), pick a Variable, and give the Value. For a yes/no variable you can tick Toggle instead, to flip it each time.
- Click Add action.
The action is listed above the form, such as "On click: set Cart to 3". Click it to load it back into the form, and Add action again to change its value. Click the bin icon (Remove the action) to take it away. The same element can also lead to a screen on the same trigger. As with navigation, Present plays On click, On press, Mouse down and Mouse up.
How Present runs it
- A click applies its Set actions first, then goes to the screen if the same trigger leads to one.
- Present keeps the new values while you click through the screens and step with ← and →.
- Press Esc and every variable goes back to its default, as the screen goes back to where Present opened.
- Nothing Present changes is saved to the board.
- A hidden screen is never where Present opens, and ← and → skip it. A Set can still reveal it, and a link can still lead to it.
Limits
- The Visible box and the eye in Layers are off while Visible is bound. The variable decides. Detach to use them again.
- A copy from a version never brings variables. A screen copied out of a version uses the variables already on this board.
- The AI never sees variables or Set actions.
If it doesn't work
- The bind button lists nothing. Add a variable of the right kind first: Yes/no for Visible, Text or Number for a label.
- I can't pick a variable under Add action. The tab says to add a variable on the Design tab.
- Nothing changes in Present. Check the trigger: only the four above play.