Bravo Studio Help Center
  • Get started with Bravo Studio 👏
  • Get Started
    • 🚀Create your first app
    • 🌟Bravo introduction
      • Get ready to create your app with ChatGPT
      • Create an app
        • Creating an app with Figma
        • Creating an app with Adobe XD
      • Duplicate an app
      • Delete an app
      • Replace linked Figma file
      • The app page
      • Sharing your app
      • Add an editor to your app
      • Fonts
        • Adobe XD - Supported fonts
    • 📱Bravo Vision previewer
    • ✨Unlock power features to create interactive apps
    • 🎓Help and tutorials
      • 📖App guide tutorials
        • Sample app tutorial: Your first binding
        • How to build a Fitness app with Bravo, Xano and RevenueCat
        • Foodgram: Social content sharing
        • Expedition journal: Write and share your adventures
        • My Subscriptions: Display data based on device ID
        • My Notes: using user ID and email from Firebase
        • My Store: Sell physical products with Bravo and Stripe
        • Titan: How to create a Smart Home App with No-Code?
        • n8n: Building an expense tracking app in 10min
      • 📺Learn with videos
      • 📚Learn with articles
      • 🗃️Browse by app feature
        • Save or "bookmark" a page
        • Backend search with Airtable
        • Backend search with Xano
        • Nested lists (list within a list)
        • Create and edit user profile (Firebase + Airtable)
        • Skeleton loader
        • Create albums in your app with Bravo Infinite images
  • Set up your design
    • 🖌️Get your Figma ready for Bravo
      • 🗃️Structuring the design: the layer hierarchy
      • 🪄Bravo Tags: adding functionality to the UI elements
      • 🧱The container
        • Setting up a container on Figma
        • Setting up a container on Adobe XD
      • 📲App navigation
        • Setting up app navigation on Figma
        • Setting up app navigation on Adobe XD
    • 🔌Bravo plugin for Figma
    • 💾Sample design files
    • 🤓Best Practices
  • App components
    • 📒Bravo Tags Master List
    • 🚪Menus
      • Modal Menu
      • Modal pages
      • Tabs Menu
      • Pop Up pages
      • Slide Menu
    • 🍞Pages
      • Modal pages
      • Pop-up pages
      • Swipe page
      • Transitions page
      • Page reveal animations
      • Page tabs
      • 🔮Stateful pages
    • 📦Containers
      • Swipe to delete
      • Top bar
      • Carousel slider
      • Aspect ratio relative to screen
      • Sortable List
      • Layer (sticky element)
    • 👋Intro & Onboarding
      • Intro page
      • Post-login page (Onboarding)
    • ⌛Loading experience
      • Loading page
      • Custom loading page
      • No loading
      • Preload
    • 📝Form & input fields
      • 👁️Password Visibility Toggle
      • 🩷Stateful input
        • ☑️Checkboxes (Multiple select)
        • ✅Required Checkbox
        • 🔘Radio buttons (Single select)
      • ⏳Input time Interval
      • 📄Dropdown selector
      • 🎚️Slider control
      • 🗓️Calendar picker
      • 📄Send form input to a database
    • 💎Components
      • Autoplay Video
      • GIF
      • SVG Component
      • Web view
      • Web Components using AI
      • Web view communication
      • LottieFile
      • Lottie-animated component
      • Flexible text (Flexo)
      • Zoomable image
      • Component states
      • Stateful component (like button)
      • Setting up the backend of Stateful component (like button)
      • Haptic Feedback (Buzzz)
      • Progress bar
      • Rich text
      • Date, Time and Currency Formatter
      • Scrollable text
      • Text Lines & Truncation
      • Status bar
    • ⚡Mobile actions
      • Mobile Actions
      • Play audio
      • Record audio
      • Play video
      • Scan QR code (external URL)
      • Scan codes (remote action)
      • Search & filter
      • Refresh page
      • Share location
    • 📱App Icon & Splash Screen
    • 🗺️Map with markers
    • 📈Charts
  • Data and Backend
    • 🗂️Set up a no-code backend
      • Xano
        • Nested lists (list > list > detail page) with Xano
        • Create a bookmark functionality with remote actions and device ID with Xano
        • Multi-user setup with Xano
        • 🔒Setting up the Xano Log in Snippet
          • ♻️Refresh Token
      • Airtable
        • Nested lists (list > list > detail page) with Airtable
        • Sort list with Airtable
        • Connect multiple tables from Airtable to one app
        • Update Airtable's API key to Access Token
      • Backendless
      • Bubble
      • Notion
        • Getting data from a Notion table
      • Firebase
        • Getting data from Firestore
    • 💾Set up API requests
      • Set up from scratch
        • Airtable
          • Set up an API GET request for list page - Airtable
          • Set up an API GET request for detail page - Airtable
          • Set up an API POST request - Airtable
          • Set up an API DELETE request - Airtable
        • Xano
          • Set up an API GET request for list page - Xano
          • Set up an API GET request for detail page - Xano
          • Set up an API PATCH request - Xano
          • Set up an API POST request - Xano
          • Set up an API DELETE request - Xano
      • Using GraphQL body type
      • Set up with API wizard & importer
        • Using the Airtable API Wizard
        • Using the Xano API wizard
    • 🎲Variables
      • Built-in variables
      • Set Variable
    • 📚Data Collection & Binding: Complete Collection
    • 🗂️Pagination
    • 🐛Debugging API issues
      • ⚙️Debugging requests in the API Collection
      • 📲Event logger
      • 🔗Link property
  • Data binding
    • 🤝Data binding types
      • API binding types
      • Bind multiple API requests to one screen
      • How to connect my API to a mobile actions
      • Remote actions: trigger an API request with a UI element
    • 💡Display data in your app
      • Bind data to design for a list page
      • Bind data to design for a detail page
    • 🆕Create data from your app
    • 🗑️Delete data from your app
    • 🚦Conditional Visibility
    • 🎛️Conditional Actions
  • Integrations & Settings
    • 🖇️Deep Links
      • 🖇️Deep Links for Bravo Vision
      • 🖇️Deep Links for published apps
      • 🖇️Troubleshooting Deep Links
    • 🔔Push Notifications with OneSignal
      • How to get a Bravo page URL
    • ⚙️Firebase Configuration
    • 🔐User Authentication
      • 🔑Authentication with Kinde and Xano
      • 🧙🏽Authentication with OAuth 2.0
        • Using social logins to authenticate users
        • Using AWS Cognito to authenticate users
        • Connecting to Spotify API
      • 📲User login with Firebase
        • ✉️Email and password Login with Firebase
        • 📞Phone Login with Firebase
        • 🍎Social Login with Firebase
        • 👻Anonymous Login with Firebase
      • ⛓️Authentication with custom backend
        • Set up Xano as your user authentication backend
    • 💰Stripe: One-time Payment
    • 💬Chat: CometChat
    • 💸RevenueCat: In-app purchases and subscriptions
    • 📉Bravo Analytics
    • 📳Facebook App Events
    • 📊Google Analytics
    • 🌐Multilingual apps
    • 🕸️How to connect with Webflow API
    • 📡NFC connection
    • 🎯Admob
  • App Publication
    • 🚀Publishing your app
      • iOS Publication: Complete Process
        • 1. Generate Certificates, AppIDs and Provisions
        • 2. Get the IPA
        • 3. Upload IPA to App Store Connect
        • 4. Test your app on TestFlight (optional)
        • 6. App Store publication
        • 7. Updating an app in the App Store
      • Android Publication: Complete Process
        • 1. Create a Keystore File (optional)
        • 2. Get the Debug APK to install
        • 3. Install the Debug APK in your device
        • 4. Get the AAB (Android App Bundle) file to publish
        • 5. Google Play publication
        • 6. Updating an app in Google Play
      • Android APK Installation Guide
      • Rejection from the app stores
    • 🎛️Making changes to your app after publication
    • 🛍️Versioning
    • 🌟App rating alert
  • Good to Know
    • 🤔Troubleshoot
      • Errors when logging in
      • Errors when creating an app
      • Errors in API requests
        • Request timeouts on Bravo
      • Errors after importing
      • Errors in publication form
    • 🧑‍💻Manage your account
    • 💳Billing
      • Bravo Subscription Plans Overview
      • App Add-ons
      • Upgrading a plan
      • Downgrading a plan
      • App allowance
      • Invoices & payment method
      • FAQ
    • ❓FAQs
      • About Bravo Studio
      • Importing a design file
      • Bravo Vision
      • Bravo Tags
      • API & Data Library
      • Login & Account
      • Other Features
  • NEED SOME HELP?
    • 📖Bravo Support Guide
    • 🤝Join the Bravo community
    • 🤖Bravo Assistant
    • 👥Production support
    • 🐞Report an issue
