Description

Panels are used for building some aspect of an object, or the object itself if the same is on display. They support object building by providing tools, settings, configurations, and other building actions contextually to an object creation workflow.

warning
This component is not to be confused with Fiori's Panel, which has the same name, but is a collapsable or non-collapsible content section. When referring to Fiori's Panel, use the API reference sap.m.Panel.

Usage

Use panels to support file or object creation by providing tools, settings, configurations, and other actions that help the building process.

Anatomy

A panel’s header contains both an icon (1A) and a label (1B), used together to communicate aspect of the file is being built. Avoid using generic icons or labels for panel headers.

Header Styles

Panel headers may take two distinct forms depending on the use case. Most commonly, Panels have a simple header (A), but when needed, headers may use an Icon tab bar (B) to create different, but related, content areas in Panel, or to stack different Panels in one.

Do not place icon buttons in the Panel header's far right side. Panel headers are not toolbars, and buttons should only be placed on the right side when they transition to a Sub panel in master-detail or parent-child scenarios.

Themes & Styles

Panels are primarily identified by their blue header lines and white background. Dark, solid-colored backgrounds panels, previously used for details or read-only panels, have been discontinued unless they are part of a dark mode or theming feature.

2
do
false
Design Panels with a blue border line at the header.
dont
false
Don't introduce new dark solid Panels to be used in light theme, or new header background colors. Grey headers are reserved for Task panels, orange is reserved for Sub panels in styling mode.

Panels are primarily identified by their blue header lines and white background. Dark, solid-colored backgrounds panels, previously used for details or read-only panels, have been discontinued unless they are part of a dark mode or theming feature.

Behaviors & Interactions

Panel Access

Show or hide a panel by interacting with the View menu in the Application toolbar. Panels can be show by default when it makes sense, for example, in a creation space that relies on the panel for its building actions.

However, be aware that if a panel is shown by default, the user may not realize that it can be hidden to make more use of the main content area. Don't add permanent side panels to the UI that cannot be removed from view. Footer bars, associated with tasks, are used to dismiss Task panels only.

Placement

Panels slide in from the right edge of the screen into position. They should be placed directly beneath the Application toolbar and above the Icon tab bar if one is being used. Panels remain in the right-most side of the UI until they are hidden from view. Only one Panel may ever be shown at a time.

2
do
false
Always place panels on the right side of the UI.
dont
false
Don't place panels in different orientations, different parts of the UI, or have more than one opened at a time.

Resizing

A panel’s default size, and also minimum size, is 29 rem (464px) wide. A panels’ width may be expanded if needed, but expanded panels should never take up more than 50% of a browser screen space. Panels should , under any circumstances, expand beyond half the screen and cover it fully – panels are not pages. When expanding, ensure the panel’s contents behave responsively.

All contents of a panel should be fully visible in its default size, and expansions should never be used to reveal additional or new content that would otherwise be hidden in the default size.

Use an expansion control to drag and resize the Panel, and never add icon buttons to Panel header for expansion as it confuses the header type with that of Sub panels.

When expanding a panel, the panel body should not push or reposition items beneath it or rearrange the aspect ratio of a screen floorplan or layout. Instead, panels layer over the primary content area, and cover any content beneath it. This is to communicate that the enlarged size is not, and should never be, permanent.

guideline
Not all Panels need to be expandable. But if a Panel includes this feature, users should be able to expand the panel by interacting anywhere along the expansion control on the outer edge.
2
do
false
Use an expansion control when additional space is desired. Panels default and min is the same at 464px. Max size is 50% the width of the browser screen size.
dont
false
Panels should never, under any circumstance, expand to cover the full screen, or it will stop being a side Panel. Don't add buttons to panel header for expansion as it confuses the header type with that of Sub panels.

Best Practices

Panels are not pages

Panels are not pages and should never be used in such a way: they should never occupy the full screen, be overloaded with content to require its own internal navigation scheme, or contain a bevy of complex interactions. The best use for a side Panel is to file or object creation with supporting content or interactions, not for Panels to have a workflow of their own.

