...header and not the former object page header. Using the old object page header creates issues that can’t be fixed retrospectively. Using the dynamic header will also ensure consistency across all floorplans and provide greater flexibility. For details, see the Header section below. Do not use the current implementation of...
...header and not the former object page header. Using the old object page header creates issues that can’t be fixed retrospectively. Using the dynamic header will also ensure consistency across all floorplans and provide greater flexibility. For details, see the Header section below. Do not use the current implementation of...
...you define and format the texts on all the cards consistently. Check the UI text guidelines for the overview page for details. For more information about the cards and card types available for the overview page, see the dedicated topics: Analytical Card List Card Bar Chart List Card Link List...
...Information We continually optimize the SAP S/4HANA My Home page, so some details described in this guideline may differ from what you see in the latest demo systems. Intro The SAP S/4HANA product home page is an alternative to the SAP Fiori launchpad My Home page when using...
...to the components within the page container and depend on the application use case. For details, see the guidelines for the individual components, such as the button.Example: Using a button in the header to navigate between pages Responsive Behavior The page offers considerable freedom and flexibility and the page header...
...group header can contain the table name, along with title of the page section (see Messaging for Tables). 'Last Action' group in the message list Navigation to Message Details (6) If message details are provided, the message popover automatically provides a chevron on the right-hand side for navigating to the...
...and Object Marker. Showing more information Action Description Show Details Show more information within the same page or dialog (for example, a message long text within a message dialog). View Details (Charts) Display additional information about a chart. Show More Expand a list or screen area. Show Less Collapse a...
...be hidden. When at least one column is hidden, the table toolbar displays the Show Details button so users can view the previously hidden columns in the table pop-in area. After the user clicks Show Details to display the column, the action changes to Hide Details. You can also assign...
...list item and a popover displays the situation preview (3.1). They select Show Details to navigate to the situation detail view, (4) or (5) depending on the configuration. D. Navigation from the situation indicator in the header of a business app In a business app, on an object page, users...
...in the list-detail or list-detail-detail layout, the content of the details column changes to reflect the data of the newly selected item. If the item is selected in the first column, and the last column was open before the new item was selected, selecting the item closes the last column....
...set in object pageOther possible scenarios: Warranty claim: Users need to upload images of a damaged item. Product details: Editors can upload product pictures that will be shown in the online shop. Service history: Whenever maintenance is carried out, the service worker attaches a document to the object. Top Tips...
...of the tab bar Tab Icon: Icon for the tab. Text: Text for the tab. Additional text: Supplementary text for a tab, such as a count. Subtabs: A tab can contain subtabs. For details, see Hierarchies. The visual representation of the tab adapts automatically, depending on the elements it contains.Anatomy...
...list, settings for chart, or details for map) Important: Ensure that users have access to all of the key functions and critical information even if they don’t see the side content. It might not be easy for users to access the side content on smaller screens. Don't Don’t use dynamic...
...popover: If you need to define your own structure. If you have very little content. Don't Don’t use a popover: If the content takes up more than a third of the screen real estate on phones. Use the responsive popover instead. To show details for a list item in list-detail...
...be paired with a message. Headline: Explains the reason for the empty state, preferably in a single line. Description: Adds details and, where appropriate, tells the user what to do next, in three lines or less. Button (optional): If there is a clear next step, include a call to action...
...you need to display tabular data. To enable selection of one or more items when details are needed to choose the correct item. If rows are independent of each other and no operations are required across columns. If you want to have only one implementation for all devices. Don't Don’t...
Processing your feedback
Your feedback has been sent to the SAP Fiori design team. Thank you for your helping us to improve our guidelines!
