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.

PropertyDescription
Result NameProvide a name for the return value of this function to enable the result to be used by subsequent actions.

Endpoint Setup

PropertyDescription
ServiceSelect the REST API Service for the request.
EndpointSelect the Endpoint for the service you selected.
Parse JSONIf 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.

PropertyDescription
Check ValueValue 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" 
  } 
}
PropertyDescription
InputInput value to extract key from
PathThe path within the input at which the value to be extracted lives.
Result NameProvide 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

PropertyDescription
EndpointRefetches 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)

PropertyDescription
VariableThe variable you want to assign the new value to.
New ValueThe new value to assign to the selected variable.
Result NameProvide 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.

PropertyDescription
ValueValue to set the variable to.
Result NameThe 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.

PropertyDescription
If ConditionThe value to check whether it evaluates to true or false

Navigate

Navigate to a Screen, Tab Navigator, or Stack Navigator, optionally Passing Data.

PropertyDescription
BehaviorDetermines 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

PropertyDescription
DestinationThe Screen, or Navigator that you want to navigate to.
Route NameA 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
ParamsParams 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.

PropertyDescription
Route NameA destination route name that is in the app's navigator. Usually a Screen or Navigator name
ParamsNavigation 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.

PropertyDescription
URLThe 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 schemeExample UseDescription
mailto:mailto:[email protected]Opens a new email in the Mail app with the email address provided set as the recipient.
tel:tel:+15555555555Prompts user to call the the phone number provided.
sms:sms:+15555555555Opens a new message in the SMS app with the phone number provided set as the recipient.
https:// or http://https://draftbit.comOpens 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.

PropertyDescription
URLThe 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.

PropertyDescription
Output base64When 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 DurationMaximum 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.
QualityUsing 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 AlertShows an alert with an error message when permissions are rejected or not available.
Permission Error MessageThe 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 TypeThe default camera to launch - front or back
Result NameIt 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.

PropertyDescription
Multiple SelectionIf 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 base64When 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.
QualityUsing 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 NameIt 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.

PropertyDescription
Share TextThe 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.

PropertyDescription
Target ComponentThe Map component to update the location on
LatitudeThe latitude coordinate for the updated map location
LongitudeThe longitude coordinate for the updated map location
ZoomThe 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).

PropertyDescription
Target ComponentThe Map component to re-center
ZoomThe 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.

PropertyDescription
Return name and valueIf 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 SelectionIf enabled, allows selection of multiple files
Output Base64If enabled, file data will be returned in base64 format. Otherwise an Asset object is returned.
Result NameProvide 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.

PropertyDescription
TitleThe text to display as the title for the alert. Not applicable on web
MessageThe text to display as the message for the alert
ButtonThe 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.

PropertyDescription
Target ComponentSelect 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.

PropertyDescription
Show Permission Error AlertShows an alert with an error message when permissions are rejected or not available.
Permission Error MessageThe 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 AlertShows an alert with an error message when used on a device that does not support push notifications.
Device Error MessageThe 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 NameProvide 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

PropertyDescription
Result NameProvide a name for the return value of this function to enable the result to be used by subsequent Actions.
AccuracySets the accuracy level used to determine the location

Lowest - 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  
}
NameTypeDescription
accuracynumber | nullThe radius of uncertainty for the location, measured in meters. Can be null on Web if it's not available.
altitudenumber | nullThe altitude in meters above the WGS 84 reference ellipsoid. Can be null on Web if it's not available.
altitudeAccuracynumber | nullThe accuracy of the altitude value, in meters. Can be null on Web if it's not available.
headingnumber | nullHorizontal 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.
latitudenumberThe latitude in degrees.
longitudenumberThe longitude in degrees.
speednumber | nullThe instantaneous speed of the device in meters per second. Can be null on Web if it's not available.
timestampnumberThe 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.

PropertyDescription
Result NameProvide 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.

PropertyDescription
CountA numeric value to set as the notification count.
Result NameProvide 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.

PropertyDescription
Target ComponentThe Audio or Video component to apply changes to
Seek PositionPosition of the media in milliseconds to seek/move to.

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.

PropertyDescription
Target ComponentThe Audio or Video component to toggle playback

Pause Media

Pauses the media of the selected component. Requires an Audio or Video component on the Screen.

PropertyDescription
Target ComponentThe Audio or Video component to pause

Play Media

Plays the media of the selected component. Requires an Audio or Video component on the Screen.

PropertyDescription
Target ComponentThe Audio or Video component to play

Toggle Video Fullscreen

Toggles full-screen view for the selected Video component. Requires a Video component on the Screen.

PropertyDescription
Target ComponentThe 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.

PropertyDescription
Input 1The 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.

PropertyDescription
Result NameProvide a name for the return value of this function to enable the result to be used by subsequent Actions.

Function Setup

PropertyDescription
Custom FunctionThe 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.

PropertyDescription
Feedback IntensitySets the intensity of the vibration.

Wait

Add a delay before executing further Actions in the Workflow

PropertyDescription
MillisecondsDuration 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.

PropertyDescription
Target ComponentThe component to apply the Action t.
X Scroll PositionThe x position to scroll to.
Y Scroll PositionThe y position to scroll to.
AnimationWhen 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.

PropertyDescription
Target ComponentThe component to apply the Action to
AnimationWhen 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.

PropertyDescription
Target ComponentThe component to apply the Action t
IndexThe index to scroll to. Required. 0 is the first item in the List
AnimatedWhether the List should animate while scrolling. Enabled by default
View OffsetA fixed number of pixels to offset the final target position.
View PositionA value of 0 places the item specified by index at the top, 1 at the bottom, and 0.5centered in the middle.

Expand Bottom Sheet

Snap to the maximum provided snap point. Requires a Bottom Sheet component to be on the Screen.

PropertyDescription
Target ComponentThe 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.

PropertyDescription
Target ComponentThe component to apply the Action to

Close Bottom Sheet

Fully closes the Bottom Sheet. Requires a Bottom Sheet component to be on the Screen.

PropertyDescription
Target ComponentThe 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.

PropertyDescription
Target ComponentThe component to apply the Action to
IndexThe snap point index to snap to

Start Timer

Starts the selected Timer. Requires a Timer component to be on the Screen.

PropertyDescription
Target ComponentThe Timer component to start

Stop Timer

Stops the selected Timer. Requires a Timer component to be on the Screen.

PropertyDescription
Target ComponentThe Timer component to stop

Reset Timer

Reset the selected Timer back to its Initial Time. Requires a Timer component to be on the Screen.

PropertyDescription
Target ComponentThe 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

PropertyDescription
Target ComponentThe Swipercomponent to swipe

Swipe Previous

Swipe to the previous item in a Swiper. Requires a Swiper component to be on the Screen

PropertyDescription
Target ComponentThe Swipercomponent to swipe

Swipe To

Swipe to a specific item in a Swiper. Requires a Swiper component to be on the Screen

PropertyDescription
Target ComponentThe Swipercomponent to swipe
IndexThe 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.

PropertyDescription
Target ComponentThe Deck Swiper component to swipe
DirectionThe direction to swipe the card. (Left, Right, Top, Bottom)