List Report – Header

Discover / Frameworks / SAP Fiori Elements / List Report / List Report – Header
information

No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.

To explore the design capabilities of SAP Fiori elements for OData V4 and the various options for the building blocks, and to experiment with their behavior – both standalone and when used in standard floorplans or custom pages, see: the SAP Fiori Development Portal.

information

No longer maintained, this article reflects the SAPUI5 version 1.136 release of SAP Fiori Elements for OData V2 and SAP Fiori Elements for OData V4.

For information on the latest release of both versions of SAP Fiori Elements, see: What's New in SAPUI5 documentation.

To explore the design capabilities of SAP Fiori elements for OData V4 and the various options for the building blocks, and to experiment with their behavior – both standalone and when used in standard floorplans or custom pages, see: the SAP Fiori Development Portal.

Intro

The SAP Fiori elements list report template supports the features and settings for the list report header detailed below.

For design information, see the List Report Floorplan guidelines and the links below.

warning

Put all controls for searching and filtering data in the list report filter bar.

Do not include the search or filter options that are available in the table header.

Feature Availability

<div> <div> <h4 id="features">Features</h4> </div> <div> <h4 id="availability">Availability</h4> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23page-level-view-management">Page-Level View Management</a></div> <div>Default, you can turn it off.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23share-menu">Share Menu</a></div> <div>Default</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23update-mode">Manual Update Mode</a></div> <div>Default</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23update-mode">Live Update Mode</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23search">Search</a></div> <div>Available</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23filter-bar">Filter Bar</a></div> <div>Default</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23initial-state-of-header">Initial State of Header</a></div> <div> <p>Default:</p> <ul> <li>Expanded on large screens</li> <li>Collapsed on medium and small screens when the application is configured to load the list report data on app launch</li> </ul> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23pin-button">Pin Button</a></div> <div>With SAP Fiori elements for OData V4, turned on when the list report contains at least one responsive table.</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23editing-status-filter">Editing Status Filter</a></div> <div> <p>Default for draft-enabled applications.</p> <p>You can hide it.</p> </div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23input-controls-for-filters">Input Controls for Filters</a></div> <div>Default</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23adapt-filters">Adapt Filters UI Element</a></div> <div> <ul> <li>Default: dialog with SAP Fiori elements for OData V2</li> <li>Default: popover with SAP Fiori elements for OData V4</li> </ul> </div> </div>

Feature Details

Page-Level View Management

By default, page-level view management is enabled and the header displays a page title.

You can disable it.

guideline
If you disable page-level view management, you must display a header title.

For more information, see Header Title.

Share Menu

By default, the header contains the generic Share menu with the global actions Send Email and Save as Tile. It can also include the:

[internal_only]With SAP Fiori elements for OData V4, you can control the visibility in the Share menu of the Send E-mail and Share: Microsoft Teams, and Collaboration Manager options at both application level and page level.[/internal_only]

[external_only]With SAP Fiori elements for OData V4, you can control the visibility in the Share menu of the Send E-mail and Share: Microsoft Teams.[/external_only]

Save as Tile

The tile created opens the list report with the same results shown at the time the tile was saved.

Users can also save a dynamic tile for results shown after the users have filtered for a relative date value, such as today or this year.

For more information, see:

hint

For more information, refer application developers to:

Update Mode

By default, the update mode is manual.

You can enable live update mode instead.

For more information, see Update Mode.

By default, the search is disabled.

You can enable it.

The limit for search strings is 1000 characters.

guideline
Work with the development team to define the searchable properties in the data.

For more information, see Search.

Filter Bar

SAP Fiori elements for OData V2 uses the smart filter bar.

SAP Fiori elements for OData V4 uses the filter bar.

With SAP Fiori elements for OData V4, you can also show a Clear button on the filter bar to let users:

warning

Put all controls for searching and filtering data in the list report filter bar.

Do not include the search or filter options that are available in the table header.

Initial State of Header

The default behavior is shown below:

<div> <div> <h4 id="screen-size">Screen Size</h4> </div> <div> <h4 id="application-starts-with-data">Application Starts with Data</h4> </div> <div> <h4 id="application-starts-without-data">Application Starts without Data</h4> </div> </div> <div> <div><strong>S</strong></div> <div>Collapsed</div> <div>Expanded</div> </div> <div> <div><strong>M</strong></div> <div>Collapsed</div> <div>Expanded</div> </div> <div> <div><strong>L</strong></div> <div>Expanded</div> <div>Expanded</div> </div> <div> <div><strong>XL</strong></div> <div>Expanded</div> <div>Expanded</div> </div>

Pin Button

With SAP Fiori elements for OData V4, the Pin :icon-pushpin-off/Unpin :icon-pushpin-onbuttons are displayed under the header when a list report contains at least one responsive table,

The pin option keeps the header collapsed or expanded when the user scrolls.

The grid table and the analytical tables are not scrollable so the Pin :icon-pushpin-off/Unpin :icon-pushpin-onbuttons are not displayed when the list report contains only these types of table.

For more information see, Pinning the Header Content.

Editing Status Filter

By default, the filter is enabled for draft-enabled applications. You can disable it.

The filter is a select control. Its values and corresponding results are as follows:

For more information, see Draft handling.

Input Controls for Filters

You can decide which filter/input controls to use and set the following for them:

hint
For information on defining the value help, refer application developers to Field Help.

You can also:

guideline

Date Picker and Date / Time Picker

By default, filter fields for the date picker (sap.m.DatePicker)and date/time picker (sap.m.DateTimePicker) result in a control that opens a dialog for adding multiple dates.

When your use case requires a date/time picker for a single value, specify this to the the application developers because it requires explicit configuration.

For more information refer them to: Configuring Filter Fields.

For more information, see:

Adapt Filters

By default, SAP Fiori elements for OData V2 uses the Adapt Filters dialog and SAP Fiori elements for OData V4 uses the Adapt Filters popover.

You can configure the following:

Users can add additional fields through views.

The OK and Cancel buttons are displayed when the application team or the user has chosen manual update mode for the filter bar.

By default, the Reset button is displayed, you cannot change this.

For more information, see: Adapt Filters.