...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...
...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....
...Dynamic Side Content You can display additional content to the right of an object page subsection. Consult with the development team on doing this with a standard extension. With this feature, the subsection toolbar contains a Show Details/Hide Details action for users to control the display of the dynamic side...
...size and types allowed for upload. Dynamic Side Content You can display additional content to the right of an object page subsection. Consult with the development team on doing this with a standard extension. With this feature, the subsection toolbar contains a Show Details/Hide Details action for users to control...
...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...
...formatting, aligned with the other cards on the overview page. Check the UI text guidelines for the overview page for details. Resources Want to dive deeper? Follow the links below to find out more about the SAP Fiori overview page. Elements and Controls Overview Page (SAP Fiori Element) (guidelines) Overview...
...to the details of an item. The subpage opens in edit mode. The title of the subpage reflects the current item, for example, Sales Order Item (10). The subpage shows a footer toolbar containing the Apply action and Cancel. After updating all the data, the user chooses Apply. The modified...
...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...
...Layout Complex objects - Edit items using the local flow From the main object page, the user navigates to the details of an item. The subpage features a header toolbar with an Edit button. The title of the subpage reflects the current item, for example Sales Order Item (10). If...
...OData V4 In the list report with SAP Fiori elements for OData V2 Show/Hide Details Available in responsive tables Actions Disabled Before Row Selection Available Conditional Enablement of Navigation Buttons Available with SAP Fiori elements for OData V4 Requires an extension with SAP Fiori elements for OData V2 Messages for...
...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...
...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 design works for...
...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...
...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.JTNDYnIlM0U=Situation Page Header (What...
.../ 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...
...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...
...the object pageJTNDYnIlM0U= 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...
Processing your feedback
Your feedback has been sent to the SAP Fiori design team. Thank you for your helping us to improve our guidelines!
