Buzzy Documentation
  • Welcome to Buzzy
  • Getting Started with Buzzy
    • Getting Started Guide
      • 1. Starting with Buzzy AI
      • 2. The Buzzy Workspace
      • 3. Create a new app
      • 4. Preview and edit your app
      • 5. Manage your app
      • 6. Import your app to Figma
      • 7. Using Buzzy with Figma
      • 8. The Buzzy Figma plugin
      • 9. Creating a simple app
      • 10. Screens and navigation
      • 11. Forms, fields and data
      • 12. Data-driven menus & content
      • 13. Data edit and delete
      • 14. Search, sort and filter
      • 15. User login and registration
    • Buzzy AI or Figma first?
  • Working with Buzzy
    • Buzzy AI
      • About Buzzy AI
      • Kickstart with AI
      • Enhance with Figma
      • Extend with Code
      • Example prompts
      • Tips
      • Troubleshooting Buzzy AI
      • AI tokens and pricing
    • Buzzy for Figma
      • About Buzzy for Figma
      • Learning Figma
      • Creating a new app directly in Figma
        • Step by step version
      • Automarkup
      • Responsive layouts
      • Responsive layout checklist
      • Overflow and scrolling
      • Forms and fields
      • Logging users in to your app
      • Theming
      • Troubleshooting Buzzy for Figma
      • Plugin error messages
    • Buzzy Deployment & App Stores
      • Setting up your custom Buzzy app
      • Connecting your own server
      • Apple & Google App Stores
    • Buzzy Marketplace
      • Buzzy Accreditation
    • Buzzy Project Guide
    • Buzzy App Examples
      • Buzzy Templates
      • AI-Powered Chat App
      • AI-Powered Custom T-Shirt App
      • AI-Powered Strategy App
      • AI-Powered Stock Portfolio App
      • Golf Course Finder
      • Personal Finance App with Figma AI
    • FAQs
  • The building blocks
    • Datatables, Fields & Data
      • Introduction to Fields
      • Basic Fields
        • Text
        • Number
        • Date
        • Location
        • Toggle
        • Checkboxes
        • Checklist
        • Selectlist
        • Rating
        • Attachments
        • Images
        • Signature
        • Audio Recording
        • Embedded Link
      • Advanced Fields
        • Formula
        • Sub tables
        • Linked Table field
        • Button
        • Teams
        • Payment
        • Notification
        • Event
        • User Vote
      • Display Fields
        • Header
        • Display Text
        • Image
        • Divider
      • Metadata Fields
        • Author Name
        • Author Phone
        • Submitted
      • Filter Controls
        • Viewers
        • Tags
        • Condition
      • External Fields
        • IBM Connections File
        • Box File
      • Sort Fields
      • Formulas
      • Datatable to Datatable Relationships
      • Security and Access Control
      • Displaying a field based on the values of other fields
      • Hiding a field based on role using a display formula
      • Importing data from a text file
      • Importing data from a URL
      • Import data from Datatable
      • Export data using Chrome
      • Export data in Browser
      • Export data using Safari
      • Datatable Field Type - Cheat Sheet
      • Troubleshooting Fields & Data
    • Code widget (custom code)
      • Code Widget Fields - Advanced Guide
      • New Async API + React HTML Components
      • Examples
        • Image Galley Slideshow
        • Ratings Average and Distribution
        • Event Locations Map
    • Analytics
  • Troubleshooting
    • App Error Codes
      • Action Error
      • App Not Found
      • Component Missing
      • Component Not Set
      • Component Settings Error
      • Datatable Not Found
      • Datatable Not Set
      • Field Not Found
      • Field Not Set
      • No App Selected
      • No Context Name
      • No Screens Found
      • Runtime Exception
      • Screen Not Found
      • Screen Not Set
    • Troubleshooting Buzzy AI
    • Troubleshooting Figma
  • REST API
    • Buzzy REST API
      • Integrating 3rd party applications
      • REST API
        • login
        • createappwithprompt
        • MicroApp Data Operations
          • microappdata
          • microappdata/row
          • insertmicroapprow
          • updatemicroapprow
          • removemicroapprow
          • microappchild
        • User & Organization Operations
          • userid
          • insertteammembers
          • teammembers
          • insertorganization
          • insertteam
        • enforceteammembership
      • Node.js API Client
      • Datatable Rules
      • Datatabledata Tutorial
      • Integrating with Mailchimp
      • Python Access Datatable
  • Advanced Deployment Settings
    • Installation
      • Pre-installation Planning
      • Deployment
        • Introduction to deployment
        • Minikube install guide
        • AWS ECS Fargate install guide
        • HCL Connections install guide
        • Azure AKS install guide
        • Windows container install guide
      • Buzzy settings
      • Whitelabelling Buzzy
      • Certificates
      • Release Management
    • Performance and Reliability
    • Security
      • Platform
      • Users and Roles
      • Datatables
      • Audit Trail
