Intro

The create view presents users a form used to generate new objects and object details. It is typically triggered by “create…” or “add…” actions. The create view is presented in a full-screen dialog on mobile devices or modal dialog on tablets. In the dialog, users are able to input the information related to the object they are creating.

Structure

Create view follows the basic structure of full-screen dialog. Based on object type and object detail, different types of data entry components are used. Hierarchy of data entry components should reflect the hierarchy of object detail.

A. App Bar

App Bar contains:

  • Screen title specifies the object it’s creating.
  • “Close” icon on the left to discard the new object without saving
  • “SAVE” button on the right to generate the new object based on information filled in this dialog.

B. Key Information

The data points that define the foundation of this new object are considered key information. This contains properties that help users to identify the object (such as the title of a new task). Usually, at least one of the key information is required for creating the object. The key information should be located at the top of the dialog, so users can start with this first. In some cases, key information is pre-populated, and the user may or may not be able to edit these values. The type of information that appears in the key information section will differ depending on the use case.

C. Property

Property details appear after the Key Information section to gather additional information for 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 area is at the bottom of the dialog. It includes elements such as notes and attachments.

Control Types

Here are some commonly used controls in create view.

Text Input

Simple Property Form Cell

Simple property form cell is best for gathering freestyle text input value for a certain property. The value is expected to be relatively short, and without line breaker.

Note Form Cell

Note form cell is best for gathering long freestyle text input, such as note or comment. Users can use line breaker as they want.

Select

Chip Form Cell – Single or Multiple Selection

Use chip form cell when users need to make selections from no more than 8 pre-defined values. Use choice chip form cell for single selection. Use filter chip form cell for multiple selection. If the number of values is more than 8, or the text of value is too long to display within chips, use a list picker form cell instead.

List Picker Form Cell– Single or Multiple Selection

A list picker form cell is used when the property has long values or more than 8 possible values. It is also used when the number of values is dynamic or unpredictable. With a list picker form cell, the user is able to search and select the data entry.

The selection on a list can be either single selection (use radio buttons) or multiple selection (use checkboxes), based on the definition of the property.

If a list is multi selection, the selections can be grouped in a “Selected” grouping to enable users to deselect without having to scroll down a large list.

Switch Form Cell

Use a switch form cell when the property has only two mutually exclusive states—on and off.

Data Range

Slider Form Cell

A slider form cell enables the user to set the maximum value within a specified numerical range.

Time Picker Form Cell

time picker form cell is used to select time based data.

date picker is used to set a specific date or time. A time duration picker is used to set a duration.

Attachment

Attachment is usually located at the end of the create view so that this section can descend freely as the user attaches more files.

Behavior & Interactions

Trigger

Create view is triggered when users tap on “add” icon or create/add menu options. The trigger should state clearly what object it is going to create.

Actions

“Close” Icon

The “close” icon closes the dialog without having to commit. When nothing has been entered by the user, the dialog will be closed directly. If there is unsaved input, a confirmation dialog will show up asking users to confirm their action.

“SAVE” Button

The “SAVE” button creates the object based on user input in create view. By default, display the newly created object’s detail page after save so that users can see their changes.

If there’s no individual detail page of the object being created, show the parent page after save (for example, taking reading for an equipment). Ideally, scroll to the part where user’s new changes are reflected.

Navigation

The navigation within the create view is commonly used to drill down from a list picker form cell into a value list. The animation transition of the navigation should be a push to the next screen.

The app bar title in the new screen should be consistent with the Label in the list picker form cell. Replace “close” icon with “back” icon to navigate back. There is no “APPLY” button in the drill down page due to all changes being auto-saved. If search function is available, use the expandable search and show the “search” icon in the app bar.