Show a modal or sidebar form

Show a form as a modal or in the sidebar, and return the input

by @pixiebrix

How to Use

This Brick allows you to create modal or sidebars. You can use these to ask for users’ input or to display the results of your extension.

After adding this brick to an extension in the Page Editor, the right side (Data panel) of the page editor will become a preview tab.

Clicking on the elements in the preview tab will allow you to select between each of the fields of the form.

The Form Title and Form Description inputs display at the top of the form, and can be disabled to save space if needed.

Below these inputs, the input area changes depending on which field of the form you have selected.

By default there is only one field but more can be added with the + Add new field button, and they can be moved around with the Field Order buttons lower down, which mark the end of inputs specific to that field.

Each field has a Name which is the name that field’s data will be stored in, a Label to tell the user what that field is (optional), a Field Description for smaller details under the field (optional), a Input Type which determines the type of field (text, date, dropdown, check etc), and Required Field for if the field is needed to submit the form.

Under the field inputs there is an input to allow canceling the form, an input to allow changing the text on the submit button, and an input that determines if this form pops up over the page or in the sidebar.

Use Cases

  • Creating modals to request information from the user: checkboxes, dropdowns, textfields etc
  • Creating side-bars to display information, adding buttons with actions, or include iframe data from external resources

Inputs

Name Required Type Description
schema object The JSON Schema for the form
location string The location of the form (default='modal')
uiSchema object The react-jsonschema-form uiSchema for the form
cancelable boolean Whether or not the user can cancel the form (default=true)
stylesheets array Stylesheets will apply to the form in the order listed here
submitCaption string The submit button caption (default='Submit')
disableParentStyles boolean Disable the default/inherited styling for the rendered form

Outputs

Name Required Type Description

Related Tags