Math, functions, and expressions

Expressions allow you to dynamically generate text and numeric values through interactions in your prototypes. You can use expressions to do things like calculate the purchase total for a shopping cart, dynamically construct UI messages, and display the current date.

You can use an expression in any field that has an fx icon next to it. Type your expression directly into the field or click the icon to open the Edit value dialog.

From there, you can click Insert variable or function to view the full list of variables and functions available for use in expressions. You can also create local variables to access specific widget properties in your expressions.

Writing expressions

Axure RP treats any text wrapped in double square brackets as an expression, and the expression itself will be replaced by its own final output value in the web browser. Text outside the brackets is treated as static and will not be changed in the web browser.

For example, if you set the text on a widget to Your total is $[[ 5.50 + 2.99 ]], the widget's text will read Your total is $8.49 in the web browser.

Numbers and math

Basic operators

You can perform the following basic math operations in your expressions:

Addition: +

[[ 5 + 2 ]] -> 7

Subtraction: -

[[ 5 - 2 ]] -> 3

Multiplication: *

[[ 5 * 2 ]] -> 10

Division: /

[[ 5 / 2 ]] -> 2.5

Modulus/Remainder: %

[[ 5 % 2 ]] -> 1

Advanced number and math functions

To perform more advanced mathematical operations, use the functions listed under Number and Math in the Insert variable or function menu.

You can use these functions with:

• numbers:

  [[ 7.546.toFixed(2) ]]
• variables containing numeric values:

  [[ TaxRateVar.toFixed(2) ]]
• numeric values returned by other operations and functions:

  [[ (2.55*7.3).toFixed(2) ]]

x.toExponential(decimalPoints)

Returns a string representing x in exponential notation. You can specify the number of decimal places in the parentheses.

[[ 12345.toExponential() ]] -> 1.2345e+4
[[ 12345.toExponential(2) ]] -> 1.23e+4

x.toFixed(decimalPoints)

Rounds x to the number of decimal places specified in the parentheses.

[[ 12.345.toFixed(2) ]] -> 12.35

x.toPrecision(length)

Returns a string representing x with the specified number of significant digits. May return in exponential notation for large numbers.

[[ 12.34.toPrecision(3) ]] -> 12.3
[[ 12.34.toPrecision(5) ]] -> 12.340
[[ 1234.toPrecision(2) ]] -> 1.2e+3

Math.abs(x)

Returns the absolute value of x.

[[ Math.abs(1) ]] -> 1
[[ Math.abs(-1) ]] -> 1

Math.acos(x)

Returns the arccosine of x in radians.

[[ Math.acos(-1) ]] -> 3.141592653589793
[[ Math.acos(0) ]] -> 1.5707963267948966
[[ Math.acos(1) ]] -> 0

Math.asin(x)

Returns the arcsine of x in radians.

[[ Math.asin(-1) ]] -> -1.5707963267948966
[[ Math.asin(0) ]] -> 0
[[ Math.asin(1) ]] -> 1.5707963267948966

Math.atan(x)

Returns the arctangent of x in radians.

[[ Math.atan(1) ]] -> 0.7853981633974483
[[ Math.atan(0) ]] -> 0
[[ Math.atan(-0) ]] -> -0

Math.atan2(y, x)

Returns the angle in the plane (in radians) between the positive x-axis and the ray from (0,0) to the point (x,y).

[[ Math.atan2(90, 15) ]] -> 1.4056476493802699
[[ Math.atan2(15, 90) ]] -> 0.16514867741462683

Math.ceil(x)

Rounds x up to the nearest integer.

[[ Math.ceil(12.7) ]] -> 13
[[ Math.ceil(12.3) ]] -> 13

Math.cos(x)

Returns the cosine of x, which must be expressed in radians.

[[ Math.cos(0) ]] -> 1
[[ Math.cos(1) ]] -> 0.5403023058681398

Math.exp(x)

Returns e raised to the power of x, where e is Euler's number.

