Builder UI
Delay wrapper
Getting Started
Developer
FAQ
Overview
Gadgets
UI
Icons
Illustrations
Typography

Gadget Requirements

When adding a gadget, you should consider all of the following items.

  • Config Mode (UI)
  • Edit Mode (UI)
  • View Mode (UI)
  • Mobile Support (UI)
  • Accessibility (UI)
  • Conditional Visibility (UI,API,Forms)
  • Clientside Validation (UI)
  • Serverside Validation (Forms)
  • Document List View (UI)
  • Document List Filter (UI)
  • Document List Sort (UI)
  • CSV Download Support (API)
  • Export to PDF Support (PDF)
  • Anonymous Forms Support (UI)
  • Workflow Simulator Support (UI)
  • Workflow Notification Support (UI,Workflows)
  • Workflow Conditional Logic Support (UI,Workflows)

Creating a New Gadget

When creating a new gadget, there are a few main places to pay attention to:

builder-ui

Gadgets live in app/src/formbot/gadgets . Take a look at a simple one like the Text gadget to get a good sense of the structure. The manifest file ties everything together, and gadgets are registered in app/src/formbot/index.jsx.

builder-api-node

Gadgets are defined in server/gadgets and exported from server/gadgets/index.js. The main configuration options are as follows:

  • defaultValue: Pretty straightforward - a good place to put a sane default.
  • progressiveDisclosure: Defines the rules specific to this gadget for progressive disclosure.
  • validateShape: Defines the required structure of the value.

forms-api

Gadgets live in server/lib/gadgets and exported from server/lib/gadgets/index.js. There is unfortunately a lot of repetition in the gadget definition defined here and in builder-api-node. One big difference is that gadgets defined here accept a validations key for server-side validations. However, be forewarned that server-side validation error messages do not currently get rendered by the client app.