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
    • 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
    • References
      • 🦄Core concept
        • Jet UI
          • App settings
            • Appearance Settings
            • 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

    Was this helpful?

    Export as PDF
    1. Component Designer

    Right sidebar

    PreviousHow to work with component designerNextLayout

    Last updated 7 months ago

    🖍️
    Layout
    Auto Layout
    Conditional Visibility
    Component Responsiveness / Constraints
    Fills
    Borders
    Shadows
    Interactions