[[ Math.exp(0) ]] -> 1
[[ Math.exp(1) ]] -> 2.718281828459045

Math.floor(x)

Rounds x down to the nearest integer.

[[ Math.floor(12.7) ]] -> 12
[[ Math.floor(12.3) ]] -> 12

Math.log(x)

Returns the natural logarithm of x.

[[ Math.log(1) ]] -> 0
[[ Math.log(10) ]] -> 2.302585092994046

Math.max(x, y, ...)

Returns the largest of the numbers in the parentheses.

[[ Math.max(1, 2, 3) ]] -> 3

Math.min(x, y, ...)

Returns the smallest of the numbers in the parentheses.

[[ Math.min(1, 2, 3) ]] -> 1

Math.pow(x, y)

Returns x raised to the power of y.

[[ Math.pow(5, 2) ]] -> 25

Math.random()

Returns a random number between 0 (inclusive) and 1 (exclusive).

[[ Math.random() ]] -> 0.9255151869426522
[[ Math.random() ]] -> 0.313352887182183

tip

Check out the Mozilla Developer Network reference on Math.random() to learn how to generate random numbers within your own specified range.

Math.sin(x)

Returns the sine of x, which must be expressed in radians.

[[ Math.sin(0) ]] -> 0
[[ Math.sin(1) ]] -> 0.8414709848078965

Math.sqrt(x)

Returns the square root of x.

[[ Math.sqrt(25) ]] -> 5

Math.tan(x)

Returns the tangent of x, which must be expressed in radians.

[[ Math.tan(0) ]] -> 0
[[ Math.tan(1) ]] -> 1.5574077246549023

String (text)

To manipulate strings of text, use the functions listed under String in the Insert variable or function menu.

You can use these functions with:

• strings of text inside double or single quotation marks:

  [[ "Hello, world!".toUpperCase() ]]
• variables containing string values:

  [[ GreetingVar.toUpperCase() ]]
• string values returned by other operations and functions:

  [[ "Hello, world!".substr(0,5).toUpperCase() ]]

string.length

Returns the character length of the string, including spaces.

[[ "Hello, world!".length ]] -> 13

string.charAt(index)

Returns the character at the specified index in the string.

[[ "Hello, world!".charAt(7) ]] -> w

string.charCodeAt(index)

Returns the UTF-16 code unit of the character at the specified index in the string.

[[ "Hello, world!".charCodeAt(7) ]] -> 119

string.concat("string", ...)

Adds (concatenates) the string(s) in the parentheses to the string the function is called on.

[[ "Hello".concat(", world!") ]] -> Hello, world!

tip

You can also concatenate strings with the addition operator, +:

[[ "Hello" + ", world!" ]] -> Hello, world!

string.indexOf("searchValue")

Returns the starting index of the first instance of the search value within the string the function is called on. If the search value isn't found, returns -1.

[[ "Hello, world!".indexOf("o") ]] -> 4
[[ "Hello, world!".indexOf("Howdy") ]] -> -1

string.lastIndexOf("searchValue")

Returns the starting index of the last instance of the search value within the string the function is called on. If the search value isn't found, returns -1.

[[ "Hello, world!".lastIndexOf("o") ]] -> 8
[[ "Hello, world!".lastIndexOf("Howdy") ]] -> -1

string.replace("searchValue", "newValue")

Replaces all instances of the search value with the new value.

[[ "Hello, world!".replace("Hello", "Howdy") ]] -> Howdy, world!

string.slice(startIndex, endIndex)

Returns a snippet of the string, starting with the character at the first index and ending with the character just before the second index. You can optionally omit the second index to instead end at the end of the string.

You may provide negative indices to count backwards from the end of the string, as in the third example below.

[[ "Hello, world!".slice(3, 10) ]] -> lo, wor
[[ "Hello, world!".slice(3) ]] -> lo, world!
[[ "Hello, world!".slice(-6, 12) ]] -> world

string.substr(startIndex, length)