Powered by GitBook
On this page
  • Where can conditional actions be used?
  • How to create conditional actions
  • Conditional actions, remote actions and variables
  • Example: confirm age to see content
  • 🎨 App design
  • 💾 Database
  • 🔌 API request setup
  • ⚙️ Binding the form and creating the conditional action

Was this helpful?

  1. Data binding

Conditional Actions

Create conditional actions depending on API response data

PreviousConditional VisibilityNextDeep Links

Last updated 1 year ago

Was this helpful?

Add different callback actions after an API request, depending on specific data items. This can be used to create different navigation flows depending on certain conditions, creating form validations, and much more.

Where can conditional actions be used?

Conditional actions can be configured after an API request that follows a user action. This could be a , or a triggered after a user presses a UI element.

In the Data Binding panel, a conditional action can be specified on one of those two cases, as a response action after the API request:

How to create conditional actions

Conditional actions can be defined based on these data items:

  • Data items that come in the API response bound to the conditional action. For instance, in case we bind a conditional action to a form submission, we can use the data included in the API response coming from the backend after submitting the form.

Once we have the data item we want to create the condition with, the following conditions can be used:

  • IS: the action will be executed if a certain value equals the selected data item.

  • IS NOT: the action will be executed if a certain value doesn't match the selected data item.

  • IS EMPTY: the action will be executed if the selected data item is empty.

  • IS NOT EMPTY: the action will be executed if the selected data item is not empty.

