Extension Points for Tables

Extension Points for Tables

You can use extension points to enhance tables in SAP Fiori elements apps.
Caution

Use app extensions with caution and only if you cannot produce the required behavior by other means, such as manifest settings or annotations. To correctly integrate your app extension coding with SAP Fiori elements, use only the extensionAPI of SAP Fiori elements. For more information, see Using the extensionAPI.

After you've created an app extension, its display (for example, control placing, CSS) and system behavior (for example, model and binding usage, busy handling) of the app extension lies within the application's responsibility. SAP Fiori elements provides support only for the official extensionAPI functions. Don't access or manipulate SAP Fiori elements' internal coding.

Additional Features in SAP Fiori Elements for OData V2

You use the following extension points to add additional columns to tables:

Table Type

SAP Fiori Element

Extension Point

Example

All

Object page

onBeforeRebindTableExtension

Example: Applying Custom Logic When a Table is Loaded or Refreshed

Responsive table

List report

ResponsiveTableColumnsExtension|<Name of the EntitySet>

ResponsiveTableCellsExtension|<Name of the EntitySet>

Example: Adding Columns to a Responsive Table in the List Report

Object page

ResponsiveTableColumnsExtension|<Name of the table EntitySet>|<Facet ID/Annotation Path>

ResponsiveTableCellsExtension|<Name of the table EntitySet>|<Facet ID/Annotation Path>

Example: Adding Columns to a Responsive Table on the Object Page

Grid table

List report

GridTableColumnsExtension|<Name of the EntitySet>

Example: Adding Columns to a Grid Table in the List Report

Object page

GridTableColumnsExtension|<Name of the table EntitySet>|<Facet ID/Annotation Path>

Example: Adding Columns to a Grid Table in the Object Page

Analytical table

List report

AnalyticalTableColumnsExtension|<Name of the EntitySet>

Object page

AnalyticalTableColumnsExtension|<Name of the table EntitySet>|<Facet ID/Annotation Path>

Example: Adding Columns to an Analytical Table on the Object Page

Tree table

List report

TreeTableColumnsExtension|<Name of the EntitySet>

Example: Adding Columns to a Tree Table in the List Report
Note

<Name of the EntitySet> is the EntitySet of the current page. <Name of the table EntitySet> is the EntitySet of the table the extension is meant for. Use the <name of the table EntitySet> for all table column extensions on the object page, as opposed to all other view extensions on the object page.

You use extension point ListReportExtension to replace default navigation within a responsive table in a list report. For more information, see the following example: Example: Replacing Standard Navigation in a Responsive Table in the List Report.

Additional Features in SAP Fiori Elements for OData V4

You can extend all table types using the same functionality.

Note

When adding custom columns to tables, each column needs a column key as its unique identifier. Use only the following characters:

  • :

  • _

  • -

  • alpha-numeric characters

For UI.DataField, the column keys are created using the OData path. All columns start with ... ::C:: and follow this by the annotation type, e.g. UI.DataField, :: and then the corresponding property. Example: <sap.m.Label id="SalesOrder::SalesOrderManageList--fe::table::SalesOrderManage::LineItem::C::FieldGroup::multipleActionFields-innerColumnHeader">. For custom columns, the ID is concatenated with ...C::CustomColumn::<key>.

To add custom columns to tables, proceed as follows:

  1. Define a fragment for the view extension.

    For a custom column in a table, you have to implement two extensions. First, implement the definition of the custom columns, then, implement the content of the custom columns.

    Sample Code 

    <core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:l="sap.ui.layout">
	<l:VerticalLayout core:require="{handler: 'SalesOrder/custom/CustomColumn'}">
		<Button text="Custom Button" press="handler.buttonPressed" />
	</l:VerticalLayout>
</core:FragmentDefinition>

  2. Register your view extensions in the manifest.json file of your application as follows:

    Sample Code 

    {
    "sap.ui5": {
        "routing": {
            "targets": {
                "SalesOrderManageList": {
                    "options": {
                        "settings": {
                            "controlConfiguration": {
                                "@com.sap.vocabularies.UI.v1.LineItem": {
                                    "columns": {
                                        "CustomColumnRating": {
                                            "header": "{i18n>LR.Custom_Column|Rating}",
                                            "width": "10em",
                                            "horizontalAlign": "End",
                                            "position": {
                                                "placement": "After",
                                                "anchor": "DataFieldForAnnotation::FieldGroup::multipleActionFields"
                                            },
                                            "template": "SalesOrder.custom.CustomColumnRating",
                                            "availability": "Adaptation"
                                        }
                                    }
                                }
                            }
                        }
                    }
                },
                "SalesOrderManageObjectPage": {
                    "options": {
                        "settings": {
                            "controlConfiguration": {
                                "_Item/@com.sap.vocabularies.UI.v1.LineItem": {
                                    "columns": {
                                        "CustomColumnOnObjectPage": {
                                            "header": "AnotherColumnLabel",
                                            "position": {
                                                "placement": "Before",
                                                "anchor": "DataFieldForAction::com.c_salesordermanage_sd.DummyBoundAction"
                                            },
                                            "template": "SalesOrder.custom.CustomColumnFragment",
                                            "availability": "Adaptation"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Property Supported Values Description
key aA-zZ, 0-9, :, _, - The key of the custom column is needed as an identifier, which can be used as reference for other columns.
header any unicode string The header is shown on the table as header, as well as in the add/remove dialog.
width* auto|value|inherit;

auto: The browser calculates the width.

length: Defines the width in px, cm, etc.

%: Defines the width in percent of the containing block.

inherit: Inherits this property from its parent element.

Default values are set by SAP Fiori elements if nothing is set.

Note: This setting can also be used for existing annotation columns.
position Defines the position of the column relative to other columns.
position.placement "After" | "Before" (default) Defines the placement, either before or after the anchor column.
position.anchor "<key_of_referenced_column>"

The key of another column to be used as placement anchor. Columns defined via annotations can be referenced their FieldId.
template Defining the target fragment follows the syntax of defining a fragment via Fragment.load
availability* "Default" | "Adaptation" | "Hidden"

Defines where the column should be shown.

  • Default: it will be shown by default in the table.

  • Adaptation: it will initially not shown in the table but be available via end user adaptation

  • Hidden: the column is neither available in the table nor in adaptation

Note: This setting can also be used for existing annotation columns.

(*) = optional value

The UI model can be leveraged within the fragment, to e.g. react to changes of the editMode:

Sample Code 

enabled="{= ${ui>/editMode} === 'Editable'}"

For the correct positioning of your custom elements, you need to identify an anchor element. For more information, refer to Finding the Right Key for the Anchor.