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

[external_only]

Content Area

Availability

Draft Object Validation
Default, users can trigger the validation by pressing the Enter key while their cursor is in a field on the object or subobject page.
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

Link

Available

With SAP Fiori elements for OData V2, the default link shows the text and ID. You can remove the text or the ID.

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
Side-by-Side Display of Related Fields
Available with SAP Fiori elements V4
Display of Related Fields as Links
Available with SAP Fiori elements V4
Forms
Available
Growing Text Control

With SAP Fiori elements V4, the default length of the text entry area allows for four lines of text.

You can enable growing mode and set the maximum number of lines to display with this mode.

File Upload
With SAP Fiori elements for OData V4, users can upload a file to an object page property and delete it.
Dynamic Side Content
Available with an extension

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-Controlled Visibility with Show More/Show Less
Available
Visible Smart Form Fields
Default, you can hide them in certain conditions.

[/external_only][internal_only]

Content Area

Availability

Draft Object Validation
Default, users can trigger the validation by pressing the Enter key while their cursor is in a field on the object or subobject page.
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

Link

Available

With SAP Fiori elements for OData V2, the default link shows the text and ID. You can remove the text or the ID.

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
Side-by-Side Display of Related Fields
Available with SAP Fiori elements V4
Display of Related Fields as Links
Available with SAP Fiori elements V4
Forms
Available
Growing Text Control

With SAP Fiori elements V4, the default length of the text entry area allows for four lines of text.

You can enable growing mode and set the maximum number of lines to display with this mode.

File Upload
With SAP Fiori elements for OData V4, users can upload a file to an object page property and delete it.
Dynamic Side Content
Available with an extension

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-Controlled Visibility with Show More/Show Less
Available
Visible Smart Form Fields
Default, you can hide them in certain conditions.

[/internal_only]

Content Area

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:

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.

A reuse component that is used in an SAP Fiori elements-based application cannot be used in a freestyle application.

Consult the development team on the requirements for the reuse component.

Subsections

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:

For more information, see Smart Chart.

Variant Management for Tables and Charts

You can turn variant management on for:

For more information, see Views (Variant Management).

Address

You can add one or more address fields:

For more information, see:

In display mode, you can display two related fields side by side with a single label, even when they correspond to separate properties on the backend. Application developers call such fields semantically connected fields.

For example, you can display the properties:

  • Date and time with the label Date / Time
  • Length and width with the label Area (Length * Width)

A delimiter separates the values for the two properties.

A number of delimiters are available, including the forward slash (/), hyphen (-), and asterix (*).

Select the delimiter that makes sense for the properties and use the same delimiter in the label.

In edit mode, the values for the properties can be edited separately.

Side-by-side display of related fields

Side-by-side display of related fields

In display mode, the related properties can also be displayed as links to separate navigation targets.

Related fields as links

Related fields as links

For information on how to display related fields side by side and as links, refer Application Developers to: Grouping of Fields.

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:

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.

Implement this feature only when the way to enable the button is obvious to end users.

Columns in a Form

To optimize onscreen space, the default number of columns in a form depends on the screen size, as follows:

Column Number

Screen Size

1
Small
2
Medium
3
Large
6
Extra large
The default column number for each screen size complies with the SAP Fiori Design Guidelines for forms in Object Page floorplan. We recommended against changing it.

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:

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.

  • Do not use tables in the side content panel.
  • Do not add content that may introduce a horizontal scroll bar to the dynamic side content.
  • For the best view of the dynamic side content, set it to display in 50% of the screen.

For more information, see:

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

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:

For more information, see Responsiveness.