# 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
```

*x*)

Math.abs(Returns the absolute value of x.

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

*x*)

Math.acos(Returns the arccosine of x in radians.

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

*x*)

Math.asin(Returns the arcsine of x in radians.

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

*x*)

Math.atan(Returns the arctangent of x in radians.

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

*y*, *x*)

Math.atan2(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
```

*x*)

Math.ceil(Rounds x up to the nearest integer.

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

*x*)

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

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

*x*)

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

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

*x*)

Math.floor(Rounds x down to the nearest integer.

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

*x*)

Math.log(Returns the natural logarithm of x.

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

*x*, *y*, ...)

Math.max(Returns the largest of the numbers in the parentheses.

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

*x*, *y*, ...)

Math.min(Returns the smallest of the numbers in the parentheses.

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

*x*, *y*)

Math.pow(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
```

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

*x*)

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

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

*x*)

Math.sqrt(Returns the square root of x.

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

*x*)

Math.tan(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 (**concat**enates) the string(s) in the parentheses to the string the function is called on.

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

TipYou 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!
```

NoteThe

`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
```

NoteThough

`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

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
```