Adapting the UI: Analytical List Page

Adapting the UI: Analytical List Page

You can extend and customize specific features of the analytical list page.
Note

This topic is only applicable to SAP Fiori elements for OData V2.

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 analytical list page.

Note

Adapt the UI only for the use cases described in this topic. Otherwise, control replacements might lead to changes that can no longer be applied.

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.

Feature

Setting

Collapse smart filter bar

Configure the headerExpanded property for the template to collapse and hide the filter bar.

Freeze filter bar on scroll

Configure the preserveHeaderStateonScroll property for the template to freeze the filter bar.

Variant management options

Configure the following page variant properties to enable the variant management options:

  • showSetAsDefault: This property lets you set the default variant for a user

  • showShare: This property lets you make the variant as visible to users

Share icon

Configure the visible property to hide or unhide the share icon.

Clear button

The clear button may appear on the smart filter bar or on the header area based on the enabling of Go button. If the Clear button is on the:

  • Smart filer bar: Configure the visible property of the clear button.

  • Header bar: Configure the visible property of the Clear button.

Table toolbar

Configure the visible property of the table toolbar to hide or unhide table toolbar.

Page footer

Configure the visible property of the page footer to hide or unhide page footer.

Chart

Use the following smart chart properties on the UI Adaptation layer:

  • ignoredChartTypes

  • selectionMode

  • showChartTooltip

  • showChartTypeSelectionButton

Adapting the UI: Chart

Feature Setting

Ignored chart types

Configure the ignoredChartType property to hide certain chart types. Upon entering the value as comma-separated chart types, the mentioned charts do not show up in the list of available charts.

No data

Configure the noData property that allows you to override the default text when chart has no data to display.

Selection mode

Configure the selectionMode property that lets you select the mode (single, multiple, or none).

Show chart type selection button

Configure the showChartTypeSelectionButton property that controls the visibility of the chart type button (users could change the chart type).

Show download button

Configure the showDownloadButton property that controls the visibility of the chart download button (users can download the chart as an image).

Show legend button

Configure the showLegendButton property that controls the visibility of the legend button (users can toggle the visibility of the chart legends).

List of Available Chart Types

Chart Type

ignoredChartTypes value

Bar Chart

bar

Column Chart

column

Line Chart

line

Combined Column Line Chart

combination

Pie Chart

pie

Doughnut Chart

donut

Scatter Plot

scatter

Bubble Chart

bubble

Heat Map

heatmap

Bullet Chart

bullet

Vertical Bullet Chart

vertical_bullet

Stacked Bar Chart

stacked_bar

Stacked Column Chart

stacked_column

Combined Stacked Line Chart

stacked_combination

Horizontal Combined Stacked Line Chart

horizontal_stacked_combination

Bar Chart with 2 X-Axes

dual_bar

Column Chart with 2 Y-Axes

dual_column

Line Chart with 2 Y-Axes

dual_line

Stacked Bar Chart with 2 X-Axes

dual_stacked_bar

Stacked Column Chart with 2 Y-Axes

dual_stacked_column

Combined Column Line Chart with 2 Y-Axes

dual_combination

Combined Bar Line Chart with 2 X-Axes

dual_stacked_combination

Combined Stacked Line Chart with 2 Y-Axes

dual_horizontal_combination

Horizontal Combined Stacked Line Chart with 2 X-Axes

dual_horizontal_stacked_combination

100% Stacked Bar Chart

100_stacked_bar

100% Stacked Column Chart

100_stacked_column

100% Stacked Bar Chart with 2 X-Axes

100_dual_stacked_bar

100% Stacked Column Chart with 2 Y-Axes

100_dual_stacked_column

Waterfall Chart

waterfall

Horizontal Waterfall Chart

horizontal_waterfall

Adapting the UI: Chart Toolbar

Feature

Setting

Chart personalisation button

Configure the visible property to display or hide the Settings icon of chart personalisation

C_ContrItemMonitoringResults--chart-btnDrillDownText

Visibility: To drill down within the chart toolbar

Adapting the UI: Table

Feature

Setting

C_ContrItemMonitoringResults--table-nodata

Allows you to override the default text when chart has no data to display

Personalization

Configure the visible property to display or hide the Settings icon of table personalisation.

Export to Excel

The Export to Excel button is visible on the UI by default. You can hide this button by setting the enableExport property to False using the UI adaptation.

C_ContrItemMonitoringResults--table

Show Row Count

Configuration of dynamically loaded additional records from the back-end system while scrolling within grid tables, tree tables, or analytical 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.

Row selection in responsive tables

Determine whether row selection in a responsive table persists or resets after a refresh or data update.

Configure the rememberSelections property to either True or False. The default value is False.

Adapting the UI: Table Column

Each column of the smart table can also be tweaked in UI Adaptation. The smart table columns expose several properties for this purpose. Some of them are listed here:

Property

Setting

visible

Hide or unhide a column.

width

Adjust the column width

autoResizable

Expand column to the maximum width of the content

inResult

Ensures the column is always used in the query, which affects the aggregation level

resizable

Resize column width

showSortMenuEntry

Displays column with a sort tab for personalization

sortOrder

Allows sorting in ascending or descending. The default value is ascending.

sorted

Displays sorted items when sort is available in column header

summed

Displays the total sum of a column

Adapting the UI: Visual Filters Dialog

Each button of the Adapt Filters dialog in Visual Filter mode can be tweaked via UI adaptation. The buttons and micro charts expose several properties for this purpose. Some of the button properties are listed here:

Property

Setting

visible

Hide or reveal a button

width

Adjust the width of a button

icon

Lets you configure a button icon

activeIcon

The source property of an alternative icon for the active (depressed) state of the button

text

Allows you to change button text

busy

Denotes whether a control is currently in busy state

enabled

Enable or disable a button

blocked

Denotes whether a control is currently in blocked state