Hi all!
Because so many solutions rely on using local variables, I’m going to describe them here so I have a post that I can link to whenever I’m offering a solution that involves the use of local variables.
Note: at the bottom of this post, there’s a link to a file containing the examples illustrated below.
##Using local variables
Whenever you need a property of another object, like its text value, selected state, width, x position, etc., you can use a local variable. You can define these wherever you are offered an entry box that has the fx button next to it:
<img src="//axure-discourse.s3.amazonaws.com/original/3X/d/7/d7fd78b8a415c225d0bac2a8229bb9d309462437.png" width=“172” height=“34” '>
Example: summing up the text values on various widgets
Say you have four widgets: val1, val2, val3, and total. You also have a button for putting the sum of val1, val2 and val3 into the widget total. To do this, the Set Text command in the OnClick interaction of the button will need to access the text of the “val” widgets.
Start by using the Set Text command in the OnClick interaction of the button, and hit the fx button for the text value you are going to set:
This brings up a dialog where you will define three local variables that refer to the text values of widgets val1, val2 and val3:
You can name the local variables whatever you want. I like to prefix their names with “LVAR_” so I can tell it’s a local variable when I look at the expression. Note that the dropdown to the right of the variable name is set to text on widget, which is the property we are grabbing from the widget chosen at the far right.
And again, we are creating these local variables so we can use them in an expression that sums them up. That expression is entered into the top part of the fx dialog, shown below:
The expression [[ LVAR_val1 + LVAR_val2 + LVAR_val3 ]] is surrounded by double brackets. This identifies the contents of the brackets as an expression rather than as text that is to be displayed as entered. The result of this expression will be placed in the text of widget “total.”
Example: set width of one widget to the width of another
Going back to the fx dialog box, let’s look at the dropdown between the variable name and the widget whose properties you want to get:
In the previous example, we chose text on widget as the property to grab, but there are other options. As a brief aside to this example, here is a quick summary of these other options.
- is selected of: for a checkbox (or any widget that can be selected), this option returns true or false depending on the selected state of the widget specified to the right.
- selected option of: for a droplist or a list box, this returns the value that is selected from the list of options.
- value of variable: this one has nothing to do with a widget. When chosen, you will be offered a list of global variables to choose from. I know of no good reason to assign a local variable to a global variable, so I’d ignore this option.
- text on focused widget: When selected, there is no option to choose a widget at the right. Instead it gives you the text of the widget that has keyboard focus.
- widget: this assigns the local variable to the widget itself, which is useful for getting a whole host of properties from the widget that are not in this dropdown list. This last one is what we will be using for this task.
On to our example. Here we will have two rectangles with differing widths called “A” and “B.” Clicking on rectangle “A” will set the width of rectangle B to rectangle A’s width. So we will be using the Set Size command in OnClick of rectangle A, and once again, we’ll be using the fx box for setting the width:
To set the width of rectangle B to the width of rectangle A, we first are going to need to grab the width value from rectangle A. Since “width of” is not an option on the dropdown described above, we’ll set the variable to rectangle A itself by choosing widget in the dropdown:
Now, we can use this LVAR_A local variable to access many properties of rectangle A. The Insert Variable or Function link in the fx dialog gives you a list of widget properties you can grab:
To get the width of rectangle A using the LVAR_A variable we created, use this expression:
[[ LVAR_A.width ]]
Hitting OK in this dialog shows us the completed command (in OnClick of rectangle A) that sets the width of rectangle B to the width of rectangle A.
Using the keywords This and Target
Often, instead of using a local variable, you can use the keyword This or Target.
The keyword This refers to the widget that contains the current command. So in the Set Size example above, rectangle A is what has the OnClick script, so rectangle A would could be referred to as This in an expression used anywhere in the width or height boxes of the Set Size command.
Target refers to the object that is being modified by a command. In the Set Size example above, we are setting the size of rectangle B, so in the width or height fx box, we could refer to rectangle B as Target
Thus, the sizing example above could be achieved without any local variable. We could just use the keyword This to refer to rectangle A since it’s rectangle A that has the OnClick script:
OnClick (of rectangle A)
Set Size of Rectangle B to width: [[ This.width ]] height: 64
For an example using Target, let’s say upon clicking rectangle A we want rectangle B to double its own width. Since we are sizing rectangle B, we can use the keyword Target to get the width of rectangle B (since B is the “target” of the Set Size command), and then multiply that value by two, no local variable needed.
OnClick (of rectangle A)
Set Size of rectangle B to width: [[ Target.width * 2 ]] height: 64
I hope this has helped! I you see an error or would like to add additional examples, post here.
Here is a file containing the examples above: local variables.rp (81.5 KB)