Object display components help users quickly identify objects that are based on its semantic status or its key identifier, so that they can work with objects efficiently. The purpose of this inventory is to make sure that these indicators appear in the same format across all Database, Data Management & Analytics products.
Fiori Components
Most object display components in Database, Data Management & Analytics products are based on the following Fiori standard components. You can find how to use them from the Fiori Design Guidelines and please also look at the next sections about guidelines for specific use cases.
Here is a list of object display components that need extra attention when you design applications with them. You can find details for each component by clicking its name.
<div> <div>Name</div> <div>Description</div> <div>Products</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2F-Nk5Xk-6ma3Scccr40Mt7L8z94V4EnSyP79Jq-EkMgE">Database Status</a></div> <div>The status of the HANA instance.</div> <div> <p>SAP HANA Cockpit</p> <p>SAP HANA Cloud Central</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2F7Bx7iOs6TFDk5h0kT8suU5I_8OWDjcsTwFJQnpXJJII">Database Usage Type</a></div> <div>What the database is used for.</div> <div> <p>SAP HANA Cockpit</p> <p>SAP HANA Cloud Central</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2FVx6aBMO7RGvpttpRQTxDGWNsfp-qegsgUJ8xcG417Mw">Space Health</a></div> <div>The status of the DWC space.</div> <div>SAP Data Warehouse Cloud</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fr%2FHXIsqA8zifYpE3Az-A1BpC2-2VxgVpcKuxOPpy_mbaw">Storage Type</a></div> <div>The type of data storages by performance in HANA Cloud, also know as data tiering.</div> <div> <p>SAP HANA Cockpit</p> <p>SAP HANA Cloud Central</p> </div> </div>
Database Status
This indicator represents the semantic status of a HANA database with a status icon and a short text message in a corresponding semantic color.
Usage
Use this pattern if you need to communicate the status of the HANA instance.
Theming and Styles
Color
Use different text colors for each indicator accordingly based on its state: success, warning, and error.
Success (positive) is for objects in the positive or correct status.
Warning (critical) is for objects that have minor issues and need the user’s attention in the near future.
Error (negative) means that an object has an error that requires immediate user action.
Status Icon
Status icons are inherited from the state of the indicator: success, warning, and error. However, it can be customized in specific cases, but with caution.
information
NoteAs Object Status icons have been updated in SAPUI5 version 1.76, the guidelines reflect this change and it may look different with the current implementation.
List of Currently Available Status
On-Premise
<div> <div>Status</div> <div>Status Icon (SAP Icon)</div> <div>State (Color)</div> <div>Description</div> </div> <div> <div>Error</div> <div>message-error</div> <div>Error (negative)</div> <div>The database cannot be accessed.</div> </div> <div> <div>Stopped</div> <div>message-error</div> <div>Error (negative)</div> <div>The database isn't running.</div> </div> <div> <div>No SQL access</div> <div>message-error</div> <div>Error (negative)</div> <div>The database is running but isn't responding to SQL queries.</div> </div> <div> <div>License expired</div> <div>message-error</div> <div>Error (negative)</div> <div>The database is running but its software license has expired.</div> </div> <div> <div>Transitioning</div> <div>pending</div> <div>Warning (critical)</div> <div>The database is starting or stopping.</div> </div> <div> <div>Running with issues</div> <div>message-warning</div> <div>Warning (critical)</div> <div>The database is running but has one or more high-severity alerts.</div> </div> <div> <div>Invalid technical user</div> <div>message-warning</div> <div>Warning (critical)</div> <div>The database is running with incorrect or expired credentials.</div> </div> <div> <div>Running</div> <div>message-success</div> <div>Success (positive)</div> <div>The database is running.</div> </div>
NoteThe database of “Production” type is a live system that is actively used by business users and thus requires a special attention. Therefore, only this type uses an Object Status component to be highlighted.
Guidelines
Format a usage name in title case (Capitalize the first letter of the first, the last word and each “major” word. Do not capitalize “minor” words unless they are at the beginning or at the end of the phrase. “Minor” words are words that you could leave out without changing the meaning, such as “the”, “a”, “an”, “at”, “from”, “to”, “with”, “by”) except "Production" type. It is formatted in uppercase by its component.
This indicator should be used in a context where a user can easily connect it to an object.
Space Health
This indicator represents the semantic status of a DWC space with an icon and a number of related spaces (optional, only if they are used to present the summary on multiple spaces).
Usage
Use this pattern if you need to communicate the status of the DWC space.
Theming and Types
Each type has its own semantic color and icon. Use them consistently in products.
<div> <div>Status</div> <div>Icon (FPA-icons)</div> <div>Color</div> <div>Description</div> </div> <div> <div>Cold</div> <div>temperature-cold</div> <div> <p>@sapInformativeColor</p> <p>#0A6ED1</p> </div> <div>The used storage is 5% or less.</div> </div> <div> <div>Green</div> <div>completed</div> <div> <p>@sapPositiveColor</p> <p>#107E3E</p> </div> <div>The used storage is between 5% and 90%.</div> </div> <div> <div>Hot</div> <div>temperature-hot</div> <div> <p>@sapCriticalColor</p> <p>#E9730C</p> </div> <div>The used storage is greater than 90%.</div> </div> <div> <div>Hibernated</div> <div>moon</div> <div> <p>@sapNeutralColor</p> <p>#6A6D70</p> </div> <div>The space is no longer active.</div> </div> <div> <div>Locked</div> <div>security</div> <div> <p>@sapNegativeColor</p> <p>#BB0000</p> </div> <div>The capabilities of the space have been limited due to insufficient storage.</div> </div>
Find more details about each status on Space Status (SAP Help Portal)
Storage Type
Different colors are used to inform users of how the data storage of a HANA Cloud or related services is configured with different data storage types, such as in-memory, Native Storage Extension (NSE), or Data Lake.
Usage
Use this pattern if you need to present the data storage information while emphasizing each storage type.
Theming and Types
Storage type colors are based on semantic colors and industry-specific colors of Fiori Design Guidelines.
Read the guideline to learn more on how to use these colors.
<div> <div>Storage Type</div> <div>Color</div> <div>Description</div> </div> <div> <div>Hot</div> <div> <p>@sapUiIndication8</p> <p>#c0399f</p> </div> <div>Fastest and expensive data storage. For example. In-memory.</div> </div> <div> <div>Warm</div> <div> <p>@sapUiIndication7</p> <p>#925ace</p> </div> <div>Medium-speed data storage. For example, Disk</div> </div> <div> <div>Cold</div> <div> <p>@sapUiIndication6</p> <p>#0f828f</p> </div> <div>Slowest and cheap data storage. For example, Data Lake</div> </div> <div> <div>Neutral</div> <div> <p>@sapNeutralColor</p> <p>#6a6d70</p> </div> <div>Any storage not available for data-tiering. For example, ASE</div> </div>
Guidelines
These colors can be applied to Fiori components that suit to present the data storage information, such as Text, Micro Chart, or VizFrame Chart.
2
do
false
Color a component with the context.
dont
false
Don't apply these colors in a component for the decoration purpose without any context.
Download icons for Database, Data Management & Analytics products.
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.
