Adapting the UI: List Report and Object Page

Adapting the UI: List Report and Object Page

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

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

SAP Fiori Elements for OData V2

In SAP Fiori elements for OData V2, you use the SAPUI5 Visual Editor in SAP Web IDE to extend and customize specific features of the list report and object page.

You can also use SAP Fiori tools for SAPUI5 versions higher than or equal to 1.52 to adapt the list report and object page.

Adapting the UI: List Report

Feature

Setting

Display the Export to Excel button in the table toolbar

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

Combine buttons (actions) in the toolbar

Select the buttons you want to combine by holding the ctrl key and left-clicking them in the required order. Then, release the ctrl key, right-click one of the selected buttons and choose Combine from the context menu.

Note

If the buttons don't all fit because the preview size in the UI adaptation editor is too small, you can expand the editor tab by double-clicking it and collapsing the outline and property panels.

Change the column width of sap.ui.table.Table ,sap.ui.table.AnalyticalTable, or sap.m.Table.

Choose the column header to select the corresponding sap.ui.table.Column. Change the Width property as needed.

Center-align status columns

For sap.m.Table, select a column and set the H Align property to Center.

For sap.ui.table, click the column header and set the H Align property to Center.

For vertical alignment of whole responsive table, see Tables.

Disable sticky column header and sticky table toolbar

By default, the sticky column header and the sticky table toolbar in the list report are enabled. To disable them, change the Sticky property value under Table.

Hide a toolbar action for a specific table (if you use multiple views on list report tables)

Set the visible property to false.
Disable standard system behavior for list report tables (analytical, grid, tree tables): Table should not occupy the entire space available in the container. In the Dynamic Page, set the Fit Content property to false.

Change the layout of the list report table for better readability in case of a high number of columns.

For sap.m.Table, set the PopinLayout property to one of the following values:

  • Block

  • GridSmall

  • GridLarge

The default layout is Block.

Adapting the UI: Object Page

Feature

Setting

Change the image shape from square to circle

Switch to preview mode, navigate to the object page, switch back to Adapt the UI. Select the object page header and set the Object Image Shape property to Circle.
Change the avatar shape in the object page dynamic header from a square to a circle

Switch to preview mode, navigate to the object page, switch back to Adapt the UI. Select the avatar in the object page header and set the displayShape property to Circle.

Hide anchor bar

Switch to preview mode, navigate to the object page, switch back to Adapt the UI. Select the object page layout and set the Show Anchor Bar property to false.

Switch to tabs

Switch to preview mode, navigate to the object page, switch back to Adapt the UI. Select the object page layout and set the Use Icon Tab Bar property "useIconTabBar" to true.

Display the Export to Excel button in the table toolbar

For SmartTable, set the Use Export to Excel property to true.

Show header content in edit mode

By default, there is a binding at the showHeaderContent property of sap.uxap.ObjectPageLayout that the UI Adaptation editor cannot display. Change this property to False to get a change file. Then, change the newValue from false to true.

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.

Show content parts in the header according to a specific mode

Ensure that the header content is also displayed in edit/create mode, as described above. Then, search for the sap.m.VBox under sap.uxap.ObjectPageLayout headerContent of the header facet you want to adjust. At the sap.m.VBox, set a binding change in the Visible property.

See also Creating a Binding Change.

Hide the Share button

Select the Share button in the header and set the Visible property to false.

Set widths of mixed content in sections

When placing mixed content, such as forms or tables into one subsection, you may want to adjust the content blocks to display a table next to a form, for example.

Select the sap.ui.layout.GridData of the corresponding section and set the spans according to your requirements.

Don't collapse headers when scrolling down

Select the sap.uxap.ObjectPageLayout and set the Always show content header property to true.

Note

On tablets and mobile phones, the header collapses automatically.

Show more contact information in the header facet

In the outline, choose sap.m.Page content sap.uxap.ObjectPageLayout headerContent . For each header facet, an sap.m.VBox is displayed. In the contact header facet, several sap.m.HBoxes are displayed when icons and texts or links are available but invisible. Set the Visible properties of the required items to true.

Show paginator buttons (up and down arrows) on first object page

By default, the paginator buttons for navigating to the previous object page or next object page are not displayed on the first object page. They are displayed from the second object page onwards.

From the outline, choose sap.m.Page content sap.uxap.ObjectPageLayout headerTitle sap.uxap.ObjectPageHeader navigationBar sap.m.Bar contentRight sap.m.HBox and set the property Visible to true.

Set object page tables with non-editable content only to not editable

Note

This is relevant for tables with non-editable content only.

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, in a table with only non-editable content, there is no tab stop.

Set the editable property of the smart table to false. The inner table's navigationMode property is set to Navigation.

Users can then navigate through the entire focusable table content, and not only through the editable fields.

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.

 For the SmartTable control, set the includeItemInSelection property to True.
Enable the Save and Edit button in non-draft applications. Users can choose this button to save the current changes. The object page stays in edit mode so that they can continue editing. In the SAPUI5 Visual Editor, go to the object page of your app. Switch to edit mode and choose the Save and Edit button from the outline panel. Change the visibility to true. In the change file that's created, change the new value from true to {ui>/editable}.

Change the layout of the object table for better readability in case of a high number of columns.

For sap.m.Table, set the PopinLayout property to one of the following values:

  • Block

  • GridSmall

  • GridLarge

The default layout is Block.

More Information

For more information, refer to Creating a Binding Change.

