The initial page floorplan allows the user to navigate to a single object to view or edit it. The interaction point on the screen is a single input field that relies on assisted input to direct the user to the object in as few steps as possible (using features such as value help and live search). If you need to display more than one object, use the list report floorplan instead.

Usage

Use the initial page floorplan if the user only needs to work on one object at a time. In this case, the list report floorplan would include a redundant step for viewing a list of items found by the search.

A typical use case for the initial page floorplan is a barcode scanning app, where each new scan leads to an object with input fields. Once the user has submitted the entries, the screen is shown in read-only mode. The cursor returns to the input field, ready for the user to scan the next object.

Do not use the initial screen floorplan if the search is supposed to return a list of objects. This is the scenario for the list report floorplan.

It is also advisable to use only one input field for finding the object. If you need to include detail views, or allow the user to switch between views, offer these features when displaying the object itself.

Structure

Header area

The header area can contain the same content as in the object page, except for the title, which is replaced by an input field. The header initially displays in collapsed mode, but expands when the user performs a search or finds an object using the value help dialog.

Content area

The content area is used to display the object. It can contain sections, subsections, forms, and tables.

Responsiveness

The initial page features a single interaction point for the user: the input field near the top of the screen. Place the input field inside the header section. Configure the width to fit the width of the longest text (allowing some additional space for other languages), but do not make it significantly wider.  When you set the maximum width of the input field, also consider the width available on mobile devices.

The field should never be as wide as the screen (except for on smartphone screens).

Flows and Interaction

Initial Screen with Live Search

The input field serves as the single starting point for finding the object. The assisted input uses the live search feature (search-as-you-type) to speed up the search. The live search feature can show anything from one attribute to an entire table of values. It is possible to show a message such as “Enter ID manually or scan barcode” using the message page to guide the user.

Initial Screen with Value Help Dialog

If multiple hits are possible for the same search terms, you may need to implement a value help dialog. This dialog lets the user narrow down the list of items based on more specific criteria. When the user selects an object from the list, the dialog closes and the object is displayed in the content area (no additional navigation is required).

Behavior of the Search Field

The dynamic header content is initially collapsed and cannot be expanded. The input field is located in the header area of the object page and should be on focus if no other additional actions are provided. This allows the user to enter the search term directly without clicking into the field. Only consider using this if there are no other elements that could be blocked by it, such as the on-screen keyboard on touch devices.

Once the user finds an object, the dynamic header expands and displays the relevant information for the object.

The dynamic header collapses on scrolling or by user interaction, but the input field for performing a different search is always visible.

If the user enters new search terms in the input field, the focus moves away from the field and the app triggers a new search. If no results are found, the initial view of the page is shown – with a collapsed header and a corresponding message in the content area.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.