Overview
The Tool Layout is an essential part of most BTP tools. The layout combines the Tool Header and the Navigation components in one consistent structure. In addition, it provides necessary interaction between the two components out of the box.
Look and Feel
Legacy Guideline Available
This guideline pertains to the most recent version of the SAP Design System. Previous iterations of this guideline remain applicable for tools that have not yet adopted the latest design vision.
Legacy Guidelines:
Data and Analytics - Layout Design Framework
AppDev and Integration - Tool Page
Layout Variants
Depending on the choice of navigation the Tool Layouts adapts its content area and interaction behavior. Each navigation variant in turn dictates a specific responsive behavior.
No Navigation
This variant displays only the tool header and content area. This variant suggests that the navigation occurs in the content area. If that is the case, consider using any of the backward navigation options described in the Patterns section.
Vertical Navigation - Popup
This variant is similar to the No Navigation variant regarding content area size and position. However, in this variant, the navigation appears in a popup upon clicking the menu button in the Tool Header.
Vertical Navigation - Expanded (Default)
In this variant, the Vertical navigation appears on the side. The content area, as a result, is smaller. Consider this behavior when designing for smaller screens.
Vertical Navigation - Snapped
This variant is similar to the Expanded variant, but the navigation is more condensed. The layout leaves room for more content at the expense of straightforward navigation.
Horizontal Navigtion
In this variant the content are takes the full width of the page but is condensed a bit to leave room for the horizontal navigation.
See also
When to Use
Recommended
- Favor Tool Layout for all BTP Tools as the top-level structural element.
- Use the No Navigation variant for landing pages or tools that have straightforward in-content navigation.
- Use the Popup variant for tools with a straightforward navigation structure where content width is needed.
- Use the Expanded variant for tools with complex navigation with groups or parent-child navigation.
- Use the Snapped variant for tools with a flat navigation hierarchy where content width is needed.
- Use the Horizontal variant for tools with deep multi-level navigation hierarchy.
Not Recommended
- Avoid using Tool Layout for SAP Start / Fiori Launchpad applications
- Avoid mixing layout variants in the same tool.
Anatomy
The Tool Layout consists of several components and its anatomy describes only how those components appear on the screen. Check the See more section below for individual component anatomy.
See also
No Navigation
Vertical Navigation - Expanded
Vertical Navigation - Snapped
Vertical Navigation - Popup
Horizontal Navigation
Behavior
Behavior - Expanded-Snapped
When using the vertical navigation, switching between the expanded and snapped variants is achieved by clicking the menu button in the Tool Header. The content then grows or shrinks accordingly.
Behavior - Popup
When using the vertical navigation, showing and hiding the popover navigation is achieved by toggling the menu button in the Tool Header. The content area remains unaffected by this interaction.
Background Design
Solid-Standard
The default style of the content area. Recommended for all page-like content (Page, Dynamic Page, etc),
Transparent
The content area with no background or shadows. Recommended for card-based or column layouts (Home Screens, Catalogs, Diagrams, Flexible Column Layout, etc.)
List
A background style for placing large lists pr tables (List, Table, Calendar).
Keyboard Handling
Keyboard Handling
Screen Reader
The screen reader specification only highlights high-level interactions with the layout structure. Refer to the individual components for specific interactions with the Tool Header, Navigation, and content.
Screen Reader
See also
Responsiveness
Tablet Responsiveness
The Tool Layout behavior on Tablet devices depends mainly on the Tool Header and Navigation behaviors. Still, the layout remains largely unchanged. The only difference is that the expanded vertical navigation is displayed always in snapped mode.
No Navigation
Same as Desktop
Snapped Vertical Navigation
The expanded variant becomes snapped and the menu button from the Tool Header disappears.
Popup Vertical Navigation
Same as Desktop
Horizontal Navigation
Same as Desktop
Phone Responsiveness
All navigation variants on phones appear in a popup triggered by the menu button. The No Navigation variant remains unchanged. In all cases, the content area remains unchanged.
No Navigation
Same as Desktop
Popup Navigation
Used for all navigation variants.
Resources
Design
Code Samples
Web Components
Fundamental Styles
Leave Feedback
We want to make our toolkit better. If you're interested in providing feedback, please use the commenting feature in the Figma file link in the button below.