Finally, after creating the condition, the following actions can be used.

  • Show alert: a message inside an alert pop-up is displayed.

  • Go to page: the user navigates to a specific app page.

  • Go back: the user navigates to the previous app page.

  • Open URL: a URL is opened in an external browser.

  • Refresh: the app page is refreshed, including all the data coming from API requests.

These actions can also be created without a condition, for instance, in case we want to do the same action after submitting a form, regardless of the value of any data item.

Note that it is possible to create more than one conditional action. For instance, we could create conditional navigation flows to three different pages, depending on the value of a data item.

Conditional actions, remote actions and variables

Only information returned by the remote action can be used in a conditional action. As an additional constraint, data with a wildcard in the path (e.g. .data[]) will not be usable by the conditional action even if it comes from the remote action response.

The remote action can use the data coming from its bound context but it will be only available to the conditional action if the remote action returns that information as well

In this way the conditional action could use id from the list and success (as the remote action returned it) but it could not use do_a_thing because the remote action did not return it.

Example: confirm age to see content

In this section, we'll describe a use case example that can be implemented with conditional actions. We'll create a form, so the app user needs to input their age before accessing some specific content. The content will be restricted for users below 18 years old.

🎨 App design

This example consists of three screens:

  • A screen with a form, where the user needs to input their age.

  • A screen with the content that will only be accessible if the user is 18 or older.

  • A screen with an "access denied" message, where users below 18 will be redirected.

You can see and duplicate the example design by opening the Figma link below:

💾 Database

In this example, we use Airtable to create a simple database that takes the form submissions where users input their age. The table consists of two columns:

  • Age: this will be a numeric field where the user age is received.

  • accessStatus: this will be a text field, calculated with a formula based on the Age field value. Its value will be either AccessGranted or AccessDenied.

You can duplicate our example Airtable base below:

🔌 API request setup

To send the form data, a POST request with the following JSON body is needed:

{
	"records": [{
		"fields": {
			"Age": ${age}
		}
	}]
}

The request URL will depend on the database ID and name of your Airtable base. If you use the wizard, you can copy/paste the URL from one of the example requests.

Now, you'll need to test this API request by using some test values. Since the only variable we have in the request is ${age}, we'll need to provide a value for it:

Finally, we'll send the request. If the request is successful, we'll get back the data from our database, corresponding to the values the user submitted. In this case, we'll want to select the data for the accessStatus column, since we'll create our conditional action based on this data item.

⚙️ Binding the form and creating the conditional action

Once we have our data, it's time to bind our API request to the screen with the form and create the conditional action.

First, we'll bind the age input field to the corresponding variable in our API request:

As a On Success form response action, we'll select Conditional Action. We'll create the following conditions with the status data item. This is the item returning either AccessGranted or AccessDenied, based on our Airtable formula.

  • If status equals AccessGranted, then we'll create a Go to page action to the screen with the content that we want to limit by age.

  • If status equals AccessDenied, we'll create a Go to page action to the screen with the "Access Denied" message.

Bravo , for instance, user ID or email. These data items are not part in the API response, but are available by default in Bravo.

IS TRUE: the action will be executed if the selected data item equals true. In this case, the selected data item should be a .

IS FALSE: the action will be executed if the selected data item equals false. In this case, the selected data item should be a .

As an example, let's say you’ve a remote action in a list. The list items each have id and do_a_thing .If the remote action is bound to then the remote action would receive the correct values for those variables for each list item. If this request returns success and id where id is the value it was originally given then the values available to the conditional action would be success and id.

After importing your design and creating your database, you can create a new Bravo app project and use the to create some API GET requests targeting your database.

🎛️
built-in variables
boolean
boolean
http://example.com?id=${id}&do_a_thing=${do_a_thing}
Airtable wizard
form submission
remote action
LogoBravo Sample: Conditional ActionsFigma