If a single scrollbar proves to be insufficient for browsing panel contents, then that is a good sign the Panel has exceeded its limits. At that point, consider retiring the Panel altogether and restructuring the workflow so it transitions in and out of an Object Page instead. Your users will thank you for it!

Be wary of hidden content

Due to the limited vertical space provided by a side Panel, it is not uncommon to have content pushed down from sight. Hidden content can be easily missed by users who might not realize the Panel is scrollable.

To avoid this problem, consider placing the most important information at the top of the panel. If using Fiori’s collapsible Panel (sap.m.Panel) controls, select the most important one to be expanded by default and all others collapsed. Not only will this direct the user’s focus, but it should also save enough vertical space for all content sections to be represented, albeit closed, in the side Panel and visible at first glance.

Collapsible panels closed by default to avoid pushing content below edge of screen

Specifications

<div> <div>Badge</div> <div>Component</div> <div>Specifications</div> <div>Details</div> </div> <div> <div></div> <div>* For tabbed header, follow <a href="https%3A%2F%2Fexperience.sap.com%2Ffiori-design-web%2Ficontabbar%2F">Icon Tab Bar</a>. Modify bar height to 2.5 rem / 40px.</div> <div> <p>29rem</p> <p>2.5rem</p> <p>@sapUiBaseColor</p> <p>@sapUiShadowHeader</p> <p>* modify border line to 0.125rem + @sapUiBrand</p> </div> <div> <p>464px</p> <p>40px</p> <p>#FFFFFF</p> <ul> <li><em>Border:</em> X: 0, Y: -2, blur: 0, spread: 0, #0A6ED1, alpha: 100</li> <li><em>Shadow:</em> X: 0, Y: 0, blur: 4, spread: 0, #000000, alpha: 30</li> </ul> </div> </div> <div> <div></div> <div></div> <div> <p>1 rem</p> <p>@sapUiContentNonInteractiveIconColor</p> <p>2 x 2rem</p> <p>0.25rem</p> </div> <div> <p>16pt</p> <p>#6A6D70</p> <p>32 x 32px</p> <p>4px</p> </div> </div> <div> <div></div> <div></div> <div> <p>@sapUiFontHeaderFamily</p> <p>@sapUiFontHeaderWeight</p> <p>@sapMFontHeader5Size</p> <p>@sapUiGroupTitleTextColor</p> <p>2rem</p> <p>0.25 rem top / bottom</p> <p>left aligned, vertically centered</p> </div> <div> <p>72</p> <p>regular</p> <p>16pt</p> <p>#32363a</p> <p>32px</p> <p>4px top / bottom</p> <p>left-aligned, vertically centered</p> </div> </div> <div> <div></div> <div></div> <div>1rem</div> <div>16px</div> </div>

<div> <div>Badge</div> <div>Component</div> <div>Specifications</div> <div>Details</div> </div> <div> <div></div> <div>*contains both panel header and body</div> <div> <p>29rem</p> <p>50% of browser</p> <p>100% length of UI</p> <p>@sapUiBaseColor</p> <p>@sapUiShadowLevel0</p> </div> <div> <p>464px</p> <p>50% of browser</p> <p>100% length of UI</p> <p>#FFFFFF</p> <ul> <li><em>First layer:</em> X: 0, Y: 0, blur: 0, spread: 1,</li> <li>#000000, alpha: 10</li> <li><em>Second layer:</em> X: 0, Y: 2, blur: 8, spread: 0, #000000, alpha: 10</li> </ul> </div> </div> <div> <div></div> <div></div> <div>1rem</div> <div>16px</div> </div> <div> <div></div> <div></div> <div>0.5rem</div> <div>8px</div> </div> <div> <div></div> <div></div> <div>27rem</div> <div>432px</div> </div> <div> <div></div> <div></div> <div> <p>12.5rem,</p> <p>2rem</p> </div> <div> <p>200px,</p> <p>32px</p> </div> </div> <div> <div></div> <div></div> <div>0.5rem</div> <div>8px</div> </div>