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 |
---|