Updated: May 21, 2019

Create & Edit

Intro

The create and edit pattern is used to generate or update objects and is presented to the user via a modal. It is typically triggered by the create or edit actions on the navigation bar. The pattern may include a variety of combination of form cells to allow users to input information related to the object.

Behavior & Interaction

Launch

The create view modal is usually triggered by tapping the “+” button on the nav bar, which presents the user with the option of adding a new item to the current screen.

Create/Edit Modal

A modal containing various form cells will be presented to the user to fill out the information needed to create the object. The edit modal should generally be identical to the create modal to avoid confusion.

Feedback

After the user taps on the “Save” or “Done” button on the top right of the create modal, feedback should be provided to the user. Display a toast message to communicate to the user that the object has been created or updates have been saved.

Structure

Form cells within the create modal are grouped based on different types of data.

A. Nav Bar

The navigation bar contains the screen title and actions for user to save the data or exit the modal by tapping on the cancel button.

B. Key information

This section allows the user to input the most important information about the object. Some input fields may set to be required in order to create the object. In some cases, input fields may be pre-populated depending on if the object is linked to other objects.

C. Property

The property section appears after the key information section to gather additional information of the object. In general, one form cell is used for one property. Cells can be grouped together based on the information hierarchy of the object. Choose the form cell that best serves the data type.

D. Accessory

The accessory section is found at the bottom of the modal. It may include elements such as notes and attachments.

UI Components

Title Form Cell (FUITitleFormCell)

A title form cell allows the user to enter a short string of information into a single-line input field with fixed height. If inputting multiple lines of text are required, use a note form cell instead.

Prompt text should be displayed clearly and concisely to communicate the purpose of the input field (e.g., “Title” or “Name”). Vague directions should be avoided (e.g., “Tap to Write”). If necessary, the content in text fields can be pre-populated. To learn more, see Text Input.

Text Field (FUITextFieldFormCell)

When the modal contains a large number of text input fields, such as a form used to generate a new contact, using the text field component is recommended. This component displays the label of the input field to provide users a better understanding of the purpose of each entry. The text field component has a stacked variant and a single-line variant. Select the appropriate variant depending on the length of the content and the screen size you are designing for.

Read more about the text field in Text Input.

Note Form Cell (FUINoteFormCell)

A note form cell provides additional space for multi-line text entry. If additional accessories are present below the note form cell (such as Attachments), the height of the cell should be fixed, and a scroll bar will allow users to see the hidden content. If the note form cell is the bottom-most component in the create pattern, the height of the cell can be flexible to grow downwards as the user inputs content into the cell. To learn more, see Text Input.

List Picker

A list picker allows for single-selection or multiple-selection among values within a defined category—for example, to choose a specific project when creating a new task. A search bar may be incorporated to assist the user to locate the item. Search to select provides similar functionality and may be used for selecting multiple objects.

To learn more, see List Picker or Search to Select.

Pickers

Pickers allow the user to make a selection within a short  and predictable list of values. A date picker can be used for the user to select a date, a time in a day, or a combination of both. The default value of a date picker is usually the current date and time. To learn more, see Pickers.

Form Cell with Buttons

The form cell with buttons component allows the user to quickly select from a small set of values by tapping on the buttons. It is typically used for single-selection, and only contains short text strings. To learn more, see Form Cell with Buttons.

Switch

A switch is used when a property has only two mutually-exclusive states—either on or off. In some use cases, when a switch is set to ‘on,’ additional fields can be displayed for the user to input data. To learn more, see Switch.

Attachments

The attachments component allows the user to upload items such as images, video and audio files. Tapping on a thumbnail will display a preview of the attachment. To read more, see Attachments.

 

Guidelines

Edit

The edit modal generally looks identical to the create modal. It may provide an option to perform a destructive action, such as delete, on the current object.

 

Pre-filled Values

Depending on where the user triggers the create modal in the workflow, values can be pre-filled in the form to expedite the object creation process.  For example, if the user triggers a create modal from a project detail screen to generate a new task, the value of “project” should be pre-populated and is recommended to be not editable by the user.

Required and Optional Fields

To indicate that an input field is required, an asterisk should be included next to the label. On the top of the form, a line should explain that asterisks indicate required fields.

If an input field is optional, display the word “optional” in parentheses next to the label.

In forms with some required fields, all of the required ones will be indicated. However, if there are fewer optional fields, only the optional ones will be indicated.

(Note: remove this section from text input)

Error Handling

When an error occurs while the user inputs a value, an inline validation cell should be used to communicate the cause of the error. It should be placed under the input field and explains the error clearly with suggestions to correct the mistake.

Regular Width

In regular width, if the create pattern is triggered in a list report where there is only one action under the “+” icon, it should be displayed in a popover.

When there are multiple options behind the “+” action button, the form sheet modal should instead be used to present the create pattern. For further details, see Modals.

Resources

Text Input

List Picker

Search to Select

Picker

Switch

Form Cell with Buttons

Attachments

Modals

Error Handling