Powered by GitBook
On this page
  • Forms
  • Fields
  • Field modes
  • Summary
  • Value
  • Read
  • Edit
  • Insert
  • Additional mode: Filter
  • Additional mode: Image
  • Views
  • Submitting a form
  1. Working with Buzzy
  2. Buzzy for Figma

Forms and fields

Core to Buzzy's ability to work with data is how you define forms and fields in your Figma file.

PreviousOverflow and scrollingNextLogging users in to your app

Last updated 2 months ago

This is a high-leve introduction to working with Buzzy forms and fields only. For a detailed look, check out

Also be sure to go through the '' - this specifically introduces the concepts described here with working examples.

Forms

The Buzzy plugin lets you define forms and fields directly in your Figma design. When you publish your app, they render as working forms, fields and real data.

Just as with other markup languages, a Form is simply a wrapper around a collection of editable fields and data.

If you want to render simply app data as (non-editable) content and values, you can do so without a Form. You can either rely on the currrent screen context, or to render a specific subset of results from a repeating set of data (eg a list of articles), you would use View (see below) instead.


Fields

Buzzy fields are the containers for data nested inside a Buzzy datatable. They include a variety of attributes (based on their type) and each includes an interface that will display in your published app to act as a way to capture, edit and read the data values contained in your data table.

You use the Buzzy Figma plugin to define the elements in your design that will act as these fields when published.

Field modes

As a general rule-of-thumb, when rendering the data value of a field, use 'Summary' mode, except for date fields, where you'd use 'Value'.

Summary

Use this inside Views or anywhere you want to render the field data as a simple preformatted value. This is the simplest version, and is what you'll mainly use when rendering data from most fields.

Value

Similar to Summary, but depending on the field type you may get options to format how it renders - for instance date fields can be formatted as a string using a structure such as `D MMM, h:mm a`.

Read

This renders the field as a disabled input. You'd generally only use this in a form alongside other edit or insert fields, with the difference being you don't want the user to be able to edit this particular one.

Edit

Edit mode can only be applied to fields/inputs where they exist inside a layer defined as a Form in Edit mode. This will render the inputs in an editable format. Buzzy updates the data model instantly when a form is in Edit mode - meaning in this case the fields update their data values instantly (on blur) and the parent Edit form does not need to be submitted.

Insert

Insert mode can only be applied to fields/inputs where they exist inside a layer defined as a Form in Capture mode. This will render the inputs in an editable format, but the form must be submitted for then values to be saved to the data table (see below).

Additional mode: Filter

Filter mode is a special type of field mode that is only available for Text and Formula fields when they are wrapped in a Buzzy Filter component. This is like a special type of form used to construct a search or filtering interface. The fields (Text or Formula) render as editable inputs that are used to assign a search (or filter) term to the Filter component.

Additional mode: Image

This is a special mode available only to Buzzy plain text fields, where you may want to add an image to your design via an external url to the image file. In this case, Buzzy will convert the value of the text field (assumed to be a url to an image file) and render it as an image object, rather than as an input or string.


Views

Views are used to obtain a specific set of results from a datatable, for instance to build up a dynamic navigation menu. You might define a View that pulls a subset of data from an 'Articles' data table, and use this to create a dynamic menu of articles in your app.


Submitting a form

A Buzzy action of type 'Submit' is generally added to a button nested inside a Form container in Capture mode. The action will submit the current form to the Buzzy datatable.

Datatables, Fields & Data
Getting Started Guide