Foundations / Best Practices / Global Patterns / Action Placement
Intro
Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to a different screen, where the action can be executed, detailed out, or further reviewed. Actions are displayed as buttons.
Place actions close to the information they act upon. For example, actions related to a business object go to the top of the page, next to the title that identifies the object. Actions related to the task workflow go to the bottom of the page and can be carried out after working through the page content.
To make actions easier to organize and find, they are often placed in toolbars. Depending on the content affected by the action, different toolbars are available. Within toolbars, some actions are usually more important than others. By ordering the actions and applying different styles, you can set the right focus.
You can also place actions inline as part of the content. For example, an action can be positioned next to a field within a form, or within a table row.
Actions must be clearly differentiated from pure navigation. Navigation functions are usually located on the left side, such as Home or breadcrumbs, whereas actions in toolbars are right-aligned.
Components
The following toolbars are available:
Toolbars
Shell-level toolbar: Contains actions that affect all applications or the entire user environment.
Page-level toolbars: Contain actions that affect the entire page or that are related to the entity represented by the page, such as a business object, report, or process. Page-level toolbars remain constant and do not depend on selections or interactions within the page. Toolbars at page level are optional. If no actions are available, they are not shown. If toolbars are available, they are always visible and maintain their position when the user scrolls. The following page-level toolbars are available: a) Header toolbar b) Footer toolbar
Content-level toolbars: Contain local actions that affect the content in a section of the screen, specifically table and chart toolbars.
The header toolbar contains global actions that apply to the entity shown on the page. Examples of global actions are Edit or Delete. The header toolbar can also include global actions that relate to the page as an interface element. These can include actions for switching a page view, maximizing or minimizing the page, bookmarking the page, or leaving a comment.
The actions in the header toolbar must always be visible, independent of the scrolling position on the screen (“sticky” behavior). If there is not enough space to show all actions, they are successively moved to an overflow menu, depending on their priority.
<div> <div> <h4 id="design-rationale">Design Rationale</h4> </div> </div> <div> <div>Placing the header toolbar in line with the title establishes a clear connection between the entity represented in the page and the action relating to that entity. Positioning actions next to the title indicates that they are both on the same hierarchy level. This also supports the overall SAP Fiori design paradigm of showing content on the left side of the screen and actions on the right.</div> </div>
Header toolbar
style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint
Guidelines for the Header Toolbar
guideline
Right-align actions.
Group actions with a common purpose and arrange these action groups in the following order, from left to right: 1. Business actions (such as Edit, Delete) 2. Manage content (such as Filter) 3. Manage layout (such as full screen switch) 4. Generic actions (such as Share) Arrange actions within a group according to their importance, from left to right.
Emphasize the most important action (primary action). Show only one primary action for the entire page (across both header and footer toolbars). Place the primary action on the very left, even if the action belongs to a group further to the right. If both header and footer toolbars are available, the footer is usually more in focus than the header and shows the primary action.
In general, always place workflow actions (such as Save or Post) in the footer toolbar. Do not place them in header toolbar. Only place workflow actions in the header in exceptional cases, and only if very few actions are needed. In this case, place them first.
Header Toolbar – Example
Header toolbar in an object page
Header Toolbar – Examples of Action Placement
Examples of header toolbar actions
Footer Toolbar
The footer toolbar contains actions related to the user’s task workflow. These actions represent steps in a process. This can be something the user wants to accomplish (such as Save a form), or actions to finalize a business process (such as Post a goods receipt or Accept/Decline a leave request).
The footer toolbar can also include alternative paths (such as Return goods) and actions that allow the user to back out of the workflow without saving (such as Cancel).
We call these actions “workflow actions” or “finalizing actions”.
Design Rationale
Placing the footer toolbar at the end of the page supports the logical interaction flow. The user first reviews the contents or fills in the information required, and then finalizes processing for the screen. Locating the actions within the footer toolbar to the right of the page ensures that all actions are clearly separated from the content and can be found by scanning the right-hand side of the page.
Footer toolbar
style
column-section-1-1, no-footprint
style
column-section-1-1, no-footprint
Guidelines for the Footer Toolbar
guideline
Right-align actions.
Place actions in the following order, from left to right: 1. Forward path (such as Post). You can also use semantic actions to express positive and negative alternatives (such as Accept and Reject). 2. Alternative path (optional). These actions appear as secondary actions. 3. Negative path. These are actions that navigate away from the current page without triggering any changes (such as Cancel or Close).
Emphasize the most important action (primary action). In the footer toolbar, this is usually the forward path action. Show only one primary action for the entire page (across both header and footer toolbars). If both toolbars are available, the footer is usually more in focus than the header and shows the primary action.
Footer Toolbar – Examples of Action Placement
Examples of actions in the footer toolbar (including primary, secondary and negative path actions)
Content-Level Toolbars
Content toolbars contain actions related to a specific section of the screen. They are used in tables and charts.
Table Toolbar
Use the table toolbar for local actions, such as:
Adding a new item to a table
Editing or deleting selected items in a table
Switching the table to edit mode
Controlling the table settings, such as filtering or sorting
Actions can be classified by their importance in a given business context. To reflect the importance, the visual styles differ.
Page-Level Toolbars
The following action types are defined for header and footer toolbars:
<p><div> <div><strong>Type</strong></div> <div><strong>What you need to know</strong></div> <div><strong>Examples</strong></div> <div><strong>Style</strong></div> </div> <div> <div>Primary</div> <div> <ul> <li>Most important action</li> <li>Needs to stand out on the page</li> <li>Needed to move the workflow forward</li> </ul> </div> <div><em>Edit</em><br><em>Save</em><br><em>Submit</em></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media1_17a5cd51d805b6686556b8569c86fedc48571a559.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_17a5cd51d805b6686556b8569c86fedc48571a559.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_17a5cd51d805b6686556b8569c86fedc48571a559.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="" src="<a href="https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media%5C_17a5cd51d805b6686556b8569c86fedc48571a559.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media_17a5cd51d805b6686556b8569c86fedc48571a559.png?width=750&format=png&optimize=medium</a>" width="257" height="68"> </picture> </div> </div> <div> <div>Semantic</div> <div> <ul> <li>Alternative to a primary action</li> <li>Usually come in pairs with a positive and a negative value</li> <li>Exception: If a single primary action has a strong semantic meaning (such as <em>Delete</em>), this might be emphasized using the semantic action.</li> </ul> </div> <div> <p><em>Approve</em> and <em>Reject</em></p> <p><em>Accept</em> and <em>Decline</em></p> </div> <div> <p> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media1_1bf3d0a6bb366c2e1a3f219e0531ed674a378d737.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1bf3d0a6bb366c2e1a3f219e0531ed674a378d737.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1bf3d0a6bb366c2e1a3f219e0531ed674a378d737.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="Picture" src="<a href="https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media%5C_1bf3d0a6bb366c2e1a3f219e0531ed674a378d737.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media_1bf3d0a6bb366c2e1a3f219e0531ed674a378d737.png?width=750&format=png&optimize=medium</a>" width="203" height="79"> </picture> </p></div> </div> <div> <div>Secondary</div> <div> <ul> <li>All actions that are not primary or negative path actions</li> <li>Do not stand out on the page</li> <li>Might be collapsed in menus</li> </ul> </div> <div><em>Copy</em></div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media1_11401ba21a9db9b3478889db940ba57da8d667653.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_11401ba21a9db9b3478889db940ba57da8d667653.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_11401ba21a9db9b3478889db940ba57da8d667653.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="Picture" src="<a href="https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media%5C_11401ba21a9db9b3478889db940ba57da8d667653.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media_11401ba21a9db9b3478889db940ba57da8d667653.png?width=750&format=png&optimize=medium</a>" width="188" height="68"> </picture> </div> </div> <div> <div>Negative Path</div> <div> <ul> <li>Navigates away from the current page without executing an action</li> <li>Usually one negative path action only</li> </ul> </div> <div> <p><em>Cancel</em></p> <p><em>Close</em> (for modal dialogs)</p> </div> <div> <picture> <source type="image/webp" srcset="/content/dam/sapcom/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media1_1dab4b33d126bca67d651c1ebefbcf7beaa57d3f1.png?width=2000&format=webply&optimize=medium" media="(min-width: 600px)"> <source type="image/webp" srcset="./media_1dab4b33d126bca67d651c1ebefbcf7beaa57d3f1.png?width=750&format=webply&optimize=medium"> <source type="image/png" srcset="./media_1dab4b33d126bca67d651c1ebefbcf7beaa57d3f1.png?width=2000&format=png&optimize=medium" media="(min-width: 600px)"> <img loading="lazy" alt="Picture" src="<a href="https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media%5C_1dab4b33d126bca67d651c1ebefbcf7beaa57d3f1.png?width=750%5C&format=png%5C&optimize=medium">https://www.sap.com/design-system/fiori-design-web/v1-136/foundations/best-practices/global-patterns/media_1dab4b33d126bca67d651c1ebefbcf7beaa57d3f1.png?width=750&format=png&optimize=medium</a>" width="207" height="38"> </picture> </div> </div></p>
Note that the example actions above don’t automatically belong to a specific type. The use case and context of the page determines whether an action is most important or less important to the user.
In the header and footer toolbar, actions are grouped as follows, based on their purpose in the business context:
<div> <div>Action Group</div> <div>What you need to know</div> <div>Examples</div> </div> <div> <div> <p>Workflow</p> <p>(also known as “finalizing actions”)</p> </div> <div> <ul> <li>Are related to the user’s task workflow (such as editing a form or a wizard)</li> <li>Represent steps in a process</li> <li>May include positive, negative or alternative paths that allow users to back out without changes or move forward with their changes saved</li> <li>The positive action is usually the primary action</li> <li>Typically trigger a page transition (for example, switching the mode from edit to display, or navigating away from the page)</li> </ul> </div> <div>Positive path:<br><em>Save, Submit, Accept</em> and <em>Reject</em> Alternative path:<br><em>Forward, Return</em> Negative (escape) path:<br><em>Cancel, Close</em></div> </div> <div> <div>Business</div> <div> <ul> <li>Trigger a task related to the object being viewed</li> <li>May be specific to the app, or more general tasks</li> </ul> </div> <div> <p>Specific:</p> <p><em>Add, Copy</em></p> <p>General: <em>Edit, Delete</em></p> </div> </div> <div> <div>Manage Content</div> <div> <ul> <li>Affect what information is displayed in the content</li> <li>Do not affect the overall UI layout</li> </ul> </div> <div><em>Filter</em></div> </div> <div> <div>Manage Layout</div> <div> <ul> <li>Change how the overall page is displayed</li> </ul> </div> <div> <p>View panel in full page</p> <p>Close panel (not used on standalone pages)</p> </div> </div> <div> <div>Generic</div> <div> <ul> <li>Are part of a general framework rather than a specific workflow</li> </ul> </div> <div><em>Share</em></div> </div>
Examples
List report with header toolbar and table toolbar
Object page with header toolbar and table section with table toolbar
Analytical list page with header toolbar, chart toolbar, and table toolbar
Wizard floorplan with inline action 'Next Step'
Top Tips
General
Place actions as close as possible to the content they affect – usually in a toolbar or, if needed, directly in a form or table row.
In toolbars, always right-align.
Action Order in Header Toolbar
Use the following order:
Business actions (such as Edit, Delete)
Manage content (such as Filter)
Manage layout (such as viewing a panel in full screen mode)
Generic (such as Share)
Recommended: Always place the action that is most important for your business context on the very left, even if the action belongs to a group further to the right.
Action Order in Footer Toolbar
Use the following order:
Primary workflow/finalizing action leftmost (such as Post)
Secondary actions (such as Return)
Negative path actions (such as Cancel)
Primary Action (Emphasized)
Use only one primary action per page.
Show a primary action or a semantic action, but never both.
Style
To help the user quickly identify primary, secondary, and negative path actions, apply the correct visual styles. For more information, see Action Types.
