Learn advanced mobile form building

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 mobile forms.

These can be used as a basis for customization.

Spoke Phone mobile 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 mobile forms.  The form snippets should be used as a guide for what form controls are available.

 

Next steps

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.