Returns a snippet of the string, starting with the character at the starting index and continuing until the specified length is reached. You can optionally omit the length to instead end at the end of the string.

You may provide negative indices to count backwards from the end of the string, as in the third example below.

[[ "Hello, world!".substr(3, 7) ]] -> lo, wor
[[ "Hello, world!".substr(3) ]] -> lo, world!
[[ "Hello, world!".substr(-6, 5) ]] -> world

string.substring(startIndex, endIndex)

Returns a snippet of the string, starting with the character at the first index and ending with the character just before the second index. You can optionally omit the second index to instead end at the end of the string.

[[ "Hello, world!".substring(3, 10) ]] -> lo, wor
[[ "Hello, world!".substring(3) ]] -> lo, world!

info

The substring() method does not support negative indices.

string.toLowerCase()

Converts the string to all lowercase characters.

[[ "Hello, world!".toLowerCase() ]] -> hello, world!

string.toUpperCase()

Converts the string to all uppercase characters.

[[ "Hello, world!".toUpperCase() ]] -> HELLO, WORLD!

string.trim()

Removes all space characters from the beginning and end of the string.

[[ "   Hello, world!   ".trim() ]] -> Hello, world

Widget properties

You can access the properties of widgets, like their location and dimensions, with the options listed under Widget in the Insert variable or function menu.

In order to use these options, you'll need to append them to a widget object with "dot notation": Object.property. There are three widget objects you can use:

• This refers to the widget whose event you're configuring the current action under, such as a button whose Click or Tap event you might be working with.

  [[ This.width ]]

• Target refers to the widget that is the target of the action you're currently configuring, such as the widget being hidden with a Show/Hide action.

  [[ Target.width ]]

• LVAR1 refers to a widget you've stored in a local variable. (Replace "LVAR1" with whatever name you've assigned your local variable.)

  [[ LVAR1.width ]]

widget.x

Returns the x value of the widget's top-left corner.

[[ LVAR1.x ]] -> 100

widget.y

Returns the y value of the widget's top-left corner.

[[ LVAR1.y ]] -> 100

widget.width

Returns the widget's width in pixels.

[[ LVAR1.width ]] -> 300

widget.height

Returns the widget's height in pixels.

[[ LVAR1.height ]] -> 170

widget.scrollX

Returns the number of pixels that a scrollable dynamic panel has been scrolled horizontally.

[[ LVAR1.scrollX ]] -> 50

widget.scrollY

Returns the number of pixels that a scrollable dynamic panel has been scrolled vertically.

[[ LVAR1.scrollY ]] -> 50

widget.text

Returns the widget's text, if any.

[[ LVAR1.text ]] -> first.last@domain.com

widget.name

Returns the widget's name, if you've given it one.

[[ LVAR1.name ]] -> Email Field

widget.top

Returns the y value of the widget's top edge.

[[ LVAR1.top ]] -> 100

widget.left

Returns the x value of the widget's left edge.

[[ LVAR1.left ]] -> 100

widget.right

Returns the x value of the widget's right edge.

[[ LVAR1.right ]] -> 400

widget.bottom

Returns the y value of the widget's bottom edge.

[[ LVAR1.bottom ]] -> 270

widget.opacity

Returns the widget's opacity as a number between 0 and 100.

[[ LVAR1.opacity ]] -> 85

widget.rotation

Returns the widget's rotation as a number between 0 and 359.

[[ LVAR1.rotation ]] -> 90

Page, window, and cursor

PageName

Returns the name of the current page, as shown in the Pages pane.

[[ PageName ]] -> Login Page

Window.width

Returns the width of the browser window's viewport in pixels.

[[ Window.width ]] -> 1920

Window.height

Returns the height of the browser window's viewport in pixels.

[[ Window.height ]] -> 948

Window.scrollX

Returns the number of pixels that the browser window has been scrolled horizontally.

[[ Window.scrollX ]] -> 100

Window.scrollY

Returns the number of pixels that the browser window has been scrolled vertically.

