Simple Objects (Create, Edit)

Intro

Use the flows described below to create and edit simple objects. All the information for a simple object appears on a single page. The flows use standard message and draft handling. For the delete flow, see Delete Objects.

Create

Full Screen Layout

If your app runs in full screen mode, meaning that one page is shown at a time, the standard create flow is as follows:

Create a simple object (full screen layout)

Create a simple object (full screen layout)

  1. In a list report, the user chooses Create.
    An empty object page appears with the title New <object type> (here: New Leave Request). The footer toolbar contains the finalizing Create action and Cancel.
  2. After entering all the data, the user chooses Create.
    You have the following flow options, depending on your use case:
    1. The standard flow shows the object in display mode and a message toast.
      If required by the use case, you can also keep the object in edit mode.
    2. If your use case involves creating several objects in succession, you can also navigate back to the list report. The message toast is shown on the list report and an indicator highlights the new item.
  3. Choosing Cancel opens a confirmation popover and the user can opt to discard the draft. In this case, the system navigates back to the list report.

Flexible Column Layout

If your app runs in the flexible column layout and the user chooses Create on the object page, the display is as follows:

If the user confirms Cancel, the second column is closed.

Edit

If only a few sections are editable, set only these sections to edit mode, or open a dialog for editing. For more information, see Partial Edit.

Full Screen Layout

You can choose between the following edit flows for the entire page:

Start editing from object page

Edit a simple object starting from the object page (full screen layout)

Edit a simple object starting from the object page (full screen layout)

  1. From the list report, the user navigates to the details of an object.
    The object page features a header toolbar with an Edit button. The title of the page is <object type> (here: Leave Request).
  2. The user chooses Edit.
    The object page changes to edit mode, showing a footer toolbar containing the finalizing Save action and Cancel. The title does not change.
  3. After updating the data, the user chooses Save.
    You have the following flow options, depending on your use case:
  4. The standard flow shows the object in display mode and a message toast.
  5. If your use case involves editing several objects in succession, you can also navigate back to the list report. The message toast is shown on the list report and an indicator highlights the updated item.

Start editing from list report

Edit a simple object starting from a list report (full screen layout)

Edit a simple object starting from a list report (full screen layout)

  1. In a list report, the user selects an object and chooses Edit.
    The object page features a footer toolbar containing the finalizing Save action and Cancel. The title of the page is <object type> (here: Leave Request).
  2. After updating the data, the user chooses Save.
    You have the following flow options, depending on your use case:
    1. The standard flow shows the object in display mode and a message toast.
    2. If your use case involves editing several objects in succession, you can also navigate back to the list report. The message toast is shown on the list report and an indicator highlights the updated item.
  3. Selecting Cancel opens a confirmation popover, and the user can opt to discard the changes. The object then switches to display mode. If required by the use case, the system can also navigate back to the list report.

Flexible Column Layout

If your app runs in the flexible column layout, and the user chooses Save on the object page, the display is as follows:

If the user confirms Cancel, the second column shows the object in display mode.

Elements and Controls

Implementation

Visual Design

  • Form (visual design specification)