For information about adapting the UI in the SAP Web IDE, choose Help Documentation Developing Developing Web Applications SAPUI5 Visual Editor .

SAP Fiori Elements for OData V4

Enabling the Feature Key User Adaptation on the Object Page Header

Application developers can enable key users to make the following adaptations on the object page header:

  • remove header facets

  • add predefined header facets

  • change the order of header facets

  • rename the titles of header facets

Note

Key user adaptation for object page headers is currently only possible for non-editable header content, that is, if editableHeaderContent=false is set in the manifest.

Application developers can prepare annotations for header facets that can later be added by the key user to the object page header as follows:

Sample Code 

<Annotation Term="UI.HeaderFacets">
<Collection>
  ...
  <Record Type="UI.ReferenceFacet">
    <PropertyValue Property="Label" String="Column MicroChart"/>
    <PropertyValue Property="ID" String="ColumnMicroChart"/>
    <PropertyValue Property="Target" AnnotationPath="_Item/@UI.Chart#ColumnMaxPath"/>
    <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
  </Record>
  <Record Type="UI.ReferenceFacet">
    <PropertyValue Property="Label" String="Progress Indicator"/>
    <PropertyValue Property="ID" String="ProgressIndicator"/>
    <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Progress"/>
    <Annotation Term="UI.Importance" EnumMember="UI.ImportanceType/High"/>
  </Record>
  ...
</Collection>
</Annotation>

Application developers can remove header facets via stashing, as well as restrict the adaptability of the header facets. Both can be done in the manifest:

"SalesOrderManageObjectPage": {
       "type": "Component",
        "id": "SalesOrderManageObjectPage",
        "name": "sap.fe.templates.ObjectPage",
        "options": {
              "settings": {
                   "editableHeaderContent ": false,
                   "controlConfiguration": {
                        "@com.sap.vocabularies.UI.v1.HeaderFacets": {
                            "facets": {
                                "ColumnMicroChart": {
                                    "stashed": true
                                },
                                "ProgressIndicator": {
                                    "stashed": false,
                                    "flexSettings": {
                                        "designtime": "not-adaptable-visibility"
}}}}}}}}
Note

If you do not provide any entries for the header facet in the manifest, it will be rendered on the UI with the standard behavior (by default, header facets are not stashed, and there are no restrictions regarding the adaptability).

Stashing

If the application developer has defined header facets as stashed in the manifest, they are initially not visible on the UI. Such header facets are not loaded when the app is started. Key users can add these stashed header facets via key user adaptation, and make them visible for end users on the object page header. For more information, refer to Header Facets.

Restricting the Adaptability

Application developers can restrict the adaptability of header facets via the manifest setting 'flexSettings'/'designtime'. For example, the value 'not-adaptable-visibility' means that all actions that influence visibility are disabled, i.e., remove and add are not possible, but move is enabled. For more details, refer to the section Restrict adaptation for certain controls in the topic Enabling UI Adaptation: Other Things to Consider.

Referencing Header Facets

To stash header facets or restrict their adaptability, you must reference header facets in the manifest using the ID defined in the annotation. If no ID is defined in the annotation, you can reference the header facet using the concatenated ID consisting of the AnnotationPath term part, and the qualifier. Refer to the following metadata snippet:

Sample Code 

<Record Type="UI.ReferenceFacet">
    <PropertyValue Property="Label" String="Progress Indicator"/>
    <PropertyValue Property="ID" String="ProgressIndicator"/>
    <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Progress"/>
</Record>
<Record Type="UI.ReferenceFacet">
    <PropertyValue Property="Label" String="Rating Indicator"/>
    <PropertyValue Property="Target" AnnotationPath="@UI.DataPoint#Rating"/>
</Record>

For the first facet, the ID would be "ProgressIndicator", for the second facet, it would be generated from the annotation path, in this case "DataPoint::Rating".

Form

Application developers can also enable key users to move fields inside a FormContainer, or from one FormContainer to another within the same form, provided that the FormContainers are based on the same entity. Key users can rename fields by changing the label text. They can also remove and add fields, and can remove, add, and move FormContainers within a form.

Key users can add simple properties that are not visible on the screen, but that are defined in the model, as a new field to a FormContainer. If the value help for the property is available, the value help is also generated. Key users can only add fields to a form once, which means that a field must not appear in the Add dialog if the property is already visible on the screen within this form.

Application developers can also prepare properties with the annotation DataFieldDefault. This annotation acts like a wrapper for different types of DataFieldAbstract, and app developers should specifically use it for personalization. For example, as an app developer you can add a DataField or a DataFieldWithUrl in the DataFieldDefault annotation.

Note

DataFieldForAction, DataFieldForIntendBasedNavigation, DataFieldWithAction and DataFieldWithIntentBasedNavigation annotations are not supported, as buttons should not be added to the FormContainer.

OrganizationDivision : String(2) @(
      Common : {Label : 'Division'},
      UI : {
         DataFieldDefault : {
               $Type: 'UI.DataField',
               Value: OrganizationDivision,
               Label: 'Default Division'
         }
     }
 );

Properties for which no label has been defined get a label that consists of a warning text and the technical property name, for example [LABEL_MISSING: mediaType].

Note

Fields that are added using key user adaptation have a stable ID provided by SAPUI5 flexibility that is different from the stable ID generated by SAP Fiori elements.

Section/Subsection

Key users can move and rename sections and subsections on the object page.