LogoLogo
  • 👋Welcome
  • 🎓Academy
    • Getting Started
    • Connecting Data Sources
      • Jet Database
      • Google Sheet
      • Airtable
      • Custom API Action (Zapier)
      • Firebase
    • Data Editor
      • Data Editor Interface
      • Data Source Settings
      • Prepare & Organize Data
      • Edit Data
      • Field Types
      • Related Data
      • Lookups & Rollups
      • Files & Storages
      • Data Blending Intro
    • App Builder
      • Builder and User Modes
      • Pages and Overlays
      • UI Builder
      • Bind Data to UI
      • Bind Filter to Table
      • Bind Input Field to Table
      • Bind Form to Table
      • Bind Related Tables
      • Bind across Pages
      • Bind from Page to Modal
      • Calculcation & Formulas
    • Team & Users Permissions
    • Automations
    • Environments
    • Custom API Collection
    • Nested Filters
    • Built-in Approval Flow
    • Create Multi-Step Forms
    • Component Designer
    • Build Apps Together
      • Custom CRM
      • Internal Tool
      • Customer portal
      • Supabase CRM
    • Import Figma design to Jet
    • Authentication
      • Supabase Auth
      • Firebase Auth
      • Xano Auth
  • 📣What's new
  • 🔐Data Privacy & Security
  • 🙌Join the Community
  • 🐞FAQ and Troubleshooting
    • A data resource is failing to sync
    • Data is not loading
    • How to clone the whole app?
    • Why new SQL tables are not showing?
    • How to restrict input in a text field?
    • Troubleshooting Django integration
    • How to Connect to Slack Channel
  • Guides
    • ⚡Quickstart
    • 🛠️Building an Internal Tool
      • Connect your Data
      • Configure Data
      • Build UI
      • Run Actions
      • App Customization
      • Publish your App
    • 👥Creating a Customer Portal
      • Prepare your Data
      • Generate the App
      • Set the Layout
      • Link Related Tables
      • Customize your Portal
      • Users & Permissions
    • 🤿 Deep dives
      • Single relations
      • Conditional Visibility
      • Reading data from API
      • Reading data from SQL
      • Generate Invoice or Document
        • Document
    • 📧Send Emails
    • 🎨Pixel Perfect App
      • Designing your component
      • Adding Images
      • Apply Frame to Image
      • Pass values to Image
      • Pass values to Text Field
      • Binding data
      • Hide elements
      • Support multi-screens
    • 🚀UI in seconds
    • 🪅Figma design into a web app
  • AI Custom Components
    • Enhance Your Prompts with AI Assistance
    • Enhancing Your Prompts with Images
    • Auto-Generate Parameters and Actions
    • Edit Your Custom Code with the Custom Component Builder
    • Import and Iterate on Your Existing Components
  • References
    • 🦄Core concept
      • Jet UI
        • App settings
          • Appearance Settings
          • Adding Custom Fonts
          • Theme & Styles
          • Menu
          • App Info
          • Custom Domain and Transactional Emails
          • Sign Up
          • Features
          • Custom Scripts & Styles
      • Intro to Data
      • Navigation
      • Menu Conditional Enabled
      • Set Variable Action in Menu
      • Sharing your app
        • Invite by Email
        • Invite by Link
        • Creating a Public Page
    • 🧰Data Sources
      • Database resources
        • Instant Installation
        • Docker Installation
        • Python app Installation
      • Jet Tables
        • Storage & Files
      • Rest API
        • Basic Authentication
        • Bearer Token
        • OAuth 2.0
        • Jet Requests Auth
      • Firebase / Firestore
        • Syncing Firebase Data Using Functions
        • Firestore
        • Import CSV into Firebase
        • Firebase Cloud Storage
        • Realtime DB
        • Visualize Subcollection
      • Google Sheets
        • Working with Data
      • Airtable
      • MongoDB
      • Amazon Athena (AWS Athena)
      • Databricks
      • CockroachDB
      • ClickHouse
      • GraphQL
      • Supabase
      • Django
      • MySQL
      • MariaDB
      • Xano
        • Create APIs on top of your Xano database
        • Connect Xano to Jet Admin
        • Upload files to Xano
      • SmartSuite
      • Stripe
      • Hubspot
      • Intercom
      • Zendesk
      • Salesforce
      • Slack
      • Zapier
      • Webflow
      • Amazon S3 and S3 compatible storage
      • Google Cloud Storage
      • SendGrid
      • Twilio
      • Mixpanel
      • Snowflake
      • OpenAI and Jet Admin
      • Supabase Storage
    • 🔗Binding & Values
      • Binding Components
      • Extract & Pass Values
      • Binding two related Tables
      • Binding Form to Table
      • Binding Filter to Table
      • Binding Field to Table
      • Binding across Pages
      • Binding across Overlays
    • 🔠Variables
    • 🌈Basic Columns
    • 🔢Computed Column
      • Relations
      • Rollup Column
      • Lookup Column
      • Formula
        • Setting up promotional email
        • Create Custom fields using Formulas
        • Parse JSON Fields
        • Math Column
        • List of Functions
      • JavaScript Column
      • Calculated values in column
    • 🎨Design & Structure
      • Customizing Pages
        • Create a New Page
        • Copy the Page
        • Customize the Page
        • Page Values
        • Link Pages
        • Load Data (Page Query)
        • Page Opens Action
        • Home Page
      • Components
        • Lists
          • Table
            • Grouping records
            • Filters (built-in)
            • Table Actions
          • Map
          • Kanban
          • Calendar
          • Gallery
          • Carousel
          • Timeline
        • Filters
        • Form
          • Create a Form
          • Customize a Form View
          • Examples
          • Page
          • Select
          • Multiple Select
        • Fields
          • File
          • Multiselect / Chips
          • Checkbox
          • Date & Time
          • Date Range
          • Image
          • Text
          • Password
          • Number
          • Rating
          • Slider
          • Range Slider
          • Steps
          • URL
        • Charts
          • How to Set Up a Chart
            • Chart Appearance
            • Drill Down
          • Line
          • Bar
          • Pie
          • Doughnut
          • Single value
        • Text
        • Buttons
        • Button Group
        • Custom Notifications
        • Component Actions
        • Detail
        • Layouts
          • Containers
          • Accordion
          • Collapse
          • Columns
          • Overlays
            • Customizing Overlay
            • Overlay Parameters
            • Building dynamic workflows
          • Slideout
          • Tabs
          • Vertical Tabs
        • HTML Component
        • JavaScript component
          • Create a JavaScript Component
          • Set JavaScript Component Inputs
          • Use JavaScript Component Outputs
        • File PDF Viewer
        • QR Code
        • Bar Code
        • Scanner
        • Signature
        • IFrame
        • Alert
        • Accordion
        • Chips
      • Field Values
        • Extract values from components on the Page
      • Nested Filters
      • Advanced Filters
      • Sort
      • Group
      • Actions
      • Dropdown Popups
      • Export
      • App Theming
      • Global CSS & JS
      • Analytics or Live chats
    • 🧮Data Editor
      • Syncing Schema and Data
      • Managing Columns
      • Making API requests
        • Endpoint Response Outputs
        • Response Transformer
        • Sorting data
        • Pagination
          • Page-based pagination
          • Offset pagination
          • Cursor based pagination
      • Making SQL queries
      • Text to SQL
      • Storages
      • File Storage and Uploading
        • Jet Admin Storage
        • Data Source Storage
      • Cache Frequency
      • Many-to-many relationship
    • 🧞‍♂️Visibility rules
    • ℹ️Conditionals
      • Conditional Visibility
        • Examples
          • Hiding a component until a row is selected
          • Hiding a component until a row with a certain value is selected
          • Hiding a component using the Page Value, User, or Team Property value
          • Hiding a component using multiple conditions
      • Conditional Disable
      • Conditional read, add, edit & delete
    • 🔐Users & Permissions
      • Sign In/Sign Up
        • Auth0 SSO OAuth 2.0
        • Auth0 SSO SAML2
        • Azure AD SSO OAuth 2.0
        • Okta SSO
        • Google SSO OAuth 2.0
        • Google SSO SAML2
        • Custom SSO OAuth 2.0
        • API calls with SSO token
      • Roles in Permissions
      • User-specific Permissions
    • ▶️Preview & Publish
      • Embed Apps
        • Embedding App using a generated link
        • Embedding App using iFrame/HTML
    • ⚙️ Automations & Workflow
      • Triggers
      • Steps
        • Actions
        • Rules
      • Inputs, Outputs, Parameters
      • Test & Debug
      • Approval Workflow
      • Success/Error Actions
      • Iterators
      • Zapier Workflows
    • 👨‍💻Javascript
    • 💠360 Data/Data Blending
      • Sync Connection
      • Blending the Data
      • Sync Options
    • 🔤Localization
      • Account Settings
      • Adding Language to Jet Admin
      • End-user Localization
    • 🎚️Version Control
      • Cross-Instance Backup Restoration
    • 📖Logs
    • 🪂Other Features
      • Environments
        • Merge Environments: Jet Tables and Custom Components
      • Audit logs
      • Manage your subscription
      • Custom domain
      • Update to a new version
    • 🛫Jet Admin API
      • Interacting with Jet Admin API
        • Get API Token
      • Users API
      • Teams API
      • Projects API
      • Pages API
      • HTTP requests API
    • 🔐Authentication systems
      • Jet Auth
      • Firebase Auth
      • Auth0
      • Supabase Auth
      • Token-based Auth
      • Xano Auth
    • 🎇Integrations
  • 🖍️Component Designer
    • How to use pixel-perfect components
    • How to work with component designer
    • Right sidebar
      • Layout
      • Auto Layout
      • Conditional Visibility
      • Component Responsiveness / Constraints
      • Fills
      • Borders
      • Shadows
      • Interactions
    • Frames and Groups
    • Action components
    • Component and layer states
  • 🖼️Import Figma Design
    • Install Plugin
  • DEPLOYMENT
    • ⛅Cloud
    • 🏎️Self-hosted
      • SSO on self-deployed Jet Bridge
      • Using self-deployed HTTP proxy
      • Common Problems
      • Configuration
    • 🖥️On-premise
      • Deploy On-Premise Jet Admin with Docker
      • Update
      • .env configuration (local host)
        • Custom Domain Configuration on-premise
        • Email Sending Configuration
        • Nginx Configuration
      • Service Health Check
      • Common Problems
      • Superuser access
    • ⛺️ Database Heroku deployment
