...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...
...the overview page for details. For more information about cards and card types, see the dedicated topics: Analytical Card List Card Bar Chart List Card Link List Card Table Card Stack Card | Quick View Card Custom Card Responsivess The overview page is fully responsive and can accommodate typical laptop...
...data that can easily 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...
...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 information, see: Smart Link Quickview...
...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...
...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...
...you are using to call the app. Error case – With link Formatted Text and Buttons Message page with buttons Message page with formatted text Top Tips Always include an icon, a message headline and a description with further details. Do not show only the state of the message (like...
...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 three purposes: It indicates what the card is about. It...
...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 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...
...object page table with SAP Fiori elements for OData V4, you can refer application developers to Using the Mass Edit Functionality.JTNDYnIlM0UlMjAlM0MlMkZiciUzRQ== Show / Hide Details The responsive table toolbar displays the Show Details action when at least one column is hidden from the screen because of limited onscreen space. After...
...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...
...be selected (sap.m.ListMode.None). Note: Line items can still use the sap.m.ListType “navigation”, which allows click handling for specific line items. Only use this option if 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...
...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...
...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...
...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...
Processing your feedback
Your feedback has been sent to the SAP Fiori design team. Thank you for your helping us to improve our guidelines!
