Description

Sub-panels are sub-levels to regular Panels. When a Panel and Sub-panel are used together, they depict two different levels of the same information: the Panel reflects the broader context while Sub-panels is concerned with its details, usually reflecting the user's selection. Because of this dynamic, Sub-panels take on a kind of child relationship to the parent Panel.

Usage

Sub-panels don't make sense alone and should never be used unless combined with a Panel. Use Panels to build or define the broader context and Sub-panels for individual components belonging to that context, such as cards, columns, widgets, and so on.

For example, the Panel may be used to define the of a data table, while multiple Sub-panels are used to define the that make up that table.

Anatomy

The Sub-panel's header is characterized by the backward arrow (1A) that allows a seamless transition to the parent Panel. From the parent Panel's header, click on the button in the far right (1B) to return to the Sub-panel.

See for more information on this transition.

2
do
false
Use the panel header to switch between the parent Panel and the Sub-panel
dont
false
Use tabbed header-styles (icon tab bars) to represent Sub-panels. These styles should not be used interchangeably.

Themes & Styles

Sub-panels are represented by a border in a dark shade of blue and a white background. Don't introduce Sub-panels in different colours or themes, even to match color-coded objects. The only currently acceptable colour variation is used to represent Styling mode. See for more information.

Behaviors & Interactions

Panel Access

Sub-panels are not accessed like regular Panels directly from the View menu. Rather, when the parent Panel is on display, the Sub-panel reacts contextually to a user's selection. Simply select an object on the screen to have the Sub-panel slide from the right over the parent Panel. show a parent Panel and its children Sub-panels side-by-side or at the same time.

To hide the Sub-panel, either deselect the object on display, select a new object, or transition manually to the parent Panel (see next section). To hide the Sub-panel from view altogether, use the Show and Hide controls in the View menu of the Application toolbar to hide the parent Panel, effectively hiding both at once.

Panel and Sub-Panel Transition

When a Sub-panel is active, click on the back-facing arrow on the left to transition back to the parent Panel. Similarly, click on the Sub-panel's icon on the right to transition to the Sub-panel. Toggle back and forth between both panels by interacting with these header buttons.

guideline
Mode ChangesIn some apps in SAP Analytics Cloud, the manual transition between Panel and Sub-panel also triggers a functional mode change: from a Build mode to a Style mode. The parent Panel’s building mode builds the file, while the Sub-panel’s styling mode defines the visual appearance of the selection. These mode changes are represented by different selection patterns and themes: Build mode uses a data-point selection and is represented in blue, while Style mode uses an object-based selection and is represented in orange.
2
do
false
Transition between the Panel and Sub-panel by placing a button on the far right side of the panel header.
dont
false
Place any additional buttons in the Panel or Sub-panel's header. This is the wrong place for a toolbar, and it would misrepresent the panel type.

Resizing

A Sub-panel’s size is defined by its parent Panel’s width and cannot be resized individually. So, when either one is resized, both are expanded together. Since the same rules of a Panel apply to the Sub-Panel, never expand them beyond 50% of the browser screen.

All contents of a Sub-panel should be fully visible at its default size. Expansions should never be used to reveal additional or new content that was previously hidden in the panel’s default size. When resizing, ensure all of its contents behave responsively.

To learn more, please refer to section of Panels.

Best Practices

Recognize the forest for the trees

A Panel with a tabbed header (using the icon tab bar) is as a Panel with a Sub-panel. The relationship between a Panel and its Sub-panels is like the one between a whole forest and its individual trees.

A tabbed header, on the other hand, would be more appropriate for showing the different forests belonging to the same region. Learning the difference between these two styles, and when to use one over the other, will ensure the right usage of both.

Panels are not pages

Panels and their children Sub-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 these two panels is to the workflow in the main content area with supporting content or interactions, not for them to have complex workflows of their own.

When Panels and Sub-panels are used for building large objects and their smaller entities, if a single scrollbar proves to be ineffective for browsing their contents, then that is a good sign these panels have exceeded their limits. At that point, consider retiring the panel combo altogether and restructuring the workflow so it transitions in and out of an Object Page instead. Your users will thank you for it!

Specifications

<div> <div>Badge</div> <div>Component</div> <div>Specification</div> <div>Detail</div> </div> <div> <div></div> <div></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: 15</li> </ul> </div> </div> <div> <div></div> <div></div> <div> <p>I</p> <p>1rem</p> <p>@sapUiContentNonInteractiveIconColor</p> <p>2 x 2 rem</p> <p>0.25rem; 1rem; 0.25rem; 1rem</p> <p>@sapUiFontHeaderFamily</p> <p>@sapUiFontHeaderWeight</p> <p>@sapMFontHeader5Size</p> <p>@sapUiGroupTitleTextColor</p> <p>2 rem</p> <p>0.25rem top / bottom</p> <p>left-aligned, vertically centered</p> </div> <div> <p>I</p> <p>16pt</p> <p>#6A6D70</p> <p>32 x 32px</p> <p>4px; 16px; 4px; 16px</p> <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> <p>sap.m.Button</p> <p>0.25rem, 1rem, 025rem, 1rem</p> </div> <div> <p><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-TertiaryTransparentHighlightButton">Tertiary button</a></p> <p>: 4px, 16px, 4px, 16px</p> <p>* Please follow specs for tertiary transparent button</p> </div> </div>

<div> <div>Badge</div> <div>Component</div> <div>Specifications</div> <div>Details</div> </div> <div> <div></div> <div></div> <div> <p>29 rem</p> <p>2.5 rem</p> <p>@sapUiBaseColor</p> <p>@sapUiShadowHeader</p> <p>* Modify border to 0.125rem +</p> <ul> <li><em>Standard sub panel:</em> Accent Colour 11, F</li> <li><em>Styling mode:</em> @sapUiIndication3</li> </ul> </div> <div> <p>464px</p> <p>40px</p> <p>#FFFFFF</p> <ul> <li><em>Border (Standard):</em> X:0, Y: -2, blur: 0, spread: 0, #074F97, alpha: 0<br>standard sub panel: #074F97,</li> <li><em>Border (styling mode)</em>: X:0, Y: -2, blur: 0, spread: 0, #E9730C, alpha: 0</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>sap.m.Button</p> <p>0.25rem, 0.5rem, 0.25rem, 1rem</p> </div> <div> <p><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-TertiaryTransparentHighlightButton">Tertiary button</a></p> <p>4px, 8px, 4px, 16px</p> <p>* Please follow specs for tertiary transparent button</p> </div> </div> <div> <div></div> <div></div> <div> <p>1rem</p> <p>@sapUiContentNonInteractiveIconColor</p> <p>2 x 2 rem</p> <p>0.25rem; 1rem; 0.25rem; 0rem</p> <p>@sapUiFontHeaderFamily</p> <p>@sapUiFontHeaderWeight</p> <p>@sapMFontHeader5Size</p> <p>@sapUiGroupTitleTextColor</p> <p>2 rem</p> <p>0.25rem top / bottom</p> <p>left-aligned, vertically centered</p> </div> <div> <p>I</p> <p>16pt</p> <p>#6A6D70</p> <p>32 x 32px</p> <p>4px; 16px; 4px; 0px</p> <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>Badge</div> <div>Component</div> <div>Specification</div> <div>Details</div> </div> <div> <div></div> <div>* Contains 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> <p>apply both layers</p> <ul> <li><em>First layer:</em> X: 0, Y: 0, blur: 0, spread: 1, #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>12.5rem</p> <p>2rem</p> </div> </div> <div> <div></div> <div></div> <div>0.5rem</div> <div>8px</div> </div>