Adapting the UI: List Report and Object Page

Application developers can extend and customize specific features of the list report and object page.

We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to adapt the list report and object page.

You can find details about how app developers can adapt the UI in SAP Fiori elements for OData V2 in the section below.

In SAP Fiori elements for OData V4, app developers adapt the UI using the manifest settings. You can search for features and navigate to the related documentation for more details in the SAP Fiori Elements Feature Map.

Additional Features in SAP Fiori Elements for OData V2

Note:

Adapt the UI only for the use cases described here. Otherwise, you might experience issues regarding consistency, compatibility, or other problems, immediately or in future releases.

You can also use SAP Fiori tools to extend and customize specific features of the list report and object page. For more information, see Configure Page Elements.

Note:

In the Page Editor, a property is written with spaces in between for better readability. In SAP Fiori elements, whenever we provide a property, it is written in the actual code format.

Adapting the UI: List Report

Feature	Setting
Display/Hide the Export to Excel button in the table toolbar.	Change the `enableExport` property to either `True` or `False`.
Change the column width.	Choose the column of a table in the outline of the Page Editor and change the `Width` property as needed. Note: Changing the width of custom columns using the Page Editor isn't supported; instead, the `Width` property can be defined directly in the fragment.
Center-align status columns.	Choose the column of the table in the outline of Page Editor and set the `hAlign` property to `Center`. For vertical alignment of the whole responsive table, see Tables. Note: The `hAlign` property cannot be changed for custom columns through the Page Editor; instead, it can be defined directly in the fragment.
Modify the standard list report behavior for analytical, grid, and tree table types to not occupy the entire space available in the container.	Set the `fitContent` property of the dynamic page to `false` with the Page Editor. By default, `fitContent` is set to `true` for analytical, grid, and tree table types in list report pages.
Change the layout of the list report table for better readability for a high number of columns.	In the table, set the `popinLayout` property with the Page Editor to one of the following values: `Block` `GridSmall` `GridLarge` The default layout is `Block`.
Change the default value of the `scrollThreshold` parameter in grid tables, analytical tables, and tree tables.	In the outline, choose the table that requires a change to its `scrollThreshold` parameter, and update it with the new value. The default value is 300.
Enable or disable live mode in the filter bar.	Change the `liveMode` property of the smart filter bar to either `True` or `False`. For more information, see the API Reference.
Determine whether row selection in a responsive table persists or resets after a refresh or data update.	Set the `rememberSelections` property to either `True` or `False`. The default value is `False`.

Adapting the UI: Object Page

Feature	Setting
Change the avatar shape in the object page dynamic header from a square to a circle.	On the header of the object page, set the `displayShape` property to `Circle`.
Hide the anchor bar.	In the page layout node, set the `showAnchorBar` property to `false`.
Switch to tabs.	In the page layout node, set the `useIconTabBar` property to `true`.
Display the Export to Excel button in the table toolbar.	In the table node, set the `enableExport` property to `true`.
Show header content in edit mode.	In the page layout node, set the `showHeaderContent` property to either `true` or `false`, to determine the header content visibility. Alternatively, you can make a binding change if you need to change the value according to a property or an expression. For more information, see Creating a Binding Change.
Don't collapse headers when scrolling down.	In the page layout node, set the `alwaysShowContentHeader` property to `true`. Note: On small-screen devices such as tablets and mobile phones, the header collapses automatically.
Change the default `growingThreshold` value for `sap.m.Table` in the object page. The default value is 10. Note: When there is a single section with a single subsection holding a table, the default `growingThreshold` value is 20, and it cannot be changed.	In the table node, set the new value for the `growingThreshold` property.
Set tables to not editable. By default, object page tables are automatically set to `editable` if the object page is in edit mode. This means that users can only access editable table content when they navigate through the table using the [Tab] key. However, the [Tab] key cannot be used in a table with non-editable content.	Set the `editable` property of the table to `false`. The inner table's `navigationMode` property is set to `Navigation`. Users can then navigate through the entire focusable table content.
Enable Include Item In Selection for tables. By setting this property to `true`, the item selection is displayed even if a user navigates away from a table.	In the table node, set the `includeItemInSelection` property to `True`.
Enable the Save and Edit button in non-draft applications. Users can click this button to save the current changes. The object page stays in edit mode so that they can continue editing.	In the outline view of the object page, select the `Save and Edit` action from the `Actions` within `Footer` and change the visibility to `{ui>/editable}`.
Change the layout of the table to improve readability when viewing many columns.	In the table node, set the `popinLayout` property to one of the following values: `Block` `GridSmall` `GridLarge` The default layout is `Block`.
Change the default value of the `scrollThreshold` property in grid tables, analytical tables, and tree tables.	In the table node, set the new value for the `scrollThreshold` property. The default value is 300.
Determine whether row selection in a responsive table persists or resets after a refresh or data update.	Set the `rememberSelections` property to either `True` or `False`. The default value is `False`.

More Information

For more information, see Creating a Binding Change.