...that 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...
...be represented visually using charts, but doesn’t need to be linked to the transactional dataset. Analytical list page - Chart-only view Table-Only View The table view provides access to transactional content. The user can act on single or multiple objects, and navigate to the object details or to other applications....
...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...
...development team on the requirements for the reuse component. Subsections Smart Link Contact With SAP Fiori elements for OData V2, you can include one or more smart link contacts in the subsections. The smart link contact can include a contact list and a quickview of the contact details. For more...
...large. For the other tiles, create a duplicate that is shown in the Favorites subsection. Personalize Cards Users can select up to 10 cards to be shown on My Home. They can drag and drop the entries to change the order of the cards.In the details view, users can delete...
...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...
...off. Show/Hide Details Available in responsive tables Mass Edit Available in draft-enabled applications: In both the list report and object page with SAP Fiori elements for OData V4 In the list report with SAP Fiori elements for OData V2 Export With SAP Fiori elements for OData V4: Export to Spreadsheet...
...the click triggers navigation to a corresponding details page. Single select master: One item in the responsive table can be selected. Items are selected by clicking the whole row. The single select master mode has no obvious visual cues, such as checkboxes or radio buttons. It only provides a light...
.../ sap.m.ListBase, property: mode):None: Items cannot be selected (sap.m.ListMode.None). Beware: Items can, nevertheless, use the sap.m.ListType “navigation” which allows click-handling on specific items. This should only be used when the click triggers a navigation to a corresponding item details page. Tree without selectable items Single select master: One item of...
...the object page From a list report, the user navigates to the object details. The user selects Delete in the header toolbar of the object page. A message dialog prompts the user to confirm deletion. Delete closes the dialog. The user sees the updated list report and a confirmation message...
...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...
...The user selects an item to be copied. Multiselection is not possible. Clicking the Copy button takes the user to the details page. Copied object is part of a tableThe form is prefilled with the data from the selected item on the previous page. The form remains in edit mode...
...the corresponding items. Use this to navigate to a new page containing item details. Edit: Use the “Detail” item type (sap.m.TreeItem / sap.m.ListItemBase, property: type, value: sap.m.ListType.Detail). This places an Edit icon at the end of the corresponding items. You can combine delete and edit actions, or delete and navigation...
...appointment to see further details. The app development team must define what kind of information is then shown. For example, clicking an appointment can trigger a popover with detailed information. Users can select more than one appointment at a time via Ctrl/Cmd + click. If the multipleAppointmentsSelection property is set...
...loss warning appears. 'Create with Reference' using a dialog Create with Reference on Details Page Clicking the Create button takes the user to the details page. This page contains an unchecked checkbox and a large form with editable fields for creating the new object, such as a line item.If the...
...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...
...(key) attribute of an object and its unit. It consists of the following: A colored text (property: number) based on the semantic color palette. Check out the How to Use Semantic Colors / Industry-Specific Colors article for more details. An optional unit (property: unit). Emphasized and non-emphasized object numbers An...
...standardized across all platforms, the design languages cater for the specifics of the respective technology platforms. Each design language details out the look and feel, the available controls and floorplans/pages, and common functions like navigation and search. The SAP Fiori design languages are already implemented in key reference technologies, including...
...for UX design. My Situations comes with the standard framework for Situation Handling and is a simplified version that contains only a work list. Overview in a Situations App Situation Detail View NEW The situation details view displays the situation with contextual information from the time the situation was created,...
Processing your feedback
Your feedback has been sent to the SAP Fiori design team. Thank you for your helping us to improve our guidelines!