[[ Window.scrollY ]] -> 100

Cursor.x

Returns the x value of the cursor's position on the page.

[[ Cursor.x ]] -> 100

Cursor.y

Returns the y value of the cursor's position on the page.

[[ Cursor.y ]] -> 100

DragX

Returns the pixel difference between the cursor's previous and current position along the X axis as you're dragging a dynamic panel widget. The value is positive when you're dragging to the right and negative when you're dragging to the left.

[[ DragX ]] -> 3
[[ DragX ]] -> -5

DragY

Returns the pixel difference between the cursor's previous and current position along the Y axis as you're dragging a dynamic panel widget. The value is positive when you're dragging down and negative when you're dragging up.

[[ DragY ]] -> 3
[[ DragY ]] -> -5

TotalDragX

Returns the pixel difference between the cursor's starting position and its current position along the X axis as you're dragging a dynamic panel widget. The value is positive when you're dragging to the right and negative when you're dragging to the left.

[[ TotalDragX ]] -> 30
[[ TotalDragX ]] -> -50

TotalDragY

Returns the pixel difference between the cursor's starting position and its current position along the Y axis as you're dragging a dynamic panel widget. The value is positive when you're dragging down and negative when you're dragging up.

[[ TotalDragY ]] -> 30
[[ TotalDragY ]] -> -50

DragTime

Returns the total time in milliseconds that a draggable dynamic panel has been dragged from drag start to drag drop.

[[ DragTime ]] -> 1525

info

Though DragTime tracks the duration of the entire drag, the return value is only updated when the cursor moves during the drag.

Date and time

Use the functions listed under Date in the Insert variable or function menu to produce and manipulate date and time information.

You can use these functions with the following date objects:

• Now
• GenDate
• Date.UTC()
• Date.parse()

Now

A date object representing the current date and time. When used by itself, returns the current date and time, fully articulated and with the web browser's time zone.

[[ Now ]] -> Wed Nov 14 2018 16:20:24 GMT-0800 (Pacific Standard Time)

GenDate

A date object representing the date and time that the prototype's HTML was last generated. When used by itself, returns the generation date and time, fully articulated and with the web browser's time zone.

[[ GenDate ]] -> Wed Nov 14 2018 16:20:24 GMT-0800 (Pacific Standard Time)

Now.getDate() and Now.getUTCDate()

Returns a number representing the given date object's day of the month, either in the web browser's time zone or Coordinated Universal Time (UTC).

[[ Now.getDate() ]] -> 14
[[ Now.getUTCDate() ]] -> 15

Now.getDay() and Now.getUTCDay()

Returns a number representing the given date object's day of the week, either in the web browser's time zone or Coordinated Universal Time (UTC). Sunday is 0, and Saturday is 6.

[[ Now.getDay() ]] -> 3
[[ Now.getUTCDay() ]] -> 4

Now.getDayOfWeek()

Returns the name of the given date object's day of the week.

[[ Now.getDayOfWeek() ]] -> Wednesday

Now.getFullYear() and Now.getUTCFullYear()

Returns the given date object's year in four-digit format, either in the web browser's time zone or Coordinated Universal Time (UTC).

[[ Now.getFullYear() ]] -> 2018
[[ Now.getUTCFullYear() ]] -> 2018

Now.getHours() and Now.getUTCHours()

Returns the hours portion of the given date object's time as a number between 0 and 23 (24 hour/military format), either in the web browser's time zone or Coordinated Universal Time (UTC).

[[ Now.getHours() ]] -> 16
[[ Now.getUTCHours() ]] -> 0

Now.getMilliseconds() and Now.getUTCMilliseconds()

Returns the milliseconds portion of the given date object's time, either in the web browser's time zone or Coordinated Universal Time (UTC).

[[ Now.getMilliseconds() ]] -> 838
[[ Now.getUTCMilliseconds() ]] -> 838

Now.getMinutes() and Now.getUTCMinutes()

