Once you are familiar with form design basics and customizing forms with the prebuilt snippets, you can begin to build up forms with many fields. When implementing longer forms you need to think about:
- Dependent fields: Make your users form experience easier and more guided by showing fields when a certain option is picked or by making a field required if a certain option is picked.
- UI ordering: In longer forms ensure that the order is defined.
Dependent Fields
Two dependent field examples are available within the sample form snippets
The Dependent Required Field snippet will make a particular field required when another field is completed. This is useful for situations where you have an optional field by default, but do expect it to be answered if another field is completed.
The Dependent Dynamic Field snippet will dynamically add a new field to the form when a specific option is selected on another field. This simple example can be extended to dynamically show as many fields as is required, and can also show different sets of fields when different options are selected.
UI Ordering
Ordering within the form display definition is usually the same order you declare but is not guaranteed. To ensure the fields are ordered the way you would like you should declare the order you wish the fields to show.
1. Enter a new line at the end of your Form Display Definition
|
'ui:order': - fieldname1 - fieldname3 - fieldname2 |
The list of fields are the names of the objects you have declared in the Form Data Definition
Supported field types and features
The included snippets and templates cover most of the features available in Spoke Phone custom forms.
These can be used as a basis for customization.
Spoke Phone custom forms use an implementation of react-jsonschema-form. The declaration language is formatted in YAML as opposed to JSON, meaning the implementation is not entirely the same as the original React component and may not support all the features you might find in the original React component. For reference, the components documentation can be found on Read the Docs.
NOTE: not all features are implemented in custom forms. The form snippets should be used as a guide for what form controls are available.