MenuToggle Menu

Functions

Functions are predefined formulas that perform a specific task. Functions usually "take in" some data as input, process it, and "return" a result.

Examples of what tasks could be:

  • Calculating how many characters a text contains.
  • Searching a specific word in a text.
  • Determining which number is the smallest of two numbers.

Functions usually have the following structures:

  • function(argument: TYPE) → result: TYPE
  • function(argument1: TYPE, argument2: TYPE) → result: TYPE
  • function(argument1: TYPE, argument2: TYPE, argument3: TYPE) → result: TYPE

Functions usually take in one or multiple arguments (data) as input—the values a function uses to perform a task. Arguments, as well as the result, are values that are always of a specific type. A type could be a text, number, or color.

There are various categories to choose from.

Text

  • concat(source1: TEXT, source2: TEXT)TEXT

    Combine two separate texts into one.

    • Example:concat("hello", "world")"helloworld"
  • indexOf(source: TEXT, searchValue: TEXT)NUMBER

    Find the starting position of a keyword in a text. If the keyword isn't present in the text, the returned value is -1.

    • Example:indexOf("hello world", "world")6
    • Example:indexOf("hello world", "hello")0
    • Example:indexOf("hello world", "goodbye")-1
    • Use indexOf for use cases like email validation. See use case example.
  • length(source: TEXT)NUMBER

    Count the number of characters in a text.

    • Example:length("hello")5
    • Example:length("helloworld")10
    • Example:length("hello world")11
    • Use length for use cases like password validation. See use case example.
  • lowerCase(source: TEXT)TEXT

    Convert any text from uppercase to lowercase

    • Example:lowerCase("Hello")"hello"
  • upperCase(source: TEXT)TEXT

    Convert any text from lowercase to UPPERCASE.

    • Example:upperCase("Hello")"HELLO"
  • left(source: TEXT, count: NUMBER)TEXT

    Extract a part of a text from the left side based on a specific number of characters.

    • Example:left("hello", 3)"hel"
  • right(source: TEXT, count: NUMBER)TEXT

    Extract a part of a text from the right side based on a specific number of characters.

    • Example:right("hello", 2)"lo"
  • lpad(source: TEXT, length: NUMBER, pad: TEXT)TEXT

    Left-pad a text with another text, to a specific length.

    • Example:lpad("5", 2, "0")"05"
    • Example:lpad("5", 4, "0")"0005"
  • rpad(source: TEXT, length: NUMBER, pad: TEXT)TEXT

    Right-pad a text with another text, to a specific length.

    • Example:rpad("5", 2, "1")"51"
    • Example:rpad("5", 6, "1")"511111"
  • repeat(source: TEXT, count: NUMBER)TEXT

    Repeat a text a specific number of times.

    • Example:repeat("hello", 2)"hellohello"
    • Example:repeat("hello", 3)"hellohellohello"
  • replace(source: TEXT, from: TEXT, to: TEXT)TEXT

    Replace a part of a text with another text.

    • Example:replace("helloworld", "world", "protopie")"helloprotopie"
    • Example:replace("goodbye, John", "goodbye", "thank you")"thank you, John"
  • trim(source: TEXT)TEXT

    Remove whitespaces on both sides of a text.

    • Example:trim(" helloworld ")"helloworld"
    • Example:trim(" helloworld ")"helloworld"
  • ltrim(source: TEXT)TEXT

    Remove whitespace from the left side of a text.

    • Example:ltrim(" helloworld ")"helloworld "
  • rtrim(source: TEXT)TEXT

    Remove whitespace from the right side of a text.

    • Example:rtrim(" helloworld ")" helloworld"

