Introduction
The shape status bar is an optional sub-area of the shape made of icons and figures to display counters and status indicators (A)
Disclaimer:
- This guideline is aligned with the UX Consistency Product Standard for colors, theming, typography and iconography (Fiori 3 Quartz Light), which might not be implemented yet in the product on which you’re working.
- For designers who work on modeling, this guideline describes how we want to unify modeling across our products. For developers of the Galilei library, this guideline acts as specifications for future developments.
Usage
The shape status bar gives the most important informations of the state of an object that are necessary to make decisions when interacting in the diagram without the help of the properties panel.
For more information, including more status informations, the user will select the object and look at the properties panel content.
Anatomy
The status bar area (A) is contains two areas:
- the Counters justified on the left (B)
- the status indicators OR the object intrinsic errors on the right (C)
Icon height: 11px
Font: 11px
Spacing between the main area and status bar (D): 2px
Spacing between each item (E): 4px
Spacing between the icon and the number in a counter (F) : 2px
Counters
Counters give some structural information of the object by counting sub-objects or related objects per type.
A counter representation starts by an icon (A) that represents the type of objects followed by the number of instances of that type (B).
If there is no instances (count = 0), the counter is not displayed (C)
If each counter can be individually selectable to display a pop-over with the associated list of items, the counter is shown as a link (D)
Status Indicators
A status indicator represents a property having 2 values. The visibility of the icon represent one if this value and the related statement/assertion on the object.
- icon visible: Statement X (ex: Object A is updated)
- icon invisible: Negation of the Statement X (ex: Object A is not up-to-date)
The statement that correspond to the visible icon is not necessarily a positive assertion. The indicator can be based on the opposite statement in order to represents the least likely case to lighten the UI. Nevertheless, it depends also on how the state is represented outside of the diagram.
The position of each status indicator relatively to the bottom right corner is fixed. It allows find out all shapes with or without an icon more quickly and with less cognitive effort than if all visible icons where justified on the right.
Display an status indicator if you need to find quickly objects having or not having this status.
Display a status indicator to avoid the user to select every shape to find in the property panel the information searched.
Don’t display a status indicator of a corresponding property that is not displayed in the property panel. Check that the statement also be understood by reading only the properties panel.
Don’t mix several statuses into one a complex indicator having a lot of values. It is not recommended to create icons with a mix of several significations.
Don't display properties having more than 2 values (like for exemple, the number version of the object). Don't display text, don't display more than one icon per indicator
- Prefers to display the information elsewhere in the shape (for example concat the version number after the object's name when it's not the last version).
- or create a specific status based on this value (for example: display an indicator to say "This object version is not the last one" or "A new version of this object is available")
Avoid to display the normal ending state of an object as the indicator visible. Prefers to display that state as the indicator invisible. In consequence, right objects will be light and clean objects.
Intrinsic Error Indicators
An "intrinsic" object error is an error concerning the object itself, independently of its use in the current diagram. So the modification of the diagram will not solve this error. Only an action directly on the object can solve the issue. (BTW, this corrective action must be available outside the diagram, and can be available inside this diagram as a shortcut)
Do not make the confusion with an error coming from the current modeling which is an error on the current diagram using the current object. In that cases, the error are displayed as a shape badges
When there is at least one intrinsic error, the status indicators area is NOT displayed and is replaced by the error indicators area.
This area starts by the error icon followed the icons of the most important errors icon (A).
If a representation by an icon does not give enough meaning or if displaying several error icons is confusing, a counter is displayed instead (B).
The error is represented by an error icon and the icon of an indicator or a counter, colored in the negative semantic color. (@sapNegativeElementColor, @sapUiNegativeText
#BB0000).
Behavior and Interactions
:
The default width of a shape will be equal or higher that the minimal width of the status bar to see all counters and all status indicators in one row (B).
When the shape is resized to a smaller width (A) , the status bar is displayed in two rows with a 2px vertical separation.
When increasing the default width, the counters remains justified on the left and the status indicators (or errors) on the right (C)
:
- Counters can be selectable as link to display additional information. Their selection does not select the shape.
- Status indicators are not selectable. To change the status of the object, use a call to action (icon or item menu) in the contextual toolbar, contextual menu, diagram toolbar or application toolbar.
- Error indicators are not selectable. To correct the error, the user should simply select the object and appropriate information should appear. In that case, if icons are used to show the type of the error in the shape, then this icon should also be visible with the message title to allow the user to learn what it is about.
:
Due to the intense usage of the mouse on diagrams and their constant presence, we don't allow tooltips over icons to avoid disturbing the user from it's modeling task with frequent apparition of these tooltips.
Related Links
Support
If you have any questions or feedback about this page, please contact our team. For further information and questions in regards to the Design System, please visit the DNA Design SharePoint.