Transforming Values
Draftbit comes with built-in transform utility functions to transform data on-the-fly. You can also use your own Functions to transform data.
If the value you are working with supports being transformed, the 'transform with' dropdown will be displayed below it allowing you to apply one or more transforms to the value.
These functions work on components like Text and Set Variable Actions on Touchable or Button Components. Or, use them to conditionally display a component.
Keypath
If the value you are transforming is an object or array, then you can type the keypath directly into the transform with input to target specific indexes and keys.
In the case of an object, we can use simple dot notation (.) to get the value of a specific key. Consider a value like this assigned to a Variable named user:
{
id: 1,
name: 'Dave',
company: 'Draftbit',
address: {
street: '123 Draftbit Way',
city: 'Austin',
state: 'Texas'
}
}
After we select the user variable from the dropdown, we can get just the id value by entering .id into the transform with input. Notice the period (.) prefix. In the generated code, this will create user.id which references the value 1 in the example object above.
Or, we could get the state value by entering .address.state which would generate user.address.state which references the value Texas.
In the case of an array, we can add the use of square brackets ([]) to select specific indexes. Consider a value like this assigned to a Variable named teams:
[
{
id: 1,
name: 'Development',
tags: ['engineering','software','coding']
},
{
id: 2,
name: 'Design',
tags: ['ui','ux','branding']
}
]
We can get just the name of the first item in the array by entering [0].name where 0 is the first index in the array. The generated code would be teams[0].name.
If we wanted the second tag in the second item in the array, we would enter [1].tags[1].
Built-in Transform Functions
Below is a list of the available built-in transform functions that are available in the dropdown.
| Name | Description | Before transform | After transform |
|---|---|---|---|
| ParseBoolean | Function that takes a string value. If it's "false", evaluates to false otherwise evaluates to true. | "false""true"truefalse | falsetruetruefalse |
| ParseDate | Parses a date string and returns the time difference since January 1, 1970 in milliseconds | "March 21, 2012" | 1332306000000 |
| ParseInt | Parses a string and returns an integer. | "29.99" | 29 |
| ParseFloat | Parses a string and returns a floating-point number. | "29.99" | 29.99 |
| ParseJsonString | A function that converts a JSON string to a JavaScript object. | {"age":30} | {age: 30} |
| AddBearerPrefix | A function returns the token with the prefix Bearer such that it can be set as the value to the Authorization header. | token | Bearer token |
| ToUpperCase | A function that converts a string to uppercase letters. | "String" | "STRING" |
| ToLowerCase | A function that converts a string to lowercase letters. | "String" | "string" |
| StringConcat | Concatenates the given strings | "Hello " + "World" | "Hello World" |
| Trim | Trims the whitespace from the start and end of the given string | " Hello World " | "Hello World" |
| TrimStart | Trims the whitespace from the start of the given string | " Hello World" | "Hello World" |
| TrimEnd | Trims the whitespace from the end of the given string | "Hello World " | "Hello World" |
| StartsWith | Returns true if the give string starts with the provide value, else false | "Hello World" starts with "He" | true |
| EndsWith | Returns true if the give string ends with the provided value, else false | "Hello World" ends with "He" | false |
| Negate | Function that takes a truthy value and changes it to falsy and vice versa. | true | false |
| RoundUp | Rounds a numerical value up to the next largest integer. | 29.99 | 30 |
| RoundDown | Rounds a numerical value down to the largest integer less than or equal to a given number. | 29.99 | 29 |
| Increment | A function that increments the number by one. | 1 | 2 |
| Decrement | A function that decrements the number by one. | 1 | 0 |
| Length | Calculates the number of elements in a value and then display that number. | ["coffee", "jar", "cup"] | 3 |
| JsonStringify | A function that converts a JavaScript object or value to a JSON string. | {"count": 42} | {"count": 42} |
| ToString | A function that converts a given value to a string. | 15true | "15""true" |
| Includes | Returns true if the selected value includes the provided value, else false | "Hello World"includes "World" | true |
| Slice | Returns the extracted part of a given string based on the provided start and end as a new string | "Hello World"slice from 0 to 4 | "Hello" |
| ConsoleLog | Prints the given value to the Builder's Console Logs | ||
| And | Used to further conditionally customize the chain of transforms | ||
| Or | Used to further conditionally customize the chain of transforms | ||
| 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 |
| LessThanOrEqual | A function that checks if the first value is less than or equal to the second value. | 1 and 10 | Returns true or false |
| GreaterThanOrEqual | A function that checks if the first value is greater than or equal to the second value. | 1 and 10 | Returns true or false |
| 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'] |
| 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'] |
| ArrayLast | Returns the last item in the given array | [1, 2, 3, 4] | 4 |
| FormatDateISO | Formats a JavaScript DateTime to an ISO string |
Multiple Transforms
It is possible to chain multiple transforms together to perform more complex manipulation of your value. This includes both the built-in transforms and your own transform functions.
Custom Transform Functions
You can also use any Functions that have one or more parameters as a Transform Function by selecting it from the dropdown.
Multiple Arguments
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.
Additional Resources
Updated about 2 months ago