Powered by GitBook
On this page
  • Action types
  • Data
  • Navigation
  • Overlays
  • Interaction
  • Advanced
  • Action confirmation dialog
  • Run Operation
  • Navigate to Page
  • Open URL
  • Open/Close Overlay
  • Open Actions Dropdown
  • Run Component Action
  • Show Notification
  • Run JavaScript
  • Export Data
  • Download File
  • Copy to clipboard

Was this helpful?

Export as PDF
  1. References
  2. Design & Structure

Actions

A detailed overview of the types of Actions.

PreviousGroupNextDropdown Popups

Last updated 6 months ago

Was this helpful?

Action is an operation that you can perform in Jet Admin. Visually, the action is a button in the Jet Admin interface.

To add an action you need to

  1. Select a Button component

  2. Drag and drop it on the page

Action types

There are a variety types of actions that are split into sections:

Data

  • Run operation. Perform any CRUD operation or custom API/SQL query.

  • Export Data. Export data from the table.

  • Import Data. Import data to a collection.

Navigation

  • Navigate to page. Passing values and switching between pages.

  • Open URL. Open the link in a new or the current tab.

Overlays

Interaction

  • Copy to Clipboard. Copy data to your Clipboard.

Advanced

  • Download File. Download the file from the API call.

Run workflow

