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 Global 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.Transform Functions appear when a value is provided with a dropdown menu.

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: true
eg: false

false
true
true
false

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

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 Global 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 Global 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 Global 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 Global Variable.

Syntax of Authorization header:

Authorization: Bearer <token>

Custom Transform Functions

Custom Functions allow you to parse data variables coming from an API. You can create your own Custom Transform Functions that accept a text as a prop and parses the text into a different format.

Check the tutorial below.

Additional Resources


Did this page help you?