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.

22382238

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

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

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.

22422242

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.

22342234

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.

22362236

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.

22422242

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.

22422242

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.

22362236

Negate

The Negate function takes truthy value and changes it to falsity and vice versa.

400400

ParseBoolean

The ParseBoolean function takes a string value. If it's "false", evaluates to false otherwise evaluates to true.

696696

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.

761761

The Popover component you see above is custom and is created using View, BlurView, Text, and Touchable components.

518518

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.

16001600

There is a single Button Outline component on the screen.

10221022

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".

700700

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.

696696

Pressing the Button Outline component will trigger the Global Variable value to true and display the Popover component.

11041104

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".

698698

Now, press the "Cancel" button to hide the Popover component.

11041104

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>

JsonStringify

The transform function JsonStringify converts a JavaScript object or value to a JSON string.

22382238

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.

561561

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.

11181118

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.

11161116

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.

11231123

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.

11191119

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


Did this page help you?