Math

  • pow(source: NUMBER, exponent: NUMBER)NUMBER

    Calculate the result of the first number raised to the power of the second number.

    • Example:pow(2, 3)8
  • sqrt(source: NUMBER)NUMBER

    Calculate the square root of a number. This doesn't work for negative numbers.

    • Example:sqrt(9)3
    • Example:sqrt(2)1.41
  • min(source1: NUMBER, source2: NUMBER)NUMBER

    Extract the smallest of two numbers.

    • Example:min(0, 1)0
  • max(source1: NUMBER, source2: NUMBER)NUMBER

    Extract the largest of two numbers.

    • Example:max(0, 1)1
  • abs(value: NUMBER)NUMBER

    Return the absolute value of a number. In practice, this comes down to removing the negative sign in front of a number.

    • Example:abs(-1)1
    • Example:abs(5 - 25)20
  • sign(value: NUMBER)NUMBER

    Check if a number is positive or negative. Return 1 if a number is positive. Return -1 if a number is negative. Return 0 if a number is 0.

    • Example:sign(5)1
    • Example:sign(-10)-1
    • Example:sign(0)0
  • round(source: NUMBER)NUMBER

    Return the rounded value of a number.

    • Example:round(3.49)3
    • Example:round(1.5)2
    • Example:round(6.79)7
  • floor(source: NUMBER)NUMBER

    Return the nearest whole number down.

    • Example:floor(1.5)1
    • Example:floor(2.99)2
  • ceil(source: NUMBER)NUMBER

    Return the nearest whole number up.

    • Example:ceil(1.5)2
    • Example:ceil(4.3)5
  • random()NUMBER

    a random decimal number between 0 and 1

    • Example:random()a random decimal number between 0 and 1
  • random(min: NUMBER, max: NUMBER)NUMBER

    Return a decimal number randomly between two given numbers.

    • Example:random(1, 5)a random decimal number between 1 and 5
  • randomInt(min: NUMBER, max: NUMBER)NUMBER

    Return a whole number randomly between two given numbers.

    • Example:randomInt(1, 5)a random whole number between 1 and 5
  • radians(degrees: NUMBER)NUMBER

    Convert degrees to radians.

    • Example:radians(180)3.14 = π
    • Example:radians(90)1.57 = π / 2
  • degrees(radians: NUMBER)NUMBER

    Convert radians to degrees.

    • Example:degrees($pi)180
    • Example:degrees($pi / 2)90
  • sin(radian: NUMBER)NUMBER

    Calculate the sine of a number in radians.

    • Example:sin($pi / 2)1
    • Example:sin($pi / 6)0.5
  • cos(radian: NUMBER)NUMBER

    Calculate the cosine of a number in radians.

    • Example:cos(0)1
    • Example:cos($pi / 2)0
  • tan(radian: NUMBER)NUMBER

    Calculate the tangent of a number in radians.

    • Example:tan($pi / 4)1
    • Example:tan(0)0
  • asin(x: NUMBER)NUMBER

    Calculate the arcsine (in radians) of x.

    • Example:asin(1)1.57 = π / 2
    • Example:asin(0.5)0.52 = π / 6
  • acos(x: NUMBER)NUMBER

    Calculate the arccosine (in radians) of x.

    • Example:acos(1)0
    • Example:acos(0)1.57 = π / 2
  • atan(x: NUMBER)NUMBER

    Calculate the arctangent (in radians) of x.

    • Example:atan(1)0.79 = π / 4
    • Example:atan(0)0
  • atan2(x: NUMBER, y: NUMBER)NUMBER

    Calculate the arctangent (in radians) of x and y, also known as the angle in the Euclidean plane.

    • Example:atan2(1, 0)1.57 = π / 2
    • Example:atan2(1, 1)0.79 = π / 4

