20 results for Details page

Object Page Floorplan

Floorplans

...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...

Overview Page

Floorplans

...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...

Overview Page

Floorplans

...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...

Analytical List Page

Floorplans

...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...

Object Page - Content Area

SAP Fiori Elements

...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...

Object Page - Content Area

SAP Fiori Elements

...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...

Overview Page – Stack Card | Quick View Card

Floorplans

...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...

Message Page

UI Elements

...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...

Overview Page - Cards

Floorplans

...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...

Overview Page - Custom Card

Floorplans

...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...

Navigation

General Patterns

...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...

List Report Floorplan

Floorplans

...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...

Table Toolbar

SAP Fiori Elements

...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 Handling (Create, Edit, Delete)

General Patterns
Edit Page Floorplan - Featured image

...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...

Message Popover

UI Elements

...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...

Responsive Table

UI Elements
Responsive Table - Create01

...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...

Flexible Column Layout

Layouts

...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...

Best Practices for Designing SAP Fiori Apps

Get Started

...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...

Situation Handling

General Patterns

...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...

Tree

UI Elements
tree_final

.../ 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...