- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
- Latest Version 1.128
- Version 1.126
- SAPUI Version 1.124
- SAPUI5 Version 1.122
- SAPUI5 Version 1.120
- SAPUI5 Version 1.118
- SAPUI5 Version 1.116
- SAPUI5 Version 1.114
- SAPUI5 Version 1.112
- SAPUI5 Version 1.110
- SAPUI5 Version 1.108
- SAPUI5 Version 1.106
- SAPUI5 Version 1.104
- SAPUI5 Version 1.102
- SAPUI5 Version 1.100
- SAPUI5 Version 1.98
- SAPUI5 Version 1.96
- SAPUI5 Version 1.94
- SAPUI5 Version 1.92
- SAPUI5 Version 1.90
- SAPUI5 Version 1.88
- SAPUI5 Version 1.86
- SAPUI5 Version 1.84
- SAPUI5 Version 1.82
- SAPUI5 Version 1.80
- SAPUI5 Version 1.78
- SAPUI5 Version 1.76
- SAPUI5 Version 1.74
- SAPUI5 Version 1.72
- SAPUI5 Version 1.70
- SAPUI5 Version 1.68
- SAPUI5 Version 1.66
- SAPUI5 Version 1.64
- SAPUI5 Version 1.62
- SAPUI5 Version 1.60
- SAPUI5 Version 1.58
- SAPUI5 Version 1.56
- SAPUI5 Version 1.54
- SAPUI5 Version 1.52
- SAPUI5 Version 1.50
- SAPUI5 Version 1.48
- SAPUI5 Version 1.46
- SAPUI5 Version 1.44
- SAPUI5 Version 1.42
- SAPUI5 Version 1.40
- SAPUI5 Version 1.38
- SAPUI5 Version 1.36
- SAPUI5 Version 1.34
- SAPUI5 Version 1.32
- SAPUI5 Version 1.30
- SAPUI5 Version 1.28
- SAPUI5 Version 1.26
Object Page – Content Area
Intro
The SAP Fiori elements object page template supports the features and settings for the object page content area detailed below.
For design information, see the Object Page Floorplan guidelines and the links below.
Feature Availability
Content Area |
Availability |
Navigation Bar: Anchor Bar | Default, you can turn it off when you only have one section. |
Navigation Bar: Tab Bar | Available |
Sections and Subsections | Available |
Reuse Components as Sections | Available |
Subsections |
Availability |
Smart Link Contact | Available, SAP Fiori elements for OData V2 only |
Tables | Available |
Smart Charts | Available |
Variant Management for Tables and Charts | Available |
Address | Available, SAP Fiori elements for OData V2 only |
Forms | Available |
Subsection Behavior |
Availability |
Subsection Starts Loading After the Object Page Elements Are Loaded | Default, you can change the behavior. |
Adjustment of the Width for Content Display in a Subsection | Available |
Content Visibility |
Availability |
Visible Sections, Subsections, Quickviews, and Tables | Default |
Hiding Section, Subsection, Quickview and Table Content | Available |
User Control of Visibility with See More/See Less Links | Available:
|
Visible Smart Form Fields | Default, you can hide them in certain conditions. |
Content Area
Navigation Bar
By default, the anchor bar is generated when the object page has at least one section.
It lets users navigate to the individual content area sections.
You can:
- Hide the anchor bar when you only have one section.
- Replace it with a tab bar.
With extensions, you can replace the buttons with another type of control.
For more information, see:
Sections and Subsections
You can add sections and subsections to the content area.
Sections contain only subsections. You build the subsection content with tables, charts, and forms.
For more information, see: Sections and Subsections.
Reuse Components as Sections
You can embed a reuse component as a section in the object page.
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:
Tables
You can include a table in a subsection.
For more information on SAP Fiori elements capabilities for tables, see the articles under SAP Fiori Elements: Table, starting with Table Types.
Smart Charts
You can include a single smart chart facet in a subsection.
In a smart chart, you can:
- Display measures, aggregations calculations, and dimension categories as labels in the chart.
- Add actions to the toolbar for a smart chart and define whether they are enabled always or only after the user selects part of the chart for the action.
For more information, see Smart Chart.
Variant Management for Tables and Charts
You can turn variant management on for:
- All the tables and charts on the page
- Individual tables and charts
For more information, see Variant Management.
Address
With SAP Fiori elements for OData V2, you can add one or more address fields:
- As a separate subsection
- As part of a field group within a subsection
- To a quick view with smart link navigation
For more information, see:
Forms
You can add action buttons to the toolbar for a form contained in a subsection.
In the subsection toolbar, the action types can be:
- Actions that occur in the system while the user stays on the object page.
- Actions that navigate to a different application, for example, when the user can open a purchase requisition from a specific purchase order.
Subsection Behavior
Subsection Loading Behavior
By default, the subsection starts loading after the main object page elements are loaded.
You can change the loading behavior to load the subsection after the header data is loaded.
Example
When the subsection contains a table or chart and you want to allow the user to filter in the header before subsection data loads.
Width for Content Display in a Subsection
When you mix content — such as forms and tables — in one subsection, you can adjust the width allotted to each content type to display a table next to a form.
Content Visibility
Sections, Subsections, Quickviews, and Tables
By default, the object page displays these components.
You can set the entire components or selected content in the components to be displayed or hidden in the content area, according to the object’s state. For example, you can hide the Delivery section in a Sales Order until the order has a status where the delivery is planned.
User Control of Visibility
You can turn on these links to allow users to control the display of subsections with the:
- See More/See Less link with SAP Fiori elements for OData V2.
- Show More/Show Less link with SAP Fiori elements for OData V4.
The links display in the bottom right corner of the section:
- When the subsection is hidden, the See More or Show More link is displayed.
- When the subsection shows, the See Less or Show Less link is displayed.
Visibility of Smart Form Fields
By default, all smart form fields have the high importance setting and show on all screen sizes.
You can lower the level of importance for the fields to hide them on smaller screens.
According to the importance assigned to the field, it is displayed as follows:
- High (default): On all (small, medium, and large) screen sizes.
- Medium: On large and medium screens only.
- Low: On large screens only
For more information, see Responsiveness.
Related Links
Elements and Controls
- Object Page Floorplan (guidelines)
- Smart Link (guidelines)
- Quickview (guidelines)
- Smart Chart (guidelines)
- Variant Management (guidelines)
- Responsiveness (guidelines)