Actions
Take action when something happens in your app
Actions let you execute different functionality in your app. Actions can be applied to many of the available Components such as Buttons, Touchable, Fetch, List, and more. They can also be executed from Screens.
Actions are combined into Workflows which are assigned to Triggers from the Interactions tab. The Triggers that are available will depend on the component that is selected. For instance, a Button has an On Press Trigger, but a List doesn't.
Clicking on a Trigger in the Interactions tab will open up the Action Editor for that Trigger. Here you can add as many Actions as you need.
API Request
Make an API request using one of your configured REST API Services and Endpoints.
Property | Description |
---|---|
Result Name | Provide a name for the return value of this function to enable the result to be used by subsequent actions. |
Endpoint Setup
Property | Description |
---|---|
Service | Select the REST API Service for the request. |
Endpoint | Select the Endpoint for the service you selected. |
Parse JSON | If enabled, the Action will return the result of the fetch parsed as a JSON object. Otherwise, an object with text , status , and statusText fields representing the response object. |
Example response with Parse JSON disabled:
{
"result": {
"status": 200,
"statusText": "OK",
"text": "[YOURDATA]"
}
}
Configuration
If your selected Endpoint has parameters, they will show up here so you can assign values to them.
Conditional Stop
When the value evaluates to true
, no further actions will be performed.
Property | Description |
---|---|
Check Value | Value that is checked to indicate a stop. |
Extract Key
Consider using Keypath transform instead
Most of the time, you can avoid using the Extract Key Action and instead type the keypath directly into the transform input where available. Learn more about it in the Transform Functions docs.
Chained with API Request action. Use this action to extract a key from an object or array.
To construct the Path
, use dot (.
) or square bracket notation ([]
) to traverse deeply nested objects.
For example, use .fields.Name
to extract the value of Name
from the following object:
{
"fields": {
"Name": "Some Value"
}
}
Property | Description |
---|---|
Input | Input value to extract key from |
Path | The path within the input at which the value to be extracted lives. |
Result Name | Provide a name for the return value of this function to enable the result to be used by subsequent actions. |
Refetch Data
Refetches data of a given Fetch component.
- The component that triggers this Action must be nested inside the Fetch component.
- The Endpoint you are re-fetching the data for, needs to have a Role and an Object type configured.
Endpoint Setup
Property | Description |
---|---|
Endpoint | Refetches data of a given Fetch component. |
Set Variable
Set the value of a Screen, App, or Device Variable. Can also be used to update a variable declared within an Action workflow (see Declare Variable below)
Property | Description |
---|---|
Variable | The variable you want to assign the new value to. |
New Value | The new value to assign to the selected variable. |
Result Name | Provide an optional name for the return value of this function to enable the result to be used by subsequent actions. |
Declare Variable
Create a local variable that is scoped to the selected Trigger. Used for temporary values needed during the current Action flow. Use Set Variable to update a declared variable within an Action workflow.
Property | Description |
---|---|
Value | Value to set the variable to. |
Result Name | The name of the variable for reference in subsequent Actions |
If/Else
Add a branch to your logic flow to execute different Actions based on the value of a boolean Variables.
Property | Description |
---|---|
If Condition | The value to check whether it evaluates to true or false |
Navigate
Navigate to a Screen, Tab Navigator, or Stack Navigator, optionally Passing Data.
Property | Description |
---|---|
Behavior | Determines the behavior of the navigation.default will push the destination onto the existing navigation stack unless the Screen already exists in the stack in which case it will pop back to that Screen in the navigation stack. This is the typical navigation behavior.push will push the destination onto the existing navigation stack regardless of whether it exists in the stack already. This option allows multiple instances of the same Screen in the stack.reset will navigate to the destination removing everything from the existing navigation stack and preventing any 'back' behavior. |
Navigation Setup
Property | Description |
---|---|
Destination | The Screen, or Navigator that you want to navigate to. |
Route Name | A destination route name that is in the app's navigator. Only available when Custom Destination is selected as the Destination. This is an advanced feature.Example: If the Screen name is Blank or blank , then Route Name should be BlankScreen |
Params | Params as a JSON object to send to the destination route. Only available when Custom Destination is selected as the Destination. This is an advanced feature.Example: { id: 33 } |
Pass Data
If the destination you select accepts Navigation Params, they will be available here so you can pass values to them.
Navigating with Route Data
The Navigate Action includes an option for the Destination prop named Custom Destination
. When selected, it will enable two additional parameters - Route Name and Params.
You can pass the name
key from the route data to the Route Name prop and include any navigation params.
Property | Description |
---|---|
Route Name | A destination route name that is in the app's navigator. Usually a Screen or Navigator name |
Params | Navigation params in JSON format to send to the destination route. Example: { name: 'Lucy' } |
Navigate Back
Navigates back to the previous Screen by removing the current Screen from the navigation history.
Open App Link
Accepts a URL Scheme to open links to other applications. For example, you can open the telephone, messages, maps, or the browser.
On iOS and Android, this will take users out of your application and into another, exiting your application. You can only open an application that the local system supports.
Property | Description |
---|---|
URL | The URL to launch. This input supports static text or data & variables through the use of brackets, ie "{{variable}}". For example, you could use mailto:{{ email }} which would allow you to pass in a value to the email variable. |
Common URL Schemes
URL scheme | Example Use | Description |
---|---|---|
mailto: | mailto:[email protected] | Opens a new email in the Mail app with the email address provided set as the recipient. |
tel: | tel:+15555555555 | Prompts user to call the the phone number provided. |
sms: | sms:+15555555555 | Opens a new message in the SMS app with the phone number provided set as the recipient. |
https:// or http:// | https://draftbit.com | Opens the website in the default browser, outside the app. |
Google Maps
If Google Maps is installed on the user's device, the Google Maps application will open. If it isn't installed, Google Maps will open in the browser. Check the Google Maps Developer Guide for more information on constructing valid URLs.
URL with Search Query
Launch Google Maps with a list of locations that match the query with the closest one being pinned.
https://www.google.com/maps/search/?api=1&query=Shake+Shack
URL with Directions
Launch Google Maps with directions to the location defined in the URL from the user's current location.
https://www.google.com/maps/dir/?api=1&destination=Shake+Shack+66+E+Ohio+St+Chicago+IL
URL with Simple Map
Launch a blank map with the user's location highlighted.
https://www.google.com/maps/@?api=1&map_action=map
URL with Street View
Launch a Street View panorama of the selected location.
https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=48.857832,2.295226&heading=-45&pitch=38&fov=80
Open Browser
This action allows you to open any http://
or https://
URL in the systems web browser.
On iOS and Android this will open the URL and when the user is finished will return them to the application. On the web, this will open the URL in a new window.
Property | Description |
---|---|
URL | The URL to open. This input supports static text or data & variables through the use of brackets, i.e. "{{variable}}". For example, you could use https://somewebsite.com/{{ username }} |
Open Camera
Opens a device's Camera to take a picture or record a video. Returns image or video data in base64-encoded string format or an Asset object.
Property | Description |
---|---|
Output base64 | When enabled, outputs result data as base64 format, otherwise an Asset object is returned. |
Allow Editing | enable this option to edit an image or a video after its picker. On iOS, you will find native features like trimming a video. |
Video Max Duration | Maximum duration, in seconds, for video recording. On Android, effect of this option depends on support of installed camera app. On Web this option has no effect. |
Quality | Using the range slider, you set the value for the compression size of the image to be picked between 0 and 1. The value 0 represents compress for small size and 1 represents compress for maximum quality. |
Show Permission Error Alert | Shows an alert with an error message when permissions are rejected or not available. |
Permission Error Message | The message to display when opening the camera fails due to permissions. This input supports static text or data & variables through the use of brackets, ie "{{variable}}". For example, you could use {{ message }} |
Media Types | To set the value to either select an image or a video. |
Camera Type | The default camera to launch - front or back |
Result Name | It is useful to store the image with a variable name such that the variable name can be used to send the image data in the body configuration to a cloud service (uploading an image) using an API request action. The result by the action is in the image data in Base64 format. |
Asset Object
{
"assetId": null,
"mimeType": "image/jpeg",
"duration": null,
"fileSize": 261949,
"height": 4032,
"type": "image",
"uri": "file:///var/mobile/Containers/Data/Application/.../Library/Caches/ImagePicker/filename.jpg",
"width": 3024,
"base64": null,
"exif": null,
"fileName": null
}
Open Image Picker
Opens a device's media library to select a photo or a video. Returns image or video data in base64-encoded string format or an Asset object.
Property | Description |
---|---|
Multiple Selection | If enabled, allows selection of multiple images/videos at once. Returns an array of base64 image strings instead of a single base64 string. Editing multiple images/videos is not supported, as such, Allows Editing is ignored when this option is enabled. |
Output base64 | When enabled, outputs result data as base64 format, otherwise an Asset object is returned. |
Media Types | To set the value to either select an image or a video. |
Allow Editing | Enable this option to edit an image or a video after its picker. On iOS, you will find native features like trimming a video. |
Quality | Using the range slider, you set the value for the compression size of the image to be picked between 0 and 1. The value 0 represents compress for small size and 1 represents compress for maximum quality. |
Result Name | It is useful to store the image with a variable name such that the variable name can be used to send the image data in the body configuration to a cloud service (uploading an image) using an API request action. The result by the action is in the image data in Base64 format. |
Asset Object
{
"assetId": null,
"mimeType": "image/jpeg",
"duration": null,
"fileSize": 261949,
"height": 4032,
"type": "image",
"uri": "file:///var/mobile/Containers/Data/Application/05219D0E-2521-47A4-B2A5-42E2ACF93F03/Library/Caches/ImagePicker/2539866A-5901-4054-9C42-3520BDA5600C.jpg",
"width": 3024,
"base64": null,
"exif": null,
"fileName": null
}
Open Share Dialog
This action allows you to open the native share dialog and share text or URLs with other apps. Not all apps support the share feature and may not be listed in the available apps to share with.
Property | Description |
---|---|
Share Text | The text or URL to share. This input supports static text or data & variables through the use of brackets, i.e. "{{variable}}". For example, you could use https://somesite.com/{{ username }} |
Update Map Location
Updates the current location of a Map View component. This Action requires a Map View component on the Screen to reference.
Property | Description |
---|---|
Target Component | The Map component to update the location on |
Latitude | The latitude coordinate for the updated map location |
Longitude | The longitude coordinate for the updated map location |
Zoom | The zoom level to apply to the updated Map View |
Re-Center Map
Re-centers the map around a the Initial Latitude and Initial Longitude prop coordinates. (Requires a Map View component).
Property | Description |
---|---|
Target Component | The Map component to re-center |
Zoom | The zoom level to apply to the re-centered Map View |
Dismiss Keyboard
Dismisses the active keyboard and removes focus from any inputs.
Select File
Opens the device's native file picker. Returns file data in base64-encoded string format.
Property | Description |
---|---|
Return name and value | If enabled, the name and base64 value of the selected file will be returned in an object, otherwise just the base64 value as a string. Disabled by default |
Multiple Selection | If enabled, allows selection of multiple files |
Output Base64 | If enabled, file data will be returned in base64 format. Otherwise an Asset object is returned. |
Result Name | Provide a name for the return value of this function to enable the result to be used by subsequent Actions. |
Example response with name
{
name:"MyTextFile.txt",
value:"data:text/plain;base64,WwoJewoJCSJsYWJlbCI6ICJSZWQi...CgoKCg=="
}
Example response without name
"data:text/plain;base64,WwoJewoJCSJsYWJlbCI6ICJSZWQi...CgoKCg=="
Asset Object
{
"assetId": null,
"mimeType": "image/jpeg",
"duration": null,
"fileSize": 261949,
"height": 4032,
"type": "image",
"uri": "file:///var/mobile/Containers/Data/Application/05219D0E-2521-47A4-B2A5-42E2ACF93F03/Library/Caches/ImagePicker/2539866A-5901-4054-9C42-3520BDA5600C.jpg",
"width": 3024,
"base64": null,
"exif": null,
"fileName": null
}
Show Alert
Displays a native device alert to the user. The button can currently only be used to dismiss the alert.
Property | Description |
---|---|
Title | The text to display as the title for the alert. Not applicable on web |
Message | The text to display as the message for the alert |
Button | The text to display in the close button. Not applicable on web |
Only Message is displayed on Web.
Focus Text Input
Focuses the selected input component, such as a Text Input, Number Input, PIN Input component, and opens the virtual keyboard on mobile devices. Requires a compatible component to be present on the Screen to add to a workflow.
Property | Description |
---|---|
Target Component | Select the input to focus from the available inputs on the Screen. |
Get Expo Push Token
Returns an Expo Push Token as a string for sending push notifications with Expo's push service. Learn more about sending and receiving push notifications in your Draftbit app in the Push Notification docs.
Property | Description |
---|---|
Show Permission Error Alert | Shows an alert with an error message when permissions are rejected or not available. |
Permission Error Message | The message to display when retrieving the push token fails. This input supports static text or data & variables through the use of brackets, ie "{{variable}}". For example, you could use {{ message }} |
Show Device Error Alert | Shows an alert with an error message when used on a device that does not support push notifications. |
Device Error Message | The message to display when the user is on an incompatible device. This input supports static text or data & variables through the use of brackets, ie "{{variable}}". For example, you could use {{ message }} |
Result Name | Provide a name for the return value of this function to enable the result to be used by subsequent Actions. |
Get Location
Requests permissions and then returns an object with location information for the device
Property | Description |
---|---|
Result Name | Provide a name for the return value of this function to enable the result to be used by subsequent Actions. |
Accuracy | Sets the accuracy level used to determine the locationLowest - Accurate to the nearest three kilometers.Low - Accurate to the nearest kilometer.Balanced - Accurate to within one hundred meters.High - Accurate to within ten meters of the desired target.Highest - The best level of accuracy available.Best for Navigation - The highest possible accuracy that uses additional sensor data to facilitate navigation apps. |
Location object
The location object returned by the Get Location Action contains the following data object:
{
coords: {
accuracy: 20.6185685750211,
altitude: 43.04912245369878,
altitudeAccuracy: 6.938014590198416,
heading: 180.40493651139974,
latitude: 30.747315,
longitude: -85.088285,
speed: 0
},
timestamp: 1634698876011.571
}
Name | Type | Description |
---|---|---|
accuracy | number | null | The radius of uncertainty for the location, measured in meters. Can be null on Web if it's not available. |
altitude | number | null | The altitude in meters above the WGS 84 reference ellipsoid. Can be null on Web if it's not available. |
altitudeAccuracy | number | null | The accuracy of the altitude value, in meters. Can be null on Web if it's not available. |
heading | number | null | Horizontal direction of travel of this device, measured in degrees starting at due north and continuing clockwise around the compass. Thus, north is 0 degrees, east is 90 degrees, south is 180 degrees, and so on. Can be null on Web if it's not available. |
latitude | number | The latitude in degrees. |
longitude | number | The longitude in degrees. |
speed | number | null | The instantaneous speed of the device in meters per second. Can be null on Web if it's not available. |
timestamp | number | The Unix timestamp associated with the location object |
Get Notification Count
Returns the number currently set as the notification count for the app. Usually displayed on the apps device icon. A 0
value means that the badge is not displayed. See more about push notifications in the Push Notification docs.
Property | Description |
---|---|
Result Name | Provide a name for the return value of this function to enable the result to be used by subsequent Actions. |
Set Notification Count
Sets the number of notifications count for the app Usually displayed on the app's device icon. Setting it to 0
clears the badge. Returns true
when successful, and false
otherwise. See more about push notifications in the Push Notification docs.
Property | Description |
---|---|
Count | A numeric value to set as the notification count. |
Result Name | Provide a name for the return value of this function to enable the result to be used by subsequent Actions. |
Seek Media Position
Moves the play head to the designated position of the playing media in milliseconds. Requires an Audio or Video component on the Screen.
Toggle Media Playback
If the selected Audio or Video component is playing, it will pause the media. If the media is paused, it will resuming playback. Requires an Audio or Video component on the Screen.
Pause Media
Pauses the media of the selected component. Requires an Audio or Video component on the Screen.
Play Media
Plays the media of the selected component. Requires an Audio or Video component on the Screen.
Toggle Video Fullscreen
Toggles full-screen view for the selected Video component. Requires a Video component on the Screen.
Property | Description |
---|---|
Target Component | The Video component to toggle full screen for |
Log to Console
Similar to the browser console and used as a debugging tool. You can pass a value, such as the result of another Action or a variable and it will be printed to the console log. The console logs are located in the bottom drawer of the Builder. Learn more in the Console Logs doc.
Property | Description |
---|---|
Input 1 | The first value to log |
Input 2,3,4... | Subsequent values to log |
Run a Custom Function
Run Functions that you've created, optionally passing data, and get the results.
Property | Description |
---|---|
Result Name | Provide a name for the return value of this function to enable the result to be used by subsequent Actions. |
Function Setup
Property | Description |
---|---|
Custom Function | The function you want to run |
Arguments
If the function you are running has parameters, they will be listed here and you can pass values as arguments.
Haptic Feedback
Provides access to the system's vibration effects on Android and the haptics engine on iOS.
Property | Description |
---|---|
Feedback Intensity | Sets the intensity of the vibration. |
Wait
Add a delay before executing further Actions in the Workflow
Property | Description |
---|---|
Milliseconds | Duration in milliseconds. 1000 milliseconds = 1 second |
Scroll To
Scrolls to a given x, y offset of a Scroll View, either immediately or with a smooth animation.. Requires a Scroll View component to be on the Screen.
Property | Description |
---|---|
Target Component | The component to apply the Action t. |
X Scroll Position | The x position to scroll to. |
Y Scroll Position | The y position to scroll to. |
Animation | When enabled, smooth animation is used. Enabled by default |
Scroll To End
Scrolls to the end of the content in a List or Scroll View. Requires a a List or Scroll View component to be on the Screen.
Property | Description |
---|---|
Target Component | The component to apply the Action to |
Animation | When enabled, smooth animation is used. Enabled by default |
Scroll To Index
Scrolls to the item in a List at the specified index so that it is positioned in the viewable area. Requires a List component to be on the Screen.
Property | Description |
---|---|
Target Component | The component to apply the Action t |
Index | The index to scroll to. Required. 0 is the first item in the List |
Animated | Whether the List should animate while scrolling. Enabled by default |
View Offset | A fixed number of pixels to offset the final target position. |
View Position | A value of 0 places the item specified by index at the top, 1 at the bottom, and 0.5 centered in the middle. |
Expand Bottom Sheet
Snap to the maximum provided snap point. Requires a Bottom Sheet component to be on the Screen.
Property | Description |
---|---|
Target Component | The component to apply the Action to |
Collapse Bottom Sheet
Snap to the minimum provided snap point. Requires a Bottom Sheet component to be on the Screen.
Property | Description |
---|---|
Target Component | The component to apply the Action to |
Close Bottom Sheet
Fully closes the Bottom Sheet. Requires a Bottom Sheet component to be on the Screen.
Property | Description |
---|---|
Target Component | The component to apply the Action to |
Snap To Bottom Sheet Index
Snap to one of the provided snap points. Requires a Bottom Sheet component to be on the Screen.
Property | Description |
---|---|
Target Component | The component to apply the Action to |
Index | The snap point index to snap to |
Start Timer
Starts the selected Timer. Requires a Timer component to be on the Screen.
Property | Description |
---|---|
Target Component | The Timer component to start |
Stop Timer
Stops the selected Timer. Requires a Timer component to be on the Screen.
Property | Description |
---|---|
Target Component | The Timer component to stop |
Reset Timer
Reset the selected Timer back to its Initial Time. Requires a Timer component to be on the Screen.
Property | Description |
---|---|
Target Component | The Timer component to reset |
Toggle Drawer
Opens or closes the Drawer Navigator depending on its current state
Swipe Next
Swipe to the next item in a Swiper. Requires a Swiper component to be on the Screen
Property | Description |
---|---|
Target Component | The Swipercomponent to swipe |
Swipe Previous
Swipe to the previous item in a Swiper. Requires a Swiper component to be on the Screen
Property | Description |
---|---|
Target Component | The Swipercomponent to swipe |
Swipe To
Swipe to a specific item in a Swiper. Requires a Swiper component to be on the Screen
Property | Description |
---|---|
Target Component | The Swipercomponent to swipe |
Index | The index of the item within the Target Component that should be swiped to. Index starts at 0 . For example, the index of the first item is 0 , the second item is 1 , the third items is 2 , etc. |
Swipe Card
Swipes the top card within a Deck Swiper. Requires a Deck Swiper to be on the Screen.
Property | Description |
---|---|
Target Component | The Deck Swiper component to swipe |
Direction | The direction to swipe the card. (Left , Right , Top , Bottom ) |
Updated about 19 hours ago