List Report – Header

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

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></div> <div></div> </div> <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%2Fv1-92%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23pagelevel-variant-management">Page-Level Variant 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%2Fv1-92%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23share-menu"><em>Share</em> Menu</a></div> <div>Default</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-92%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%2Fv1-92%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23update-mode">Live Update Mode</a></div> <div>Available with SAP Fiori elements for OData V2 only</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-92%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%2Fv1-92%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%2Fv1-92%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%2Fv1-92%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%2Fv1-92%2Fdiscover%2Fframeworks%2Fsap-fiori-elements%2Flist-report%2Flist-report-header-sap-fiori-elements%23editing-status-filter">Editing Status Filter</a></div> <div>Default for draft-enabled applications</div> </div> <div> <div><a href="https%3A%2F%2Fwww.sap.com%2Fdesign-system%2Ffiori-design-web%2Fv1-92%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%2Fv1-92%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 Variant Management

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

You can disable it.

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

For more information, see Header title.

Share Menu

By default, the header contains:

For more information, see:

Update Mode

By default, the update mode is manual.

You can enable live update mode instead with SAP Fiori elements for OData V2.

For more information, see Live Update / Manual Update.

By default, the search is disabled.

You can enable it.

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.

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

The filter values and corresponding results are as follows:

Note that users see their own drafts of unsaved changes, but not the corresponding active version of the document.

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:

You can also decide on the selection controls for the filters.

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

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.

Elements and Controls

Implementation