Color

  • color(red: NUMBER, green: NUMBER, blue: NUMBER)COLOR

    Return a color value (hex color code) based on an RGB value.

    • Example:color(255, 255, 255)#FFFFFF
    • Example:color(255, 102, 97)#FF6661
  • red(source: COLOR)NUMBER

    Return the red RGB parameter of a hex color code.

    • Example:red(#FF0000)255
    • Example:red(#008000)0
    • Example:red(#0000FF)0
  • green(source: COLOR)NUMBER

    Return the green RGB parameter of a hex color code.

    • Example:green(#FF0000)0
    • Example:green(#008000)128
    • Example:green(#0000FF)0
  • blue(source: COLOR)NUMBER

    Return the blue RGB parameter of a hex color code.

    • Example:blue(#FF0000)0
    • Example:blue(#008000)0
    • Example:blue(#0000FF)255

Type Conversion

  • number(source: TEXT)NUMBER

    Convert a text to a number. This doesn't work if the text cannot be converted to a number.

    • Example:number("1234")1234
    • Example:number("94.27")94.27
  • text(source: NUMBER)TEXT

    Convert a number to a text.

    • Example:text(1234)"1234"
    • Example:text(94.27)"94.27"
    • Example:text(1 + 3)"4"
  • format(source: NUMBER, format: TEXT)TEXT

    Convert a number to a text with a certain format. # is a placeholder for whole numbers whereas 0 represents the fractional part.

    • Example:format(1234.567, "#")"1235"
    • Example:format(1234.567, "#,###")"1,235"
    • Example:format(1234.567, "#.###,00")"1.234,57"
    • Example:format(1234.567, "#,##.00")"12,34.57"
    • Example:format(1234.567, "#,###.00")"1,234,57"
  • color(source: TEXT)COLOR

    Convert a text to a color value (hex color code). This doesn't work if the text doesn't have a hex color code structure.

    • Example:color("#FFFFFF")#FFFFFF

Layers

  • layer(source: TEXT)LAYER

    Refer to a layer.

    • Use this as part of a formula or a different function.
  • layer(source: TEXT).propertyTEXT or NUMBER

    Refer to a layer's property. Learn more about layer properties.

    • Example:layer("Rectangle 1").xx-coordinate of the layer called Rectangle 1
    • Example:layer("Oval 1").opacityOpacity of the layer called Oval 1
    • Example:layer("Input 1").textText in the input layer called Input 1
  • parent(layerName: LAYER)LAYER

    Refer to the parent layer, e.g., a container or component.

    • Use this as part of a formula or a different function.
  • parent(layerName: LAYER).propertyTEXT or NUMBER

    Refer to the parent layer's property. Learn more about layer properties.

    • Example:parent(`Rectangle 1`).xx-coordinate of Rectangle 1 its parent layer
    • Example:parent(`Oval 1`).opacityOpacity of Oval 1 its parent layer
  • initial(layerName: LAYER, layerProperty: TEXT)TEXT or NUMBER

    Return the initial value (before any interactions) of a specific layer property. Learn more about layer properties.

    • Example:initial(`Rectangle 1`, "x")Initial x-coordinate of Rectangle 1
    • Example:initial(`Oval 1`, "opacity")Initial opacity of Oval 1
    • Example:initial(`Input 1`, "text")Initial text in Input 1

Relative Coordinates

  • toLayerX(containerName: LAYER, x: NUMBER, y: NUMBER)NUMBER

    Convert a x coordinate relative to the screen into the corresponding x coordinate relative to a container or component. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

    • For example, if you want to get the x coordinate relative to a container `Container 1` based on the position (100, 200) relative to the screen, use the following function:
    • toLayerX(`Container 1`, 100, 200)returns the x coordinate relative to `Container 1` based on the x coordinate `100` relative to the screen.
  • toLayerY(containerName: LAYER, x: NUMBER, y: NUMBER)NUMBER

    Convert a y coordinate relative to the screen into the corresponding y coordinate relative to a container or component. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

    • For example, if you want to get the y coordinate relative to a container `Container 1` based on the position (100, 200) relative to the screen, use the following function:
    • toLayerY(`Container 1`, 100, 200)returns the y coordinate relative to `Container 1` based on the y coordinate `200` relative to the screen.
  • toScreenX(containerName: LAYER, x: NUMBER, y: NUMBER)NUMBER

    Convert a x coordinate relative to a container or component into the corresponding x coordinate relative to the screen. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

    • For example, if you want to get the x coordinate relative to the screen based on the position (10, 20) relative to a container `Container 1` , use the following function:
    • toScreenX(`Container 1`, 10, 20)returns the x coordinate relative to the screen based on the x coordinate `10` relative to `Container 1`.
  • toScreenY(containerName: LAYER, x: NUMBER, y: NUMBER)NUMBER

    Convert a y coordinate relative to a container or component into the corresponding y coordinate relative to the screen. The coordinates of layers inside a container or component are by default relative to the container or component they are in.

    • For example, if you want to get the y coordinate relative to the screen based on the position (10, 20) relative to a container `Container 1`, use the following function:
    • toScreenY(`Container 1`, 10, 20)returns the y coordinate relative to the screen based on the y coordinate `20` relative to `Container 1`.
Back To Top