Action confirmation dialog

You can set up a confirmation dialog that will appear before executing an action.

To add a confirmation dialog, use the "Confirm on execute" section of the right-side panel

You can define the Title, Description, and button styles for your confirmation dialog.

Run Operation

Perform operation with your resources, such as CRUD operations with Databases, operations with third party services, APIs and frameworks, and operations with storages.

Creating an operation in a button

  1. Click on the Button

  2. Go to the Click Action

  3. Choose Run Operation

  4. Choose the Resource

  5. Choose the Action

Operations with storages

You can perform these actions with storages:

  • Getting private file URL

  • Uploading a File

  • Getting list of objects

  • Creating a directory

  • Removing an object

Navigate to Page

You can pass values and switch between pages. To do so, follow the steps:

  1. Click on the Button

  2. Go to the Click Action

  3. Choose Navigate to Page

  4. Choose the Link of the Page

Open URL

Opens any website URLs, use Action specified as Open URL.

  1. Click on the Button

  2. Go to the Click Action

  3. Choose Open URL

  4. Click on the URL icon to change the URL of the Page

Open/Close Overlay

You can close the pop-up overlay window. To do so, follow the steps:

  1. Click on the Button

  2. Go to the Click Action

  3. Choose Close Overlay

Open Actions Dropdown

