Page History
...
Actions trigger functions, such as saving or deleting a business object. They can also trigger navigation to another [dashboard], where the action can be executed, described in detail, or checked further. Actions are displayed in the form of action icons or buttons.Actions that refer to a content are displayed at the top of the organism, next to the title that identifies the object. Actions that relate to the task workflow are located at the bottom right and can be performed after working through the content.
To make actions easier to organise and find, they are usually placed in toolbars. Depending on the content that is affected by the action, different toolbars are available. Within the toolbars, some actions are usually more important than others. Refer to the arrangements in the below examples for better understanding.
...
| Name | Use Case |
|---|---|
| Header toolbar | Actions that affects all applications and the entire user environment. It sits in the header area. |
| Boardlet toolbar | Actions controling a single boardlet and its content. It is always on the top- right side of the boardlet. |
| Ghost boardlet toolbar | It follows the boardlet toolbar rules with one exeption: The first actionbar has only one “More” icon. |
| Card toolbar | Card-specific actions like “Expand/Collapse” if the card supports expand. All other actions are gouped under a “More” icon. |
| Dialog toolbar | It contains actions related to the dialog and follows boardlet behavior. |
| Table row toolbars | Actions that pertain to a single row of a table. They always control functions of the entire row. |
For more information, please go to Toolbar Actions.
...
The footerbar has a fixed height and must never be multiline. Use only the allowed combinations.:
- Tabs only. Tabs are arranged side by side. There is no default number of tabs. Exeptions: Vertical tabs are placed below each other.
- Tabs with buttons. Use this when the boardlet has multilayer content and a content action. If an action exists only in one tab, show it disabled in all other tabs to avoid visual jumping. The number of possible actions is limited to a maximum of two buttons.
- Buttons only. Use this when an action is required in the boardlet. The number of possible actions is limited to a maximum of two buttons.
- Tabs with actionbar. Use this as a secondary display option. It can be used in kiosk mode to control tab rotation and timing.
For more information, please go to Footerbar Actions.
...
- Inline actions. The action molecule or organism is not enclosed by a body. The action is always on the left inside the molecule or organism.
- Actions. These actions also have no enclosing body. The action is always on the left inside the molecule or organism.
- Table Actions. They are placed inside an action column inside a table. Each row has the same actions. Actions effect the entire row.
For more information, please go to Content Actions.
...
The buttons follow a hierarchical order. It is important that you create a visual hierarchy between the buttons in your user interface. The hirachie moves linearly from right to left.
| Type | Definition | Examples | Styling |
|---|---|---|---|
| Primary | Most important action, usually works the workflow forward | Edit, Save, Submit, Apply | tba |
| Secondary | Non-primary but important actions, usually change the workflow | Copy, Cancel | tba |
| Negative Path | Navigates away from the current page without executing an action | Close (for modal dialogs) | tba |
 | |||
 | |||
 |
