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:

• Navigation Bar
• Anchor Bar Navigation
• Tab Bar Navigation

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.

Reuse Components as Sections

You can embed a reuse component as a section in the object page.

Subsections

Tables

You can include a table in a subsection.

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

Address

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:

• Quickview
• Quickview Examples

Forms

You can add action buttons to the toolbar for a form contained in a subsection.

With SAP Fiori elements for OData V4, you can also add an action next to the form header.

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.

Conditional Enablement of Navigation Buttons

You can enable buttons that navigate the user to another page or application based on the value of a specific field with SAP Fiori elements for OData V4. To achieve this with SAP Fiori elements for OData V2 requires extensions.

For example, you can enable the Generate Purchase Order button only for sales orders with the completed status.

Groups in a Form

You can group fields in a form and assign a name to the group.

Note that the group name is displayed only when a group contains fields.

User-Controlled Load of Fields with Low Importance

To improve the performance on application startup, you can prevent form fields with low importance from loading until the user clicks Show Details with SAP Fiori element for OData V4.

After the user clicks the button, the fields are loaded and the Hide Details button is displayed.

Text Control

By default, with SAP Fiori elements for OData V4, in edit mode, the default length of the text control allows for the entry of four lines of text.

You can:

• Set a maximum number of lines for the text control that’s greater than four.
• Enable growing mode: The length of the text control on first load allows for four lines. After the user has entered that number of lines, the length grows by one line at a time until it reaches the maximum number. A scrollbar is displayed next to the text entry area.

In display mode, the text is truncated to 100 characters and a More link allows the user to display the full text. Alternatively, you can set the full text to display in a popover when the the user clicks More.

File Upload

With SAP Fiori elements for OData V4, users can upload a file to an object page property and delete the file.

For example, the sales order object can have a property for a contract and users can upload the contract file to the property.

The application developers can define the file 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 the display of the dynamic side content. By default, the side content is hidden. You can show it instead. You can also rename the action to make it meaningful to the end user.

For more information, see:

• Dynamic Side Content
• Object Page: Dynamic Side Content

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.

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-Controlled Visibility

You can enable the Show More/Show Less button in the bottom right corner of a section to let users control the display of subsection content.

• When the subsection is hidden, Show More is displayed.
• When the subsection shows, the 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