The Open Actions Dropdown feature allow you to create a list of multiple separate actions that will appear in a drop-down list. This dropdown menu facilitates triggering queries and other actions with ease.

  • Multiple Actions: Create a list of distinct actions that users can select from a dropdown menu.

  • Ease of Use: Simplify the process of triggering various actions from a single interface element.

  • Manual Configuration: Customize the actions list according to specific requirements.

Run Component Action

You can act on a component, such as updating data or clearing the form after submitting.

Show Notification

You can show custom notifications.

Run JavaScript

To execute JavaScript code upon clicking a button, follow these steps:

  1. Click on the button.

  2. Navigate to the Click Action.

  3. Select "Run JavaScript."

  4. Type your JavaScript code and return the result.

You can Insert input values from other components and use it further within your JavaScript code. To do that, click 'Insert Input' and choose the needed component.

Export Data

You can export data from the table. To do so, follow the steps:

  1. Click on the Table

  2. Go to the Actions Tab

  3. Scroll down to the Header Actions

  4. Click on the New Action

  5. Choose Export Data

  6. Choose the Resource and the Collection

Download File

  1. Click on the Button

  2. Go to the Click Action

  3. Choose Download File

Now, let's define the Resource and Operation. To do so, follow the steps:

  1. Click on the button

  2. Pick a resource

  3. Choose an operation to write SQL queries

  4. Write the SQL query

  5. Click on the Run button

  6. Click on the Save button

This will generate a JSON file with the data.

Copy to clipboard

You can set up actions to copy data to the clipboard. This works with all components. To configure it, follow the steps:

  1. Go to the Actions Tab

  2. Go to the Row Click

  3. Choose Copy to Clipboard

  4. Click on the Set up with Formula icon

  5. Choose Email

. Create a sub-menu of actions.

. Open or close the overlay.

. Show custom notification.

. Act on a component, such as updating data or clearing the form after submitting.

. Set a value to a specific Page Variable or Page Variable .

. Execute a JavaScript code.

. To scan a graphic code.

. Fires a sequence of events.

🎨
Open Overlay/Close Overlay
Show Notification
Run Component Action
Scan QR/Bar Code
Run Workflow
Overlay
Component Actions
Custom Notifications
Open Actions Dropdown
Run JavaScript
Set Variable
Confirmation dialog example
Storages operations