...page 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...
...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....
...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 information, see: Smart Link Quickview Quickview Examples Tables You can include a table in a subsection. For more information...
...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...
...cards, make sure that you define and format the texts on all the cards consistently. For details , check out the UI text guidelines for the overview page. Card anatomy Card Header The card header area is mandatory, and serves the following purposes: It indicates what the card is about....
...single-object cards. They display the basic details for one object, such as the name, address, and phone numbers for a contact. This card type is only available within the object stream; you can’t place quick view cards on the overview page itself. The quick view card inherits the SAPUI5 element...
...to an object page, scroll the list to the selected entry. If possible, show the entry as selected. If the object is not yet loaded in the list (growing list), show the beginning of the list next to the details area. In this case, there is no selection in the...
...can view and work with a large set of items. This floorplan offers powerful features for finding and acting on relevant items. It is often used as an entry point for navigating to the item details, which are usually shown on an object page. List report When to Use Use...
...the mass edit to subobjects.For more information, see Mass Edit. Developer Hint For more information on enabling this feature for an object page table with SAP Fiori elements for OData V4, you can refer application developers to Using the Mass Edit Functionality. Show / Hide Details The responsive table toolbar...
...object page floorplan. Many sections are display only, such as company information, salary, and employment contract details. An employee can only change personal information, such as their phone number and office location. Local flow Saves data on each page separately (main page and subpages), using the footer toolbar. Without draft...
...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 message details page. If the popover contains only one message that also has message details, the message details page is displayed by default (see Behavior...
...details are being shown in the second or third column. This is especially important for large lists. For this case, you can enable a “navigated” indicator for tables and lists to mark the item that was last opened. If there are several tables/lists on one page, ensure that the indicator...
...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...
...Fiori Elements. Step 3: Craft the Details Design the details of the different floorplan areas: header, content area, and footer. In the respective floorplan article (see navigation), you’ll find guidance on which controls can be used and how to arrange them. Balance your content area well and ensure that your...
...situations. Situation Page The situation page contains all the information relating to a given situation. Information With the availability of the enhanced situation page in the situation handling framework, the situation page is set to replace the object page as the default navigation target for situation details. Situation Page Header...
.../ 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...
...element enabled and provide a message if it is used incorrectly. Example: Enable a button even if the corresponding action can only be performed if a setting is made on another page or in a completely different subsection on the same page. A UI element is a finalizing action, such...
...this case, you can display a “navigated” indicator to show which item is currently open. Use the RowActions column only for one or both of the following actions: Navigate to details page ( ) Delete ( ) The RowActions column does not provide a column header text. It is fixed...
Processing your feedback
Your feedback has been sent to the SAP Fiori design team. Thank you for your helping us to improve our guidelines!
