As described above, if you want to use a value from a widget in your math or string function, you can create a local variable to store that value.

For example, if you were building a restaurant bill calculator, you could use the value entered in a text field for the bill to calculate the tip. That text field value would be stored in a local variable which could then be used to calculate the value [[LVAR1*0.20]].

With a little practice, you’ll be setting, calculating and constructing widget values in no time.

Download RP File | Demo Prototype

This example dynamically copies text and droplist selections by clicking a checkbox using the “Set Variable/Widget Value(s)” action and local variables.

Download RP File | Demo Prototype

This example uses the “Set Variable/Widget Value(s)” action and math and string functions to calculate the total bill amount.

Consider a restaurant bill calculator example. If the local variable LVAR1 is set to the value of a text field representing the total from a bill, we can set a text panel to the total like this:

          The total bill is $[[LVAR1]]

To add a 15% tip to the total, the expression would look like this:

          The total bill is $[[LVAR1 * 1.15]] including a 15% tip.

Here is a list of the available math and string functions:

          + : Addition. E.g., [[LVAR1 + LVAR2]]

          - : Subtraction. E.g., [[LVAR1 - 5]]

          / : Division. E.g., [[LVAR1 / 4]]

          * :  Multiplication. E.g., [[LVAR1 * 0.25]]

          LVAR.toFixed(decimalPoints): formats the value to use a specified number of places after the decimal.

          E.g., if LVAR1 is 3.1415926, [[LVAR1.toFixed(2)]] return the value of  3.14.

          LVAR.substring(from, to): returns the characters from a string, between the start index (“from”) and the end index (“to).

          E.g., If LVAR1 is “Bill Haverchuck”, [[LVAR1.substring(2,10)]] returns “ll Haver”.

          LVAR.length: returns the length of a string.

          E.g. If LVAR1 is “Lindsay Weir”, [[LVAR1.length]] returns 12.

          LVAR.toLowerCase(): converts a string to lowercase letters. E.g., [[LVAR1.toLowerCase()]]

          LVAR.toUpperCase(): converts a string to uppercase letters. E.g., [[LVAR1.toUpperCase()]]

          LVAR.toString(): converts the value to a string. Use when a value is numeric but should be treated as a string.

          E.g. if LVAR1 is 09, [[LVAR1]] returns 9, but [[LVAR1.toString()]] returns "09".

When setting text values on non-form widgets like text panels, button shapes, and images, you'll see an "Edit Text" button. Clicking this opens the Enter Text dialog.

In this dialog, you can enter and format the text value for the widget. You can also insert variable values and math and string functions into the text. Those values and functions are surrounded by double square brackets.

When setting text values on form widgets like text fields and text areas, you can choose to set the text to a value (which is a static text value), value of variable, length of variable value, selected option of (a droplist or listbox), text on widget, length of widget value, or text on focused widget.

For example, if you create an action to Set Text on Widget Job Field equal to Selected Option of Job Droplist, the prototype will put the current selected option of the droplist into the text field.

We'll cover how to insert variable values in the Variables article.

To set a widget value, add an interaction case and choose the “Set Variable/Widget Value(s)” action in the Case Editor dialog.

In Step 4 of the Case Editor, click on the “Open Set Value Editor” to open the Set Variable and Widget Values dialog.

In this dialog, you can construct action(s) to set a widget value. You can set multiple widget values in the same action. To do this, click on the [ + ] button after the first action. To remove an action, click on the [ – ] button.

In each row, the first and second fields are the type of widget value and the specific widget you want to set.

Using interactions, you can dynamically set widget values like the text in a text field or the selected option in a droplist. This is useful for interactions like setting the text in a text field to a variable value or dynamically checking a checkbox when a condition is met. You can also use math and string functions to calculate the value being set.

In this article, learn how to do things like dynamically change the text on a text panel or check a checkbox. Also, learn to use variables and math & string functions when setting values.

You can set the following types of widget values:

          Is checked of: The check state of a checkbox or radio button.

          Selected option of: The selected option of a droplist or list box.

          Text on widget: The text displayed on a widget. (Explained in more

          detail below)

          Text on focused widget: The text displayed on the widget currently

          in focus.

The third and fourth fields are the type of value and the specific value you want to set it to. These options depend on the type of widget you are setting and include entering a fixed value, setting it to the value stored in a variable, setting it to the value of another widget.

There are a number of functions available in the Enter Text dialog for calculating values and manipulating strings. For example, you can set the text on a text panel widget to the sum of the values from two text fields. Or, you can remove the last character from the text in a text box. This can get a little complex, so try to keep it simple if you can.

Because we want the total bill to be fixed to 2 numbers past the decimal point, we can use the toFixed function with parenthesis surrounding the value like this:

          The total bill is $[[(LVAR1 * 1.15).toFixed(2)]]

String functions work the same way. For example, the following expression gives us the string in LVAR1 with the last character removed (like pressing Backspace/Delete):

          [[LVAR1.substring(0,LVAR1.length - 1)]]

The substring function takes two values, the start index and the end index. In our expression, we want the characters starting from the 0 index and going to (but not including) the index equal to the length of the string minus 1.

If you want to use a value from another widget when setting the text, you can create a local variable to store that value. Local variables exist within the scope of an action and do not get passed to other pages.

To insert a local variable, click “Add Local Variable” in the bottom area of the Enter Text dialog. Then assign the value of the text field to the local variable and you can set the value of the widget to “[[LVAR1]]”.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

Learn to dynamically

Set Widget Values

Widget Values Overview

Set Widget Values

Text Values on Text Fields and Text Areas

Text Values on Text Panels, Button Shapes, and Images

Local Variables

Define Math and String Functions

Local Variables in Functions

Math and String Functions

Building a Math Expression

Building a String Expression

Set Widget Values Tutorials & Examples

Example: Same As Billing Checkbox

Example: Tip Calculator

Click to Clear

Setting Text on Droplist Selection

This tutorial shows us how to clear a text field by clicking it and dynamically display a confirmation message in the text field.

Go to Click To Clear Tutorial

This tutorial shows us how to insert text into a text panel by making a selection from a droplist using local variables .

Go to Setting Text on Droplist Selection Tutorial