Returns the minutes portion of the given date object's time, either in the web browser's time zone or Coordinated Universal Time (UTC).

[[ Now.getMinutes() ]] -> 20
[[ Now.getUTCMinutes() ]] -> 20

Now.getMonth() and Now.getUTCMonth()

Now.getMonth() returns the given date object's month as a number between 1 and 12 in the web browser's time zone.

Now.getUTCMonth() returns the given date object's month as a number between 0 and 11 in Coordinated Universal Time (UTC).

[[ Now.getMonth() ]] -> 11
[[ Now.getUTCMonth() ]] -> 10

Now.getMonthName()

Returns the name of the given date object's month.

[[ Now.getMonthName() ]] -> November

Now.getSeconds() and Now.getUTCSeconds()

Returns the seconds portion of the given date object's time, either in the web browser's time zone or Coordinated Universal Time (UTC).

[[ Now.getSeconds() ]] -> 24
[[ Now.getUTCSeconds() ]] -> 24

Now.getTime()

Returns the milliseconds elapsed between 1 January 1970 00:00:00 UTC and the given date object.

[[ Now.getTime() ]] -> 1542235968871

Now.getTimezoneOffset()

Returns the time zone difference, in minutes, from the web browser's locale to Coordinated Universal Time (UTC).

[[ Now.getTimezoneOffset() ]] -> 480

Date.parse(dateString)

Parses a given string representation of a date and creates a new date object. Returns the milliseconds elapsed between 1 January 1970 00:00:00 UTC and the given date.

The date string may be in a number of formats, including those returned by Now and GenDate.

[[ Date.parse(Now) ]] -> 1542236704000
[[ Date.parse("2018-11-14") ]] -> 1542153600000
[[ Date.parse("Jun 28, 1969") ]] -> -16131600000

Now.toDateString()

Returns a simplified version of the date object, including only the day of the week, the month, the date, and the year.

[[ Now.toDateString() ]] -> Wed Nov 14 2018

Now.toISOString()

Returns the date object in simplified extended ISO format in Coordinated Universal Time (UTC).

[[ Now.toISOString() ]] -> 2018-11-15T00:31:33.666Z

Now.toLocaleDateString()

Returns a language- and region-sensitive version of the date portion of a date object, based on the web browser's settings. You can manually set the locale by including a BCP 47 language tag string in the parentheses.

[[ Now.toLocaleDateString() ]] -> 11/15/2018
[[ Now.toLocaleDateString("en-GB") ]] -> 15/11/2018
[[ Now.toLocaleDateString("ar-EG") ]] -> ١٥‏/١١‏/٢٠١٨

Now.toLocaleTimeString()

Returns a language- and region-sensitive version of the time portion of a date object, based on the web browser's settings. You can manually set the locale by including a BCP 47 language tag string in the parentheses.

[[ Now.toLocaleTimeString() ]] -> 5:00:06 PM
[[ Now.toLocaleTimeString("en-GB") ]] -> 17:00:06
[[ Now.toLocaleTimeString("ar-EG") ]] -> ١٢:٢٩:٠٢ م

Now.toLocaleString()

Returns a language- and region-sensitive version of the date object, based on the web browser's settings. You can manually set the locale by including a BCP 47 language tag string in the parentheses.

[[ Now.toLocaleString() ]] -> 11/15/2018, 5:00:06 PM
[[ Now.toLocaleString("en-GB") ]] -> 15/11/2018, 17:00:06
[[ Now.toLocaleString("ar-EG") ]] -> ١٥‏/١١‏/٢٠١٨ ١٢:٣٥:٠٧ م

Now.toTimeString()

Returns the time portion of the date object, fully articulated and with the web browser's time zone.

[[ Now.toTimeString() ]] -> 17:00:06 GMT-0800 (Pacific Standard Time)

Now.toUTCString()

Returns a shortened version of the date object in Coordinated Universal Time (UTC).

[[ Now.toUTCString() ]] -> Thu, 15 Nov 2018 01:00:06 GMT

