MATH, FUNCTIONS, AND EXPRESSIONS

OVERVIEW

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.


RP also gives you access to a large number of other types of functions, like string functions and date functions, borrowed from JavaScript. Examples of these include "length", which returns the number of characters of text on a widget or in a variable value; "toLowerCase", which converts widget or variable text to all lowercase letters; "toFixed", which takes a widget or variable value and rounds it to a given number of decimal places (good for working with currency); and "getDate", which can return a specified date (e.g. today's or tomorrow's).

MORE RESOURCES

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

86% OF THE FORTUNE 100

USE AXURE RP

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

COMMON FUNCTIONS

MATH

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

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 contact@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.

COMPOUND EXPRESSIONS

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)

The functions described above are just a small sampling of what's available in JavaScript. Not all JavaScript functions (also called "methods") are useful in the context of Axure RP, but many are. For a very thorough list, check out this JavaScript methods list from the Mozilla Developer Network.

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.