Transform Functions
Draftbit comes with built-in transform utility functions to transform data and represent the value in a specific way. These built-in functions work on components like Text and Set Variable actions on Touchable or Button Components or use them to conditionally display a component.
Transform Functions appear when a value is provided with a dropdown menu.
Once the {{variable}} is defined and its value selected from the dropdown menu under Variables, you can transform the value by selecting a function from the dropdown menu next to transform with option.
Below is a summary of built-in transform functions that are available in Draftbit.
Transform glossary
| Transform type | Function | Before transform | After transform |
|---|---|---|---|
| ParseInt | Parses a string and returns an integer. | eg: "29.99" | 29 |
| ParseFloat | Parses a string and returns a floating-point number. | eg: " 29.99 " | 29.99 |
| RoundUp | Rounds a numerical value up to the next largest integer. | eg: 29.99 | 30 |
| RoundDown | Rounds a numerical value down to the largest integer less than or equal to a given number. | eg: 29.99 | 29 |
| Length | Calculates the number of elements in a value and then display that number. | eg: ["coffee", "jar", "cup"] | 3 |
| Negate | Functionr that takes a truthy value and changes it to falsity and vice versa. | eg: true | false |
| ParseBoolean | Function that takes a string value. If it's "false", evaluates to false otherwise evaluates to true. | eg: "false"eg: "true"eg: trueeg: false | falsetruetruefalse |
| AddBearerPrefix | A function returns the token with the prefix Bearer such that it can be set as the value to the Authorization header. | eg: token | Bearer token |
| JsonStringify | A function that converts a JavaScript object or value to a JSON string. | eg: {"count": 42} | {"count": 42} |
| ParseJsonString | A function that converts a JSON string to a JavaScript object. | eg: {"age":30} | {age: 30} |
| ToUpperCase | A function that converts a string to uppercase letters. | eg: "String" | "STRING" |
| ToLowerCase | A function that converts a string to lowercase letters. | eg: "String" | "string" |
| ToString | A function that converts a number to a string. | eg: 15 | "15" |
| Increment | A function that increments the number by one. | eg: 1 | 2 |
| Decrement | A function that decrements the number by one. | eg: 1 | 0 |
| EqualTo | A function that checks if two values are equal. | 1 and 1 or "foo" and "bar" | Returns true or false |
| NotEqualTo | A function that checks if two values are unequal. | 1 and 1 or "foo" and "bar" | Returns true or false |
| LessThan | A function that checks if the first value is less than the second value. | 1 and 10 | Returns true or false |
| GreaterThan | A function that checks if the first value is greater than the second value. | 1 and 10 | Returns true or false |
| LessThanOrEqualTo | A function that checks if the first value is less than or equal to the second value. | 1 and 10 | Returns true or false |
| GreaterThanOrEqualTo | A function that checks if the first value is greater than or equal to the second value. | 1 and 10 | Returns true or false |
| ArrayAppend | A Function that transform an array by adding the given value as the last item in the array. | ['22,'33'] and ['11'] | ['22,'33','11'] |
| ArrayPrepend | A Function that transform an array by adding the given value as the first item in the array. | ['22,'33'] and ['11'] | ['11','22,'33'] |
| ArrayConcat | A function that transform an array but adding the items from a second array to the end of the first array. | ['apple' , 'orange]and ['mango'] | ['apple', 'orange', 'mango'] |
| LogToConsole | A function that logs the value of variable to console. |
ParseInt
The ParseInt function parses a string and returns an integer.
In the example below, the value is "29.99" which is a string. It gets converted to a number. ParseInt also parses the string value to an integer also if the string value is in decimal number format.
ParseFloat
The ParseFloat function parses a string and returns a floating-point number.
In the example below, the value is a string: " 29.99 ". The value also has extra spaces at the start and at the end of it. These spaces are trimmed when value is then transformed with ParseFloat to a floating point number.
Another example is when transforming a number with scientific notations. In the example below, the variable has a value of "314e-2". It is transformed into a decimal number 3.14.
RoundUp
The RoundUp function always rounds a numerical value up to the next largest integer.
In the example below, the value is 29.99. Using RoundUp, it is then changed to 30.
RoundDown
The RoundDown function always rounds a numerical value down to the largest integer less than or equal to a given number.
In the example below, the value is 29.99. Using RoundDown, it is then changed to 29.
Length
The Length function is used to calculate the number of elements in a value and then display that number.
In the example below, an array with three items is provided as the value. Using the Length function its the number of items is displayed.
Negate
The Negate function takes truthy value and changes it to falsity and vice versa.
ParseBoolean
The ParseBoolean function takes a string value. If it's "false", evaluates to false otherwise evaluates to true.
An example would be conditionally displaying a View component with the help of App Variables
In the example below, a Popover component is displayed conditionally when a Button is pressed on the screen.
The Popover component you see above is custom and is created using View, BlurView, Text, and Touchable components.
To create a custom Popover component you will need a Global Variable (App Variable) that has a key (to refer in the app on Button or Touchable components) and a default value of false.
There is a single Button Outline component on the screen.
In the Properties panel, go to the Interactions tab on the Button Outline component. Add an action Set Variable on the Button Outline component, and then set the value of the Global Variable to "true".
Next, on the parent View of the Popover component, go to the Data tab in the Properties panel, and under Conditional Display, select the Global Variable as value.
Then, for the property transform with, select the ParseBoolean function.
Pressing the Button Outline component will trigger the Global Variable value to true and display the Popover component.
Similarly, you can use the Touchable component in the Popover component Layout tree and add the cancellation behavior by setting the value of Global Variable to "false".
On the Touchable component, go to the Interactions tab, add the action Set Variable, and set its value to "false".
Now, press the "Cancel" button to hide the Popover component.
AddBearerPrefix
The transform function AddBearerPrefix returns the token with the prefix Bearer such that it can be set as the value to the Authorization header.
Bearer authentication (also called token authentication) is an HTTP authentication scheme that involves security tokens called bearer tokens. The bearer token is a cryptic string, usually generated by the server in response to a login request. The client must send this token in the Authorization header when making requests to protected resources. In a Draftbit app, the Authorization header is set using a App Variables
Syntax of Authorization header:
Authorization: Bearer <token>
JsonStringify
The transform function JsonStringify converts a JavaScript object or value to a JSON string.
ParseJsonString
A function that converts a JSON string to a JavaScript object. For example, the JSON string coming from a server: {"age": 30} is transformed to {age: 30}.
ToUpperCase
The transform function converts a string to uppercase letters.
In the example below, the value is "This is a string." which is a string. It gets converted to an uppercase THIS IS A STRING when transformed with the ToUpperCase function.
ToLowerCase
The transform function converts a string to lowercase letters.
In the example below, the value is "This is a string." which is a string. It gets converted to an uppercase this is a strong when transformed with the ToLowerCase function.
ToString
The function that converts a number to a string.
In the example below, the variable value is assigned a number value. Using the transform function ToString, it gets converted to a string.
Increment
The transform function increments the current number by 1.
In the example below, the variable has an initial value of 0. When the Increment function is used, it increments by one.
Decrement
The transform function decrements the current number by 1.
In the example below, the variable has an initial value of 1. When the Decrement function is used, it reduces by one.
Multiple Transforms
Previously you were able to apply a single transform to a value passed into certain components, but now you can chain these transforms together. This includes both the built-in transforms and your own transform functions.
Custom Transform Functions
You can also use any Custom Function as a Transform Function by selecting it from the transform function dropdown.
If your function accepts more than one argument, you will have additional inputs to pass those values. The first value selected will always be passed as the first argument to the function.
Check the tutorial below.
Additional Resources
Updated 4 months ago