Intro

The app toolbar appears in all applications across SAC and DSP.

https://www.figma.com/design/3pnSbYmau9yyEpKr63q5cb/DNA-Web-UI-Kit?node-id=26977-31375&t=nRfJ1lW8BJAj1T0u-4

When to Use

Do

Use the App Toolbar:

  • For all apps in Datasphere and SAC Stories.
  • Additional variants for SAC applications (Modeler, Calendar, etc.) coming soon.

Don't

Don't use the App Toolbar:

  • When maintaining a view of a table or chart. Use the Table Toolbar instead.

Anatomy

  1. Expand/Collapse (optional): Expandable toolbar functionality. Adds titles to all sections in expanded view.
  2. Section One (optional): Special section with segmented button, optional title
  3. Section (optional): Optional separator, title, and 6 actions. 6 sections total.
  4. Right Toolbar Actions (optional): Icon and optional text
  5. Object Status (optional): Icon and optional text
  6. Validation (optional): See Datasphere Special Cases
  7. View Mode (optional): Switch between edit and view modes

Diagram showing the anatomy of the app toolbar across different content density states. Numbered callouts identify the following elements: 1 – collapse/expand toggle on the far left; 2 – page title; 3 – icon groups representing tool actions, shown scaling across multiple toolbar variants; 4 – additional icon actions on the right side; 5 – a status or validation icon; 6 – an active or highlighted icon; 7 – a split button combining Edit and View actions with a dropdown.

App Toolbar - Anatomy

Current Icons in Use

Reference sheet listing all currently supported toolbar icons with their labels. Each row shows an icon alongside its name and, where applicable, the sub-actions available beneath it. Examples include: Theme, Edit CSS, Data Refresh (with sub-actions: Data Refresh, Configure Auto Refresh, Loading Optimisation Settings), Edit Prompts, Link Dimensions, Left Side Panel, Right Side Panel, Info Panel, Filter Panel, Advanced Mode, More, Outline (AA), Layouts, Add New Data, Data Save, as well as right-column entries such as Add (with sub-actions: Text, Header, Button, and others), Input Control, Table, Chart, Undo, Redo, Copy (Story), New (Modeler), Save (with sub-actions: Save, Save As, Save As Template), Share, Edit Story / Edit AA, Copy (AA), Undo (Modeler), Redo (Modeler), Launch, and Responsive.

Currently supported toolbar icons

Datasphere Special Cases

  1. Object Status: Object status with label to show deployment status.
  2. Validation: Semantic button indicates whether the object is valid and can be published. If the button is red, the user can select the button and.a popover will display the incorrect or forgotten items.

Diagram showing the toolbar anatomy for the Datasphere special case. Two numbered callouts on the right side of the toolbar identify: 1 – deployment status; 2 – a validation semantic button with a green checkmark badge alongside a shield icon. The left portion of the toolbar shows a standard row of icon actions without callouts.

App Toolbar Datasphere Special Cases - Anatomy

SAC Special Cases

Truncation Logic in SAC Stories

In SAC Stories, responsiveness is grouped by section. Excluding the ‘View’ section, truncation occurs from right to left, starting with the ‘Format’ section. All collapsed sections move into a ‘More’ section at the end of the truncated area.

‘View’ remains as the final section once all other sections have been truncated.

Diagram showing how the toolbar handles overflow when there are more actions than available space. A labelled section on the left reads "View" and contains a row of icons (panels, info, filter, advanced mode), followed by a "More" overflow section containing a three-dot menu. On the right, the Edit/View split button and a screen icon remain persistently visible. This illustrates the truncation priority: lower-priority icons collapse into the More menu first, while key mode-switching controls remain exposed.

Truncation Logic in SAC Stories

Page Switcher

Shows the current page the user is on, and how many pages there are in total (current/total). Users can use this component to cycle through pages within a story or application.

  1. Page Switcher: Component available in SAC only.

Diagram showing truncation behaviour when the toolbar includes a page switcher. A single numbered callout (1) points to the page switcher control.

App Toolbar with Page Switcher - Anatomy

Page Switcher Logic

  1. First Page: When the user is on the first page, the left arrow key will be disabled and the right arrow key will be active.
  2. Last Page: When the user is on the last page, the right arrow key will be disabled and the left arrow key will be active.
  3. One Page: If there is only one page, the right and left arrow keys will be disabled.

Diagram illustrating three states of the page switcher control, each with a numbered callout. 1 – the first page is active, showing "1 / 13" with the back arrow disabled and the forward arrow enabled; 2 – the last page is active, showing "13 / 13" with the back arrow enabled and the forward arrow disabled; 3 – only one page exists, showing "1 / 1" with both arrows present but no navigation possible.

Page Switcher Logic in SAC

Responsiveness

To enable responsiveness, use the OverflowToolbar control. Based on the sap.m.Toolbar control, the OverflowToolbar control is a container that provides overflow when its content does not fit in the visible area. Controls that can overflow include the segmented button, select, toggle button, checkbox, input field, search, combo box, and date/time picker.

Only allow important actions to shrink and stay outside the overflow. The app team itself must decide which actions it considers to be sufficiently important.