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

Analytical List Page

Floorplans

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

Object Page - Content Area

SAP Fiori Elements

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

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 - 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 the following purposes: It indicates what the card is about....

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

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

Complex Objects - Global Flow (Create, Edit)

General Patterns

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

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

Complex Objects - Local Flow (Create, Edit)

General Patterns

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

Table Toolbar

SAP Fiori Elements

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

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

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

Flexible Column Layout

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

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

UI Element States

UI Elements

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

Delete Objects

General Patterns

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