MATH, FUNCTIONS, AND EXPRESSIONS
Axure RP can perform math functions on your widget text and variable values. This is useful when you want to prototype a design with a computational component, like a shopping cart, shipping calculator, scheduling app, or advanced animation.
© 2002-2019 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.
Your basic arithmetic operators include:
+ : Addition. Example: [[VAR1 + VAR2]]
- : Subtraction. Example: [[VAR - 5]]
/ : Division. Example: [[VAR / 4]]
* : Multiplication. Example: [[VAR * 0.25]]
One other common math function is VAR.toFixed(), which rounds a value to a specified number of places after the decimal. Great for working with monetary values. If the value of PiVar is 3.1415926, [[PiVar.toFixed(2)]] returns a value of 3.14.
String functions can transform text strings. Some commonly used string functions are as follows:
VAR.length returns the length of a string. Example: if the value of StarVar is "Rey Skywalker", [[StarVar.length]] returns 13.
VAR.toLowerCase() converts a string to lowercase letters. Example: if EmailVar is CONTACT@EXAMPLE.COM, [[EmailVar.toLowerCase()]] returns email@example.com.
VAR.toUpperCase() converts a string to uppercase letters. Example: if SupportVar is Support@Example.Com, [[SupportVar.toUpperCase()]] returns SUPPORT@EXAMPLE.COM.
VAR.toString() converts a value to a string-type value from another type (like a number). Useful when a value is numeric but should be treated as a string. Example: if AgentVar is 007, [[AgentVar]] returns 7, but [[AgentVar.toString()]] returns "007".
WIDGET, CURSOR, AND PAGE
Another way to use functions is for getting information about properties of a widget, cursor, or page. Common such functions include:
VAR.x gets the x coordinate of an item. Example: if LVAR1 refers to a widget located at x: 100, y: 50, then [[LVAR1.x]] will return 100. Can also be used for the cursor.
VAR.y gets the y coordinate of an item. Example: if LVAR1 refers to a widget located at x: 100, y: 50, [[LVAR1.y]] will be 50. Can also be used for the cursor.
VAR.width gets the width of a widget. Example: if LVAR1 refers to a widget 280 pixels wide, then [[LVAR1.width]] will return a value of 280.
VAR.height gets the height of a widget. Example: if LVAR1 refers to a widget 60 pixels high, then [[LVAR1.height]] will return a value of 60.
Window.ScrollY finds out how far the page has been scrolled by returning the y coordinate currently at the top of the browser window. Example: if the page has been scrolled down by 600 pixels, [[Window.ScrollY]] is 600.
Feel free to use several functions at once. Consider a restaurant bill tip calculator. If the variable TotalVar holds a numerical value representing the total bill, it can be used to set the text on a "Total Bill" widget like this:
"The total bill is $[[TotalVar]]"
To add a 15% tip to the total, the expression would look like this:
"The total bill is $[[TotalVar * 1.15]] including a 15% tip."
Because we want the total bill to be fixed to two numbers past the decimal point, we can use the toFixed function with parentheses surrounding the value, like this:
"The total bill is $[[(TotalVar * 1.15).toFixed(2)]] including a 15% tip."
MORE FUNCTIONS (A.K.A. METHODS)
You can create an expression in any field that has an "fx" button next to it. Enter your expression directly into the field or click the "fx" button to bring up the Edit Text dialog, which includes a full list of Axure RP's available functions, a list of your project's global variables, and a field for creating local variables.