Actions can be used on a screen in your Draftbit app that has an On Screen Focus Trigger or a component like Fetch in addition to components that support interactions like Button, Touchable, Action Sheet Item, etc.

Types of Actions

Once opened, you will be able to see the available Actions:

Action

Description

Navigate

In the dropdown, select a screen in the current navigator or a different navigator to navigate to. (Stack Navigator only: Aside from screens and navigators, a Go back option is in the dropdown which takes you to the previous screen in the stack.)

Open Browser

Accepts the URL for a website. 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.

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.

Run a Custom Function

Run a function you've created in the Custom Code.

API Request

Make API requests after a button is pressed. Learn how to configure in this article: Sending Data.

Set Global Variable

Set the value of a defined Global Variable. (For example, from the response of an API Request).

Extract Key

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

Conditional Stop

Requires a value to be checked whether it evaluates to true or false. When it evaluates to true, no further actions will be performed in the list of "Actions".

Open Camera

Opens a device's Camera to take a picture or record a video to upload.

Returns image data in Base64 format. Can be chained with the "Run a Custom Function" action to upload the data to a cloud service. The image data returned can be also be stored in a Variable to upload to a backend service (only if the backend service allows uploading images/videos in Base64 format).

Open Image Picker

Opens a device's media library to select a photo or a video to upload.

Returns image data in Base64 format. Can be chained with the "Run a Custom Function" action to upload the data to a cloud service. The image data returned can be also be stored in a Variable to upload to a backend service (only if the backend service allows uploading images/videos in Base64 format).

Log to Console

An action that is used as a debugging tool. You can pass the result of an action (for example, an API request or a Custom function, or any type of action that returns a result) to a preview response. The result triggered by this action is shown in the Console Logs tab in the Bottom Panel.

This is similar to the browser's Developer Tools and for quick previewing is now available in Draftbit.

Refetch Data

An action that is used to re-trigger a specific endpoint to fetch the data updates from it. You will use this type of action, for example, when you want to allow fetching data updates manually within the application.

To use it, add it as an action, for example, on a Button component. There are a couple of requirements to remember when using this action:

  • 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 already.

Get Location

An action that requests permission and saves an object with location information of the device. The result saved can be assigned a name so that you can re-use the result or save it in a App or a Device Variable.

The location object returned by this action contains the following fields:

{
    coords: {
        accuracy: 20.6185685750211,
        altitude: 43.04912245369878,
        altitudeAccuracy: 6.938014590198416,
        heading: 180.40493651139974,
        latitude: 30.747315,
        longitude: -85.088285,
        speed: 0
    },
    timestamp: 1634698876011.571
}

Update Map Location

Action that allows you to focus on a specific region of the map when triggered. It requires longitude and latitude coordinates as input values.

This action also requires a Map component on the app screen to reference.

Get Expo Push Token

Action that returns a unique token associated with the device for Expo push notifications. It is usually chained with a "Run a Custom Function" action to upload the data to a cloud service or to store the value of the token in a database.

Media Actions

In a Draftbit app, you can implement features such as opening a device's camera, taking a picture, and uploading to a cloud service to a backend of the choice using the following actions:

  • Open Camera
  • Open Image Picker

Both of these actions share the same set of attributes. These attributes are used to manipulate the image or the video after it has been taken or recorded but before uploading using a device's native controls.

Attribute

Description

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.

Both of these actions can be mapped as interactions on a Buttons or a Touchable component.

In the above example, you will see the example of the "Open Image Picker" action.

Results of the picker using image picker or camera action return image data. The data is in Base64 format. It can be further chained with a "Run a Custom Function" action to upload the data to a cloud service.

The image data returned can be also be stored in a Variable to upload to a backend service (only if the backend service allows uploading images/videos in Base64 format).

👍

Tutorials on Image Uploading and using Media actions

Common Action Recipes

Using Log to Console action with API requests

If you want to debug or preview the result of an API request action, you can add a Log to Console as a subsequent action. The results of the Log to Console action are shown in the Console Logs tab in the Bottom Panel.

Here is an example of a POST API request that returns an error when using a Log to Console action is used as subsequent action to the API request action. The error message is visible when the Console Logs tab is toggled from the Bottom Panel.

