Actions

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.

How to use Actions

Actions 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 Stack for that Trigger. Here you can add as many Actions as you need. Actions are executed in order starting from the top of the stack.

Available Actions

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.

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

• How to use Open Camera Action in Draftbit
• How to upload images to Airtable from a Draftbit app using Open Image Picker action

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.

URL schemes

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

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

• Expo Documentation: Linking
• Google Maps Developer Guide

Stacked Actions is used in the following guides:

• Stack API Request and Navigate actions on a Button
• Low-code Authentication with Xano