Panel SAP SE A container control which has a header and content. <h3>Overview</h3> The panel is a container for grouping and displaying information. It can be collapsed to save space on the screen. <h4>Guidelines:</h4> <ul> <li>Nesting two or more panels is not recommended.</li> <li>Do not stack too many panels on one page.</li> </ul> <h3>Structure</h3> A panel consists of a title bar with a header text or header toolbar, an info toolbar (optional), and a content area. Using the <code>headerToolbar</code> aggregation, you can add a toolbar with any toolbar content (i.e. custom buttons, spacers, titles) inside the title bar. There are two types of panels: fixed and expandable. Expendable panels are enabled by the <code>expandable</code> property. Furthermore you can define an expand animation with the property <code>expandAnimation</code>. <h3>Usage</h3> <h4>When to use:</h4> <ul> <li>You need to group or display information and want to give users the option of hiding this information.</li> <li>You want to show additional information on demand (for example, a panel could show optional input fields for an advanced search).</li> <li>You want to create a panel with controls that do not require user interaction and are not part of a form. Depending on the usage, change the <code>accessibleRole</code> property from the default <code>{@link sap.m.PanelAccessibleRole Form}</code> to <code>{@link sap.m.PanelAccessibleRole Region}</code> or <code>{@link sap.m.PanelAccessibleRole Complementary}</code>.</li> </ul> <h3>Responsive Behavior</h3> <ul> <li>If the width of the panel is set to 100% (default), the panel and its children are resized responsively, depending on its parent container.</li> <li>If the panel has a fixed defined height, it will take up the space, even if the panel is collapsed.</li> <li>When the panel is expandable, an arrow icon (pointing to the right) appears in front of the header.</li> <li>When the animation is activated, expand/collapse uses a smooth animation to open or close the content area.</li> <li>When the panel expands/collapses, the arrow icon rotates 90 degrees clockwise/counter-clockwise.</li> <li>When the height uses the default property <code>auto</code>, the height of the content area is automatically adjusted to match the height of its content.</li> <li>When the height of the panel is set to a fixed size, the content area can be scrolled through.</li> </ul> 1.16 sap.ui.core/Control This property is used to set the header text of the Panel. The "headerText" is visible in both expanded and collapsed state. Note: This property is overwritten by the "headerToolbar" aggregation. Determines the Panel width. Determines the Panel height. Specifies whether the control is expandable. This allows for collapsing or expanding the infoToolbar (if available) and content of the Panel. Note: If expandable is set to false, the Panel will always be rendered expanded. Indicates whether the Panel is expanded or not. If expanded is set to true, then both the infoToolbar (if available) and the content are rendered. If expanded is set to false, then only the headerText or headerToolbar is rendered. Indicates whether the transition between the expanded and the collapsed state of the control is animated. By default the animation is enabled. 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" over "Translucent" to "Transparent". This property is used to set the accessible aria role of the Panel. Depending on the usage you can change the role from the default <code>Form</code> to <code>Region</code> or <code>Complementary</code>. Indicates that the panel will expand or collapse. If the panel will expand, this is true. If the panel will collapse, this is false. Identifies whether the event is triggered by an user interaction or by calling setExpanded. Determines the content of the Panel. The content will be visible only when the Panel is expanded. This aggregation allows the use of a custom Toolbar as header for the Panel. The "headerToolbar" is visible in both expanded and collapsed state. Use it when you want to add extra controls for user interactions in the header. Note: This aggregation overwrites "headerText" property. This aggregation allows the use of a custom Toolbar as information bar for the Panel. The "infoToolbar" is placed below the header and is visible only in expanded state. Use it when you want to show extra information to the user.