Description
Object list panels are used as object pickers for the main content area or another side Panel. By default, object list panels are 2/3 the size of a regular side Panel at but may be expanded by the user to a larger size.
Usage
Use Object list panels to display large or multi-level lists of selectable items that need to be used in the main content area or in another panel. The object list panel can list its objects as tokens, checkboxes, lists, trees, etc.
- You need to display a large list that would otherwise crowd or outgrow the contents of another panel.
- You need a list of objects to interact with the main content area.
- Your selection is a one-off or situational task. Use a task panel instead.
- Your list is the main content. Use a list floorplan or a responsive splitter layout.
- Your content is not a list of objects / items.
Anatomy
1. Header
2. Content Area
The content area, comprising of everything beneath the header border line should be fully scrollable. Because of this, search bars for panel content are most appropriately placed in the sub-header as a means of keeping it ‘sticky’ or locked in permanent position.
Header
Object list panels contain a header that is typical of many Fiori components, such as Dialogs. Basic headers have three minimum required components:
1a. Header bar
1b. Header label
1c. Horder line
Headers may contain additional elements:
1d. Sub-header beneath the header bar
1e. Icon buttons on either ends of the header bar.
Header Styles
Object list panel headers may take two distinct forms depending on the use case. Most commonly, object list panels will use a classic Fiori header (A), but when needed, object list panel headers may also be done with an icon tab bar(B). Use an icon tab bar to create different, but related, content areas in a panel, or, to navigate the long list of its contents. Please do not use tabbed headers if you will only use one tab.
Body
The outer edge of the panel has an optional expansion grabber that can be used to expand its width. The expansion grabber contains a vertically-centred icon, but users should be able to expand the panel by interacting anywhere along its outer edge line (please see under Behavior and Interactions).
Behaviors & Interactions
Access
Object list panels may be opened from a variety of different sources depending on where it will be positioned in the UI. They may be closed by reversing the action that triggered it if possible, or by clicking a closing button on the panel header.
Object list panel that serve the main content area may also be opened by default, where it makes sense to do so. Users should still be able to close and dismiss object list panels that are opened by default. Please do not have opened-by-default object list panels that will serve another side panel.
Placement
Object list panels may be placed in two different locations in the UI depending on what its listed contents relate to. Regardless of these two positions, the panel should still be above the tab bar if one is being used. Be sure to reverse panel controls to match the placement of the panel: the close button and expansion controls should be in the outer edge of the panel.
- Placement 1 – Left of the main content area if its listed items are meant to interact with it
- Placement 2 – Left, but beneath, another panel if its listed items are mean to interact with the panel.
Expansions
Not all object list panels need to be expandable, but if needed, use the expansion grabber to expand its width. Users can expand the panel through drag and drop or double-click on the control to toggle between its max and default size (see Dynamic Sizing in Behaviours and Interactions). When expanding, ensure the panel’s contents behave responsively.
Panel expansions should not push or reposition items beneath it or rearrange the aspect ratio of a screen floorplan or layout. Instead, object list panels layer over the primary content area, and cover all content beneath it. This is to communicate that the enlarged size is not, and should never be, a permanent fixture on a layout.
All contents of the object list panel should be fully visible in its default size, and expansions should never be used to reveal additional or new content that cannot be seen or reached in the panel’s default size.
Dynamic Sizing
By default, object list panels are approx. 2/3 the size of a regular side panel, or 18rem (288px). This is so that at least 50% of the browser screen is showing the main content. Resizing this panel type should be made dynamic to the browser screen and with special consideration of the main content. When expanded to the largest size possible, 25% of the browser screen should still be occupied by the main content.
Please honour the rules of dynamic resizing to maintain a balanced ratio between panels and visibility of the main content area. Users should close the panel from view if not needed, not reduced it to an unusable size.
- Min (default) size – 16.375rem (288px), or where 50% of the main content is still visible.
- Max size – 45rem (720px), or where 25% the main content is still visible
Don't expand the object list panel so that it completely covers the entire main content area.
Don't reduce the object list panel to a smaller size than the default size. Panel minimum size is 16.375 rem (288px); panel maximum size is 45 rem (720px) - at least 25% of canvas will always be visible.
Panel Actions
High level actions that impacts the whole of the object list panel, such as the closing or back button, should be placed as buttons on the header area. Additional high-level actions, particularly those that would be unrecognizable simply as an icon button, can be added through Fiori’s Action List Item control. Please do not use Fiori’s footer bars with this panel type.
Specifications
