UI Elements Container Panel

Updated: December 19, 2016
SAPUI5 Version 1.32

Panel

sap.m.Panel

Intro

The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen.

Usage

  • Use the panel if:

    • You need to group or display information.
    • You want to give users the option of hiding this information.
    • You want to show additional information on demand (for example, a panel could show optional input fields for an advanced search).

Example

  • Panel - Value Search Dialog Closed
  • Panel - Value Search Dialog Open

Responsiveness

If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.

Layout

  • The panel control is a container for controls.
  • The panel can have a solid or semi-transparent background.
  • The panel always includes a header.
  • An info toolbar can be added to the panel to show extra information.

Examples

Panel with a title toolbar
Panel with a title toolbar
Panel with a title toolbar and infobar
Panel with a title toolbar and infobar

Types

There are two types of panels: fixed and expandable.

Fixed Panel

Fixed panels are useful for grouping custom content. They include headers and info toolbars.

Fixed panel
Fixed panel

Expandable Panel

Expandable panels are much like fixed panels, except their content can be expanded and collapsed (including the info toolbar, if available).

  • Panel - Expandable2
  • Panel - Expandable1

Components

A panel consists of a title bar with a header text or header toolbar, an info toolbar (optional), and a content area.

The title inside the title bar can be added by using the “headerText” property. If you use the “headerToolbar” aggregation, the “headerText” property is ignored. With the “headerToolbar” aggregation, you can add a toolbar with any toolbar content inside the title bar. For example, if you need a title text on the left and some action buttons on the right, add a title to the toolbar’s content aggregation, toolbar spacer, and then your buttons.

Header toolbar of a panel
Header toolbar of a panel

Behavior and Interaction

Expand/Collapse

  • When the panel is expandable, an arrow icon (pointing to the right) appears in front of the header. Click or tap this icon to expand the panel.
  • When the animation is activated, expand/collapse uses a smooth animation to open or close the content area.
  • When the panel expands, the arrow icon rotates 90 degrees clockwise.
  • When the panel collapses, the arrow icon rotates 90 degrees counterclockwise.
  • The buttons in the header are separately clickable/touchable.

Example

  • Panel - ExpandCollapse1
  • Panel - ExpandCollapse2

Overflow Scrolling (Content Area)

  • When the height uses the default property “auto”, the height of the content area is automatically adjusted to match the height of its content.
  • When the height of the panel is set to a fixed size, the content area can be scrolled through.

Panel With Scrolling

Panel with a fixed height (scrolling activated)
Panel with a fixed height (scrolling activated)

Panel Without Scrolling

Panel with auto height (no scrolling)
Panel with auto height (no scrolling)

Styles

Background Design

  • This property is used to set the background color of the panel.
  • Depending on the theme, you can change the state of the background from Solid through Translucent to Transparent.
  • The default value is Translucent.

Example

  • Panel_Style_Translucent
  • Panel_Style_Transparent
  • Panel_Style_Solid

The panel is translucent by default to match the background of the corresponding list, form, table, and so on. These controls also have solid, translucent, and transparent background properties, so it makes sense to give the panel the same type of properties.

This also applies to our own composite controls, such as table personalization, value help, and quick view, which use panels to group standard controls such as input fields and buttons.

Example: In a dialog box with a form-style layout, the background color can be set to transparent so that the input fields in the panel stand out against the background.

A dialog box with form-style layout
A dialog box with form-style layout

Example: A panel with a transparent background used in a table personalization dialog box.

Table personalization dialog box
Table personalization dialog box

Example: A panel with transparent background properties, used in a value help dialog box.

Value help dialog box
Value help dialog box

Example: Quick view (seen here outside the popover or dialog box) is created using translucent panels.

Quick view
Quick view

Guidelines

  • Nesting two or more panels is not recommended.
  • Do not stack too many panels on one page.

Exceptions

If you add a header toolbar (sap.m.Toolbar) via aggregations, it will overwrite the “headerText” property.

Resources

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

Elements and Controls

  • No links

Implementation

  • No links