Date.UTC(year,month,day,hour,min,sec,millisec)

Constructs a new date object in Coordinated Universal Time (UTC) and returns the milliseconds elapsed between the date and 1 January 1970 00:00:00 UTC. The parameters must be in the following formats:

• year (required): Four digits
• month (required): An integer between 0 (January) and 11 (December)
• day: An integer between 1 and 31. If omitted, defaults to 1
• hour: An integer between 0 and 23. If omitted, defaults to 0
• minute: An integer between 0 and 59. If omitted, defaults to 0
• second: An integer between 0 and 59. If omitted, defaults to 0
• millisecond: An integer between 0 and 999. If omitted, defaults to 0

[[ Date.UTC(1969, 5, 28, 1, 20) ]] -> -16152000000

Now.addYears(years)

Adds the specified number of years to the date object and returns the new date and time, fully articulated and with the web browser's time zone.

[[ Now.addYears(3) ]] -> Mon Nov 15 2021 13:00:34 GMT-0800 (Pacific Standard Time)

Now.addMonths(months)

Adds the specified number of months to the date object and returns the new date and time, fully articulated and with the web browser's time zone.

[[ Now.addMonths(3) ]] -> Fri Feb 15 2019 13:00:34 GMT-0800 (Pacific Standard Time)

Now.addDays(days)

Adds the specified number of days to the date object and returns the new date and time, fully articulated and with the web browser's time zone.

[[ Now.addDays(3) ]] -> Sun Nov 18 2018 13:00:34 GMT-0800 (Pacific Standard Time)

Now.addHours(hours)

Adds the specified number of hours to the date object and returns the new date and time, fully articulated and with the web browser's time zone.

[[ Now.addHours(3) ]] -> Thu Nov 15 2018 16:00:34 GMT-0800 (Pacific Standard Time)

Now.addMinutes(minutes)

Adds the specified number of minutes to the date object and returns the new date and time, fully articulated and with the web browser's time zone.

[[ Now.addMinutes(3) ]] -> Thu Nov 15 2018 13:03:34 GMT-0800 (Pacific Standard Time)

Now.addSeconds(seconds)

Adds the specified number of seconds to the date object and returns the new date and time, fully articulated and with the web browser's time zone.

[[ Now.addSeconds(3) ]] -> Thu Nov 15 2018 13:00:37 GMT-0800 (Pacific Standard Time)

Now.addMilliseconds(milliseconds)

Adds the specified number of milliseconds to the date object and returns the new date and time, fully articulated and with the web browser's time zone.

[[ Now.addMilliseconds(3) ]] -> Thu Nov 15 2018 13:00:37 GMT-0800 (Pacific Standard Time)

Boolean

The boolean operators are used to write comparison expressions that evaluate to either true or false. Comparison expressions are used for things like repeater filtering, updating and marking repeater rows, and writing complex conditional logic.

Equals: ==

[[ 5 + 2 == 7 ]] -> true

Does not equal: !=

[[ 5 + 2 != 8 ]] -> true

Less than: <

[[ 5 + 2 < 4 + 3 ]] -> false

Less than or equals: <=

[[ 5 + 2 <= 4 + 3 ]] -> true

Greater than: >

[[ 5 + 2 > 4 + 3 ]] -> false

Greater than or equals: >=

[[ 5 + 2 >= 4 + 2 ]] -> true

The next operators, the and and or operators, are used to combine two or more comparison expressions. Expressions using and will evaluate to true when all combined comparisons evaluate to true, and expressions using or will evaluate to true when any one comparison evaluates to true.

And: &&

[[ 5 + 2 == 7 && 4 + 3 == 7 ]] -> true
[[ 5 + 2 == 7 && 4 + 3 == 8 ]] -> false

Or: ||

[[ 5 + 2 == 7 || 4 + 3 == 8 ]] -> true
[[ 5 + 2 == 8 || 4 + 3 == 8 ]] -> false