If the previous API request to submit new data returns a response and not an error, it logs the result (if) returned by the API request.

📘

Debugging with Log to Console with an action

Any type of action that is returning a result to be used by a subsequent action, because you can use it to confirm that data is being passed in (e.g. debugging auth, getting data from a camera component, etc.) can be used with Log to Console.

❗️

Best practice: Remove Console Log actions before publishing the app

Make sure to remove any references to Console Log actions in your Draftbit app when you are preparing or are ready to publish your app to the app store.

Behind the scenes, a Console Log action is a console.log() statement. These statements can cause a bottleneck in your production app. Reference.

Console Log statements in Custom Code

If you have a console.log() statement in your Custom Code, you will see them logged in the Console Logs tab in the Bottom Panel.

In the example below, there is a Custom Code Component defined as follows:

import React from 'react';
import { Text } from 'react-native';

export const MyComponent = () => {
  console.log('Console statement inside Custom Code Component triggered!');

  return <Text>Hello world!</Text>;
};

Once the screen that uses the MyComponent from the above snippet is in focus, you can view the results of the log statements in the Console Logs tab (as shown below).

❗️

Best practice: Remove console.log() statements from Custom Code before publishing the app

Make sure to remove any references to console.log() statements in your Draftbit app's Custom Components or Functions, when you are preparing or are ready to publish your app to the app store.

These statements can cause a bottleneck in your production app. Reference.

Navigating between screens using "Navigate" action

Using the action type Navigate, you can create a user experience to allow them to navigate from one screen to another.

To implement this navigation behavior:

  • select a Button or Touchable in the Components tree
  • go to the Interactions tab in the Properties Panel
  • click the '+' (plus button) next to the Action to open the menu of Actions to choose from
  • choose the action Navigate: screen and then select the appropriate screen to navigate as a value to the property Destination

Passing data between screens using "Navigate" action

Creating a navigate action by adding navigation params to an endpoint will allow you to Pass Data between your screen. In the example below, the field title is coming from Navigation Params.

This is possible because of a property called initial value. On a Text Input component, you will find this property in Data Tabs (of Properties panel). The value for this property is used to initialize with a value from a data source or navigation parameter. In the current example, the initial value is passed as a navigation parameter from a List inside a Fetch component. This means that the value is coming from the REST API.

The Navigation Params to pass data are defined in the Parent screen or the screen the user is navigating from.

Here is a complete flow of passing a param using the action on a button when navigating from one screen to another.

Creating Navigation Params using "Navigate" action

Navigation Params allow passing data from the initial screen to the destination screen. When developing screens you can create the defined Navigation Params using the "Navigate" action.

Here is how to use Create Navigation Params

  • On the initial screen, select the Button or Touchable, go to the Interactions tab in the Properties Panel
  • Then, under Create Navigation Parameter define a variable name that you'd expect on the destination screen and select its value from the dropdown menu. Since its a navigation parameter, it will show under the section Pass Data.
  • Go to the Destination screen. Select screen name in the Components tree. Select the Data tab in the Properties panel and you can verify that the navigation parameter defined in the previous step exists.

Under the section Receive Parameters, you can view which parameters are available on the Destination screen.

While building the destination screen, under the section Receive Parameters you can add a test value for each navigation parameter. This will allow you to add mock data for representation components such as Text.

Note that once you map variables from an API Endpoint the test values for the receiving parameters are replaced by dynamic values incoming from the API endpoint.

To remove a Navigation Param, you can click the '-' button next to the param.

Stacking Actions

You can add multiple actions to your Button or Touchable by clicking the '+' button in the Actions panel and selecting additional actions from the dropdown.

Below is an example of Stacked Actions at a Button component. When the Button is pressed, the highlighted actions in the Properties panel execute in the sequence they are added.

URL schemes

This section describes how URL schemes should be described as an input to the Link to Phone, Text or Email app action.

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.

Search

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

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

Display a Map

Launch a blank map with the user's location highlighted.
https://www.google.com/maps/@?api=1&map_action=map

Display a Street View panorama

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

Additional Resources

Stacked Actions is used in the following guides:


Did this page help you?