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: TYPEfunction(argument1: TYPE, argument2: TYPE)
→ result: TYPEfunction(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)
TEXTCombine two separate texts into one.
Example:concat("hello", "world")"helloworld"
indexOf(source: TEXT, searchValue: TEXT)
NUMBERFind 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)
NUMBERCount 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)
TEXTConvert any text from uppercase to lowercase
Example:lowerCase("Hello")"hello"
upperCase(source: TEXT)
TEXTConvert any text from lowercase to UPPERCASE.
Example:upperCase("Hello")"HELLO"
left(source: TEXT, count: NUMBER)
TEXTExtract 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)
TEXTExtract 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)
TEXTLeft-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)
TEXTRight-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)
TEXTRepeat a text a specific number of times.
Example:repeat("hello", 2)"hellohello"
Example:repeat("hello", 3)"hellohellohello"
replace(source: TEXT, from: TEXT, to: TEXT)
TEXTReplace 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)
TEXTRemove whitespaces on both sides of a text.
Example:trim(" helloworld ")"helloworld"
Example:trim(" helloworld ")"helloworld"
ltrim(source: TEXT)
TEXTRemove whitespace from the left side of a text.
Example:ltrim(" helloworld ")"helloworld "
rtrim(source: TEXT)
TEXTRemove whitespace from the right side of a text.
Example:rtrim(" helloworld ")" helloworld"
Math
pow(source: NUMBER, exponent: NUMBER)
NUMBERCalculate the result of the first number raised to the power of the second number.
Example:pow(2, 3)8
sqrt(source: NUMBER)
NUMBERCalculate 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)
NUMBERExtract the smallest of two numbers.
Example:min(0, 1)0
max(source1: NUMBER, source2: NUMBER)
NUMBERExtract the largest of two numbers.
Example:max(0, 1)1
abs(value: NUMBER)
NUMBERReturn 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)
NUMBERCheck 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)
NUMBERReturn the rounded value of a number.
Example:round(3.49)3
Example:round(1.5)2
Example:round(6.79)7
floor(source: NUMBER)
NUMBERReturn the nearest whole number down.
Example:floor(1.5)1
Example:floor(2.99)2
ceil(source: NUMBER)
NUMBERReturn the nearest whole number up.
Example:ceil(1.5)2
Example:ceil(4.3)5
random()
NUMBERa random decimal number between 0 and 1
Example:random()a random decimal number between 0 and 1
random(min: NUMBER, max: NUMBER)
NUMBERReturn 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)
NUMBERReturn a whole number randomly between two given numbers.
Example:randomInt(1, 5)a random whole number between 1 and 5
radians(degrees: NUMBER)
NUMBERConvert degrees to radians.
Example:radians(180)3.14 = π
Example:radians(90)1.57 = π / 2
degrees(radians: NUMBER)
NUMBERConvert radians to degrees.
Example:degrees($pi)180
Example:degrees($pi / 2)90
sin(radian: NUMBER)
NUMBERCalculate the sine of a number in radians.
Example:sin($pi / 2)1
Example:sin($pi / 6)0.5
cos(radian: NUMBER)
NUMBERCalculate the cosine of a number in radians.
Example:cos(0)1
Example:cos($pi / 2)0
tan(radian: NUMBER)
NUMBERCalculate the tangent of a number in radians.
Example:tan($pi / 4)1
Example:tan(0)0
asin(x: NUMBER)
NUMBERCalculate the arcsine (in radians) of x.
Example:asin(1)1.57 = π / 2
Example:asin(0.5)0.52 = π / 6
acos(x: NUMBER)
NUMBERCalculate the arccosine (in radians) of x.
Example:acos(1)0
Example:acos(0)1.57 = π / 2
atan(x: NUMBER)
NUMBERCalculate the arctangent (in radians) of x.
Example:atan(1)0.79 = π / 4
Example:atan(0)0
atan2(x: NUMBER, y: NUMBER)
NUMBERCalculate 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)
COLORReturn 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)
NUMBERReturn the red RGB parameter of a hex color code.
Example:red(#FF0000)255
Example:red(#008000)0
Example:red(#0000FF)0
green(source: COLOR)
NUMBERReturn the green RGB parameter of a hex color code.
Example:green(#FF0000)0
Example:green(#008000)128
Example:green(#0000FF)0
blue(source: COLOR)
NUMBERReturn 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)
NUMBERConvert 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)
TEXTConvert 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)
TEXTConvert 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)
COLORConvert 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)
LAYERRefer to a layer.
- Use this as part of a formula or a different function.
layer(source: TEXT).property
TEXT or NUMBERRefer 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)
LAYERRefer to the parent layer, e.g., a container or component.
- Use this as part of a formula or a different function.
parent(layerName: LAYER).property
TEXT or NUMBERRefer 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 NUMBERReturn 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)
NUMBERConvert 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)
NUMBERConvert 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)
NUMBERConvert 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)
NUMBERConvert 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`.