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.

2238

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 typeFunctionBefore transformAfter transform
ParseIntParses a string and returns an integer.eg: "29.99"29
ParseFloatParses a string and returns a floating-point number.eg: " 29.99 "29.99
RoundUpRounds a numerical value up to the next largest integer.eg: 29.9930
RoundDownRounds a numerical value down to the largest integer less than or equal to a given number.eg: 29.9929
LengthCalculates the number of elements in a value and then display that number.eg: ["coffee", "jar", "cup"]3
NegateFunctionr that takes a truthy value and changes it to falsity and vice versa.eg: truefalse
ParseBooleanFunction 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
AddBearerPrefixA function returns the token with the prefix Bearer such that it can be set as the value to the Authorization header.eg: tokenBearer token
JsonStringifyA function that converts a JavaScript object or value to a JSON string.eg: {"count": 42}{"count": 42}
ParseJsonStringA function that converts a JSON string to a JavaScript object.eg: {"age":30}{age: 30}
ToUpperCaseA function that converts a string to uppercase letters.eg: "String""STRING"
ToLowerCaseA function that converts a string to lowercase letters.eg: "String""string"
ToStringA function that converts a number to a string.eg: 15"15"
IncrementA function that increments the number by one.eg: 12
DecrementA function that decrements the number by one.eg: 10
EqualToA function that checks if two values are equal.1 and 1 or "foo" and "bar"Returns true or false
NotEqualToA function that checks if two values are unequal.1 and 1 or "foo" and "bar"Returns true or false
LessThanA function that checks if the first value is less than the second value.1 and 10Returns true or false
GreaterThanA function that checks if the first value is greater than the second value.1 and 10Returns true or false
LessThanOrEqualToA function that checks if the first value is less than or equal to the second value.1 and 10Returns true or false
GreaterThanOrEqualToA function that checks if the first value is greater than or equal to the second value.1 and 10Returns true or false
ArrayAppendA Function that transform an array by adding the given value as the last item in the array.['22,'33'] and ['11']['22,'33','11']
ArrayPrependA Function that transform an array by adding the given value as the first item in the array.['22,'33'] and ['11']['11','22,'33']
ArrayConcatA 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']
LogToConsoleA 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.

2242

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.

2234

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.

2236

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.

2242

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.

2242

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.

2236

Negate

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

400

ParseBoolean

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

696

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.

761

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

518

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.

1600

There is a single Button Outline component on the screen.

1022

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

700

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.

696

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

1104

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

698

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

1104

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.

2238

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.

561

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.

1118

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.

1116

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.

1123

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.

1119

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.

3236

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