Add actions

Fully harness the potential of actions to bring your application to life.

Actions are essential elements for connecting different components and screens of your application, creating interactive workflows. An action can take various forms, such as navigating to another screen, opening a pop-up, manipulating data, changing the project's language, creating a transition, and much more.

When creating an action, you select a trigger event and an action from a list of options. You have the ability to add multiple actions to the same trigger, and they will be triggered in the order they were created.

For example, you can link a button to an action that allows you to navigate to another screen when the button is clicked. You can also add an action to change the state of the current screen. These actions will be triggered in the order you defined them.

The order and combination of actions can be customized according to the needs of your application, offering great flexibility in creating your workflows.

Change screen

Add a link to another screen.

You can choose to select a screen, go to the previous screen or the next screen.

If you choose a specific screen, you can define the state. If you choose to change to the previous or next screen, the order corresponds to the position of the screens in the list. You can add an interval (e.g. switch screens from 2 to 2) and activate the loop mode.

Change screen state

Add a link to another state of the same screen. The states allow you to animate your screens and create transitions.

You have the choice of selecting a state, going to the previous state or the next state. You can also choose a random state.

If you choose to go to the previous or next state, the order corresponds to the position of the states in the list. You can add an interval (e.g. skip states from 2 to 2) and enable the loop mode.

You can also add a delay, a transition time and a type of animation (acceleration curves, spring animation etc..)

Interact with a component

Create an action with any component depending on its characteristics.

When you choose this action, the next step is to visually select the target component. A blue banner appears: it prompts you to browse your project to select this component. It can be located anywhere in your application: use the breadcrumb trail to navigate through your application.

Once the component is selected, make the choice among all the proposed actions.

For each component, you have a choice of different actions. To learn more, please refer to the corresponding article for each component.

Interact with a database

Create an action on a Project database: the PandaSuite database for variable management, the Session Firebase component for data associated with users or an external database (Airtable) via the HTTP component. Please see each item for details of the actions available.

Open a URL

Add a link to a website, display a PDF file (hosted on an external server), open the default email... With this action, open a URL from your application: it opens in an external window.

Specify the URL in your action parameters.

💡This action opens an external window. If you want to embed a web page inside the application, you can insert it via the Web component (iframe) within a screen. Beware: not all websites allow this type of integration.

Share content (a URL, video, text, image, PDF...) with the native sharing action on iOS and Android devices, and the Safari and Chrome mobile browsers.

Source: Using Share Sheets on iOS and Android

Choose to share a URL or media. Add text of your choice.

Please note, the Text + URL option is not available for all apps, some will only display the URL.

Copy to clipboard

With this action, the user copies your chosen content to their clipboard. This can be text or media.

Save

The user can save a media on his device: on mobile, the media is saved in his gallery; on computer, the media is saved in his downloads.

Change foreground/background

Add a link to another foreground/background. This is especially useful for setting up your menus and navigation elements.

You have the choice to select a foreground/background, go to the previous foreground/background or the next foreground/background. You can also choose a random foreground/background

If you choose to go to the previous or next foreground/background order corresponding to the position of the states in the list. You can add an interval (e.g. skip states from 2 to 2) and enable loop mode.

You can also add a delay, a transition time and a type of animation (acceleration curves, spring animation etc..)

Change language

This action allows the user to change the language of the application among the languages you have defined. Read more: Language management

Mute/unmute sounds

This action allows the user to turn on or off the sound of their application. It is a global command, it applies to all sounds in your project. Upstream, you obviously need to have already integrated sounds in your project.

Back to previous screen or state

Add a link to the previous screen or state, regardless of the user's current position.

Enabling the Ignore States option will return the user to the previous screen even if their current screen has multiple steps.

Create a conditional action

With the component Condition, trigger a condition only if the condition is met.

You need to set your condition, evaluate it or choose an action.