SAP Fiori elements for OData V4 Feature Showcase

The main focus of this project is to present features from the List Report & Object Page floorplan. Please note, some feature combinations might not be intended by the SAP Fiori UX Guidelines but are shown here for the sake of demonstration.

Start the app and search for features you might want to use or search through the content overview. When you find something you can look for the corresponding topic for more information regarding the implementation.

Some topics have a hint, that the implementation is possible using SAP Fiori tools, which we recommend to use.

If you use CAP for the first time, please follow the instructions from the CAP Getting started

To run the featue showcase locally install the dependencies in the root folder with npm install.
Then start the app with cds watch.
Open http://localhost:4008/$launchpad in the Browser to get to the SAP Fiori launchpad sandbox from where you can navigate to the feature showcases.

Finding code: Each of the following topics has search terms, to find the related code snippets in the repository.

Content

• List Report
  • General Features
    • Configure Draft
    • Replacing Standard UI Texts
    • Custom Actions
      • Invoking CAP actions out of a Custom Action
  • Header Area
    • Enabling Variant Management
    • Define Filters
      • Default Values
      • Hide filters
      • Filter facets
      • Selection Fields
      • Mandatory filter fields
      • Enable semantic dates for filter fields of type Date
      • Case insensitive filtering
      • Value Help
      • Dependent Filtering (Value Help)
      • Dependent Filtering from parent (Value Help)
      • Custom Filter
    • Custom Actions
  • Content Area
    • Configuring Tables
      • Actions
        • Side Effects of actions
        • Value Help for action parameter
        • Default Value for action parameter
        • Action Drop down menu
        • Dynamic CRUD Restrictions
        • Navigation Button
        • Critical Actions
        • Message Toasts
        • Custom Actions
      • Setting the Table Type
      • Multiple Views
        • Single table mode
        • Multiple table mode
        • Selection Variant
        • Selection Presentation Variant
      • Creation Dialog
      • Defining the Default Sort Order
      • Enabling Multiple Selection in Tables
      • Handling Semantic Key Fields
      • Highlighting Line Items Based on Criticality
      • Adding a Rating Indicator to a Table
      • Adding a Progress Indicator to a Table
      • Adding a field with a tooltip to a Table
      • Adding a Smart Micro Chart to a Table
      • Adding a Contact Quick View to a Table
      • Adding a Quick View Facet to a Table
        • Links to the apps of the entity
      • Adding Multiple Fields to one Column in Responsive Tables
      • Adding Images to a table
      • Adding Currency or UoM Fields to a table
      • Adding a link to a table
      • Add custom column (Extensibility)
• Object Page
  • General Features
    • Annotations for data fields
      • Communication properties
      • Time and Date
      • Multi line text
      • Placeholder values
    • Replacing Standard UI Texts
    • Custom Actions
      • Invoking CAP actions out of a Custom Action
  • Header Area
    • Title and Subtitle
    • Actions
      • Custom Actions
    • Header Facets
      • Plain Text
      • Header Field Group Facet
        • Custom Field
      • Address facet
      • Data Points
        • Rating
        • Progress
        • Key value
      • Micro chart facet
        • Area Micro Chart
        • Bullet Micro Chart
        • Radial Micro Chart
        • Line Micro Chart
        • Column Micro Chart
        • Harvey Micro Chart
        • Stacked Bar Micro Chart
        • Comparison Micro Chart
      • Header Custom Facet
  • Content Area
    • General features
      • Displaying Text and ID for Value help Input fields
      • Hiding features
      • Preview
      • Side Content
    • Forms
      • Connected Fields
      • Custom Content
      • Form Actions and Navigation
        • Custom Actions
    • Table
      • Enable Variant Management
      • Enable Personalization (Filter, Sort, Columns)
      • Enable Full Screen Mode
      • Adding Titles to Object Page Tables
      • Adding Segmented Buttons to a Table Toolbar
      • Enabling Inline Creation of Table Entries on Object Page
      • Using the 'Export to Spreadsheet' Feature
      • Custom Actions
    • Chart
    • Custom Section and Subsection
      • Custom Subsection
  • Footer Bar
    • Determining actions
    • Custom Actions
  • Custom Object Page

List Report

General Features

Flexible Column Layout

The Flexible Column Layout (FCL) enables the app, to display the Object Page and possibly a further Object Page next to the List Report on the same page instead of navigating to the next page. To enable the Flexible Column Layout please use the Application Modeler from the SAP Fiori tools. The setting can be found in the Global Page Settings, which are part of the Page Map.

Configure Draft

Search term: #Draft

The annotation @odata.draft.enabled adds the draft mode to an entity.

annotate service1.RootEntities with @odata.draft.enabled;

Replacing Standard UI Texts

Search term: "enhanceI18n"

If wanted, the replacement of standard UI texts is possible. For this a new i18n file is needed, for example "customI18N.properties" which is then referenced in the manifest.json file.

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "enhanceI18n": "i18n/customI18N.properties",
            ...
        }
    }
},

The replacement can be for all entities, for specific entities or for specific actions of specific entities.

• C_COMMON_DIALOG_OK is the key for all entities.
• C_TRANSACTION_HELPER_OBJECT_PAGE_CONFIRM_DELETE_WITH_OBJECTTITLE_SINGULAR|RootEntities is the key for the "RootEntities" entity
• C_OPERATIONS_ACTION_CONFIRM_MESSAGE|RootEntities|criticalAction is the key for the "criticalAction" action of the "RootEntities" entity

C_COMMON_ACTION_PARAMETER_DIALOG_CANCEL|RootEntities = Custom cancel text

More information about replacing standard UI texts and what can be overridden is available in the SAP Fiori elements Documentation.

Custom Actions

Search term: CustomActions

With extensions points it is possible to add custom front-end actions to the UI at different places. Custom actions are added to the manifest.json file. The location depends on where the action shall be visible on the UI. In general a custom action consists of a unique qualifier for the action. The property "press" is the path to the event handler in a JavaScript file. Both the "enabled" and "visible" property accept either static values (true/false), a binding path, like in the example, or another path to a JavaScript function which returns true or false. The "text" property is the label of the button.

"CustomActionSection" : {
    "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox",
    "enabled": "{= ${ui>/editMode} !== 'Editable'}",
    "visible" : true,
    "text": "{i18n>CustomActionSection}"
}

The following code snippet is the CustomActions.js file from the example. "enabled" and "enabledForSingleSelect" are possible functions for the "enabled" property.

sap.ui.define([
    "sap/m/MessageBox",
    "sap/ui/core/library"
], function(MessageBox, coreLibrary) {
    "use strict";

    return {
        messageBox: function() {
            MessageBox.alert("Button pressed");
        },
        enabled : function() {
            return true;
        },
        enabledForSingleSelect: function(oBindingContext, aSelectedContexts) {
            if (aSelectedContexts && aSelectedContexts.length === 1) {
               return true;
            }
            return false;
         }
    };
});

Invoking CAP actions out of a Custom Action

Search term: #EditFlowAPI

It is also possible to invoke CAP actions out of a JavaScript function using the "invokeAction" function of the SAP Fiori elements Edit flow API.

sap.ui.define([
    "sap/m/MessageBox",
    "sap/ui/core/library"
], function(MessageBox, coreLibrary) {
    "use strict";
    return {
        onChangeCriticality: function(oEvent) {
            let sActionName = "service1.changeCriticality";
            let mParameters = {
                contexts: oEvent.getSource().getBindingContext(),
                model: oEvent.getSource().getModel(),
                label: 'Confirm',   
                invocationGrouping: true    
            };
            this.editFlow.invokeAction(sActionName, mParameters); //SAP Fiori elements EditFlow API
        },
        ...
    };
});

Header Area List Report

Enabling Variant Management

Search term: "variantManagement"

Variant Management (saving the filter settings and the personalization of tables) is by default enabled. However with the annotation "variantManagement": "None" it can be disabled in the manifest.json.

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            "entitySet": "RootEntities",
            "variantManagement": "None",
            ...
        }
    }
}

When the Variant Management is disabled, the App title will be shown instead at this place. With the subTitle annotation in the manifest.json file, you can change that to a custom name. The corresponding name for the property appSubTitle has to be in the i18n.properties file within the webapp folder of the app.

"sap.app": {
    ...
    "subTitle": "{{appSubTitle}}",
    ...
}

Define Filters

Search term: #FilterDefault, #HideFilter,#FilterGrouping, #VisibleFilters, #ValueHelps, #DependentFilter

Default Values

Search term: #FilterDefault

With the annotation @Common.FilterDefaultValue default values can be defined, like in field-control.cds. This Annotation does not allow complex values and when switching variants, the annotation is no longer considered. For complex values the UI.SelectionVariant annotation is a better solution. More information are available in the SAP UI5 Dokumentation

Hide filters

Search term: #HideFilter

To reduce the amount of available filters in a List Report, properties can be annotated with @UI.HiddenFilter to hide them. An example is in the file field-control.cds.

annotate service1.RootEntities {
    ...
    areaChartDeviationLowerBoundValue @UI.HiddenFilter;
    areaChartDeviationUpperBoundValue @UI.HiddenFilter;
    areaChartToleranceLowerBoundValue @UI.HiddenFilter;
    areaChartToleranceUpperBoundValue @UI.HiddenFilter;
    ...
};

Filter facets

Search term: #FilterGrouping

Another nice feature are @UI.FilterFacets, which allow one to structure the available properties of the entity into groups, so that filter adaptation is easier.

annotate service.RootEntities with @(
    UI.FilterFacets : [
        {
            Target : '@UI.FieldGroup#chartData',
            Label : '{i18n>chartData}',
        },
        {
            Target : '@UI.FieldGroup#location',
            Label : '{i18n>location}',
        },
    ],
);
annotate service.RootEntities with @(
    UI.FieldGroup #chartData : {
        Data  : [
            {Value : integerValue},
            {Value : targetValue},
            {Value : forecastValue},
            {Value : dimensions},
            {Value : integerValue},
        ]
    },
);

The implementation is in the layout.cds file.

Selection Fields

Search term: #VisibleFilters

@UI.SelectionFields is the annotation, which allows to specify an array of fields, which should by default be shown in the List Report filter bar as a filter, so that the user does not need to adapt the filters. The annotation is used in the layout.cds file.

annotate service.RootEntities with @(
    UI.SelectionFields : [
        field,
        fieldWithPrice,
        criticality_code,
    ],
);

Further information are available in the UI5 Dokumentation.

Mandatory filter fields

Search term: #RequiredFilter

With the annotation @Capabilities.FilterRestrictions.RequiredProperties an array of mandatory filter fields can be defined. In the Feature showcase only the property 'stringProperty' is required for demonstration purposes. The annotation can be found in the capabilities.cds file.

annotate service1.RootEntities with @(
    ...
    Capabilities.FilterRestrictions : {
        ...
        RequiredProperties : [
            stringProperty 
        ],

    },
);

Enable semantic dates for filter fields of type Date

since UI5 Version: 1.99.0 Search term: #SemanticDateFilter, useSemanticDateRange

For filter fields of type Date, semantic dates can be activated with the annotation @Capabilities.FilterRestrictions.FilterExpressionRestrictions. The annotation expects an array. Each object is for one field. The "Property" value has to be the name of the date field and the "AllowedExpressions" value is either 'SingleValue' or 'SingleRange'. SingleValue currently gives the options to select a date or select 'Today', 'Yesterday' or 'Tomorrow'. SingleRange additionally adds the options 'From/To', 'From', 'To' and 'Year To Date'.

annotate service1.RootEntities with @(
    Capabilities.FilterRestrictions : {
        FilterExpressionRestrictions : [
            {
                Property : 'validFrom',
                AllowedExpressions : 'SingleRange'
            }
        ],
        ...
    },
);

If you want to disable semantic dates entirely you can do so, by setting the useSemanticDateRange property to false in the manifest.json file. The default value is true. In addition you can specify the default value for semantic date ranges in the manifest. The documentation link below lists all options. Please note, that they have to be fully in uppercase.

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                ...
                "@com.sap.vocabularies.UI.v1.SelectionFields": {
                    "useSemanticDateRange":  true,
                    "filterFields": {
                        "validFrom": { 
                            "settings": {
                                "defaultValues": [{"operator": "LASTYEARS", "values": [10]}]
                            }
                        }
                    }
                    ...
                }
            },
            ...
        }
    }
},

More information are available in the SAP UI5 Documentation.

Case insensitive filtering

Search term: #CaseInsensitiveFiltering

Case insensitive filtering can be activated with the annotation @Capabilities.FilterFunctions and the string 'tolower' as part of the array. It can only be applied to the whole service and is then valid for filtering with the filter bar, with table personalization filters and within value helps.

annotate service1 with @(
    Capabilities.FilterFunctions : [
        'tolower'
    ],
);

If the annotation does not exists, case sensitive filtering is active and the backend decides on the default behavior. The example is in the capabilities.cds file.

More information are available in the SAP UI5 Documentation.

Value Help

Search term: #ValueHelps

While CAP delivers the value help for Code Lists out of the box. For other associations this is not the case. To get a value help for a filter (and for the corresponding field on the Object Page), the entity has to be annotated with @Common.ValueList.

annotate schema.RootEntities with{
    ...
    contact @(Common : {
        Text            : contact.name,
        TextArrangement : #TextOnly,
        ValueList       : {
            Label          : '{i18n>customer}',
            CollectionPath : 'Contacts',
            Parameters     : [
                {
                    $Type             : 'Common.ValueListParameterInOut',
                    ValueListProperty : 'ID',
                    LocalDataProperty : contact_ID
                },
                {
                    $Type: 'Common.ValueListParameterDisplayOnly',
                    ValueListProperty: 'country_code',
                },
                {
                    $Type: 'Common.ValueListParameterDisplayOnly',
                    ValueListProperty: 'city',
                }

            ]
        }
    });
    ...
};

The Label property will be shown as the title of the value help dialog und the CollectionPath property refers to the entity set of the service, which provides the values for the value help. If the value help is more complex and property names do not match or you want to configure, which fields should be visible in the value help, you can provide parameters to the Parameters property. For smaller collections of possible values in the value help, it might be a good idea to have a dropdown instead of a dialog to choose the value. This can be achieved with the @Common.ValueListWithFixedValues annotation. The implementation is in the value-helps.cds file.

Dependent Filtering (Value Help)

Search term: #DependentFilter

Dependent filtering can be achieved with an input parameter for the value help. An example would be with countries and regions. The value help for the region should only show regions of the selected country, which is another property of the entity.

annotate schema.RootEntities with{
    ...
    region @(Common : {
        Text            : region.name,
        TextArrangement : #TextFirst,
        ValueListWithFixedValues: true,
        ValueList       : {
            Label          : '{i18n>Region}',
            CollectionPath : 'Regions',
            Parameters     : [
                {
                    $Type             : 'Common.ValueListParameterInOut',
                    ValueListProperty : 'code',
                    LocalDataProperty : region_code
                },
                {
                    $Type: 'Common.ValueListParameterOut',
                    ValueListProperty: 'name',
                    LocalDataProperty : region.name,
                },
                //To only show the connected values
                {
                    $Type : 'Common.ValueListParameterFilterOnly',
                    ValueListProperty : 'country_code',
                },
                {
                    $Type : 'Common.ValueListParameterIn', //Input parameter used for filtering
                    LocalDataProperty : country_code,
                    ValueListProperty : 'country_code',
                },

            ]
        }
    });
};

Here the region property (which is an Association to a Code List) is annotated with the ValueList annotation. To achieve the filtering, the country_code property from the header is mapped against the country_code property of the region via the Common.ValueListParameterIn parameter. The implementation can be found in the value-helps.cds.

Dependent filtering (Multi-Input Value Help)

Search term: #MultiValueWithDependentFilter

Dependent filters can also use properties from the parent entity. This is especially useful for multi-input fields, which have a value help. In the example the root entity has a country assigned and multiple regions shall be assigned to the root entity. For that an assignment entity is being used. To only show regions of the selected country a reference to the root entity can be used.

annotate schema.AssignedRegions with {
    region @(Common : {
        Text            : region.name,
        TextArrangement : #TextFirst,
        ValueListWithFixedValues: true,
        ValueList       : {
            Label          : '{i18n>Region}',
            CollectionPath : 'Regions',
            Parameters     : [
                {
                    $Type               : 'Common.ValueListParameterInOut',
                    ValueListProperty   : 'code',
                    LocalDataProperty   : region_code
                },
                {
                    $Type               : 'Common.ValueListParameterIn',
                    LocalDataProperty   : root.country_code,
                    ValueListProperty   : 'country_code',
                },

            ]
        }
    });
}

In the code snippet the 'LocalDataProperty' refers to the country reference and maps it to the 'country_code' property of the 'Regions' entity, which is the target of the value help.

The value help itself is annotated on the property within the assignment entity. This is also the target property of the DataField value path.

annotate service.RootEntities with @(
    ...
    UI.FieldGroup #location             : {
        Data : [
            ...
            {
                Value : regions.region_code,
                Label : '{i18n>MultiInputFieldWithVH}'
            }
        ]
    },
    ...
)

Adding navigation properties

Search term: navigationProperties, #NavigationProperties

Navigation properties can be as well added to the filter bar. For this the navigation path has to be added to the @UI.SelectionFields annotation.

annotate service.RootEntities with @(
    UI.SelectionFields : [
        ...
        childEntities1.criticalityValue_code
    ],
);

If you want to add navigation properties to the "Adapt Filters" dialog as filter facets, they have to be referenced in the manifest.json file.

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                ...
                "@com.sap.vocabularies.UI.v1.SelectionFields": {
                    "navigationProperties":  [ "childEntities1", "childEntity2/decimalProperty" ],
                    ...
                }
            },
            ...
        }
    }
},

When only the association is referenced, all fields of it will be available in a separate filter facet for the specified association. Defining a path to a specific property of the association, will only add the specified property to the "Adapt Filters" dialog.

More information regarding navigation properties as filter fields are in the SAP Fiori elements Documentation.

Custom Filter

Search term: customFilter

Custom filter are useful, when the data value is in a special format, for example a rating. The implementation consists of multiple parts. First List Report in the manifest.json is extended with the following lines. Under "controlConfiguration" the selection fields ("@com.sap.vocabularies.UI.v1.SelectionFields") are extended. The "property" property is the property of the entity set, which is filtered. The "template" property leads to a XML fragment, which is the filter. A "position" property with "placement" and "anchor" is also possible. When not given, the custom filter is placed at the end. The name of the custom filter has to be the property name, else it would cause errors.

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                ...
                "@com.sap.vocabularies.UI.v1.SelectionFields": {
                    "filterFields": {
                        "starsValue": {
                            "label": "{i18n>customFilter}",
                            "property": "starsValue",
                            "template": "sap.fe.featureShowcase.mainApp.ext.CustomFilter-Rating"
                        }
                    }
                }
            },
            ...
        }
    }
},

The recommended way is to bind the filter value directly with value="{path: 'filterValues>', type: 'sap.fe.macros.filter.type.Value'}" and using a filter value type (Value or Range for example). Additionally format options are possible to use another operator instead of the default 'EQ'.

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:l="sap.ui.layout">
    <!-- Search-Term: "customFilter" -->
    <HBox alignItems="Center" core:require="{handler: 'sap/fe/featureShowcase/mainApp/ext/CustomFilter-Rating'}" width="100%" >
            <!--     Example for adapting the used operator, using GT (greater than) instead of default EQ -->
            <RatingIndicator
                id="MyCustomRatingIndicatorId" maxValue="4" class="sapUiTinyMarginBegin"
                value="{path: 'filterValues>', type: 'sap.fe.macros.filter.type.Value', formatOptions: { operator: 'GE' }}"
            />
            <core:Icon src="https://github.com/SAP-samples/fiori-elements-feature-showcase/raw/main/sap-icon://reset" press="handler.onReset" class="sapUiSmallMarginBegin" />
    </HBox>
</core:FragmentDefinition>

The following code is an example for a reset function. "starsValue" is the property name of the entity set which is filtered.

sap.ui.define(["sap/ui/model/Filter", "sap/ui/model/FilterOperator"], function(Filter, FilterOperator) {
    "use strict";
    return {
        onReset: function(oEvent) {
            this.setFilterValues("starsValue");
        }
    };
});

More information regarding custom filter are in the SAP Fiori elements Documentation.

Custom Actions (Global List Report)

Search term: "CustomActionLRGlobal"

With extension points custom actions can be added in the header area of the List Report.

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "content" : {
                "header" : {
                    "actions" : {
                        "CustomActionLRGlobal" : {
                            "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox",
                            "enabled": "sap.fe.featureShowcase.mainApp.ext.CustomActions.enabled",
                            "visible" : true,
                            "text": "{i18n>CustomActionLRGlobal}"
                        }
                    }
                }
            }
        }
    }
},

The custom action itself is described here: Custom Actions

Content Area List Report

Configuring Tables

Actions

Search term: #UnboundAction, #BoundAction, #SideEffect, #ValueHelpParameter, "MenuActions", #DynamicCRUD

In CAP, actions can be bound to a specific entity or unbound and just be a part of the service. Bound actions can only be executed, when at least one entity is selected. Unbound actions can be executed anytime. If an action shall be visible, the UI.DataFieldForAction has to be added to the UI.LineItem annotation of the table. The action is called through the service.

annotate service.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataFieldForAction',
            Action : 'service1.changeCriticality',
            Label : '{i18n>changeCriticality}',
        },
        ...
    ],
);

layouts_RootEntities.cds With this default annotation, the action is displayed above the table on the right, with other possible actions. If you want to display the action inline, the property Inline : true has to be added. Additionally instead of the action name, an icon can be displayed, if the action is in line.

annotate service.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataFieldForAction',
            Action : 'service1.changeProgress',
            Label : '{i18n>changeProgess}',
            IconUrl : 'sap-icon://status-critical',
            Inline : true,
        },
        ...
    ],
);

While you can add the property Determining : true, determining actions are not supported and the action will just disappear from the UI.
The action annotations so far were for bound actions. If you want to add unbound actions, you have to change the action annotation slightly. Instead of referring to service1.unboundAction you have to refer to service1.EntityContainer/unboundAction in order to have a working unbound action. The other path will display an action on the UI, but it would not work, if you click it.

annotate service.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataFieldForAction',
            Action : 'service1.EntityContainer/unboundAction',
            Label : '{i18n>unboundAction}',
        },
        ...
    ],
);

With @Core.OperationAvailable actions can by enabled or disabled. This can be done dynamically by using $edmJson for its value, like:

@Core.OperationAvailable: {$edmJson: {$Path: '/Singleton/enabled'}}
action unboundAction(@(title : '{i18n>inputValue}')input : String);

The path can be absolute like in the example pointing to a singleton or also for bound actions relative to the bound context, like:

@(
    ...
    Core.OperationAvailable: {$edmJson: {$If: [{$Ge: [{$Path: 'in/integerValue'}, 0]}, true, false]}}
)
action changeProgress (
    ...
);

'in' refers to the bound context. Without 'in' the path would refer to an action parameter.

Side Effects of actions

Search term: #SideEffect

If your action triggers changes on the entities, you need side effects so that the UI updates automatically. These side effect annotations have to be added to the action.

entity RootEntities as select from persistence.RootEntities actions {
    ...
    @(
        cds.odata.bindingparameter.name : 'in',
        Common.SideEffects              : {
            TargetProperties : ['in/integerValue']
        }
    )
    action changeProgress (@(title : '{i18n>newProgress}', UI.ParameterDefaultValue : 50)newProgress : Integer);
};

The OData binding parameter is needed, in order to refer to the fields of the entity, which need to be updated. These fields are then listed in the array of the TargetProperties property of @Common.SideEffects.

Value Help for action parameter

Search term: #ValueHelpParameter

Often properties of an entity have value helps, so that creating a new entity is easier and wrong inputs are reduced. Value helps for action parameters are also possible.

entity RootEntities as select from persistence.RootEntities actions {
    ...
    action changeCriticality (
        @(
            title         : '{i18n>newCriticality}',
            UI.ParameterDefaultValue : 0,
            Common        : {
                ValueListWithFixedValues : true,
                ValueList : {
                    Label          : '{i18n>Criticality}',
                    CollectionPath : 'Criticality',
                    Parameters     : [
                    {
                        $Type             : 'Common.ValueListParameterInOut',
                        ValueListProperty : 'code',
                        LocalDataProperty : newCriticality
                    },
                    {
                        $Type             : 'Common.ValueListParameterDisplayOnly',
                        ValueListProperty : 'name'
                    },
                    ]
                }
            }
        )
        newCriticality : Integer);
    ...
};

This can be achieved, by just annotating the parameter with a common valueList. The annotation has to be inline with the parameter.

Default Value for action parameter

Search term: #ParameterDefaultValue

With the annotation @UI.ParameterDefaultValue a default value for the parameter is set.

entity RootEntities as select from persistence.RootEntities actions {
    ...
    action changeProgress (@(title : '{i18n>newProgress}', UI.ParameterDefaultValue : 50)newProgress : Integer);
};

Action Drop down menu

Search term: "MenuActions"

A dropdown menu to group actions is possible with an annotation in the manifest.json file.

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "@com.sap.vocabularies.UI.v1.LineItem": {
                    "actions": {
                        "MenuActions": {
                            "text": "{i18n>MenuButton}",
                            "menu": [
                                "DataFieldForAction::service1.changeCriticality",
                                "DataFieldForAction::service1.EntityContainer::unboundAction"
                            ]
                        }
                    },
                    ...
                },
                ...
            }
        }
    }
},

In the control configuration of the List Report, the line item annotation of the table (it does not affect other line item definitions which may be used in other table views) has a property "actions" under which the menu button needs to be added. "MenuActions" is in this case just the identifier of this specific menu button. The text property is the actual label of the menu button and the "menu" property contains all actions, which should be included. "changeCriticality" is a bound action and can be directly accessed through the service. The unbound action on the other side, needs to be accessed through the EntityContainer. The slash is replaced with two colons in the identifier for the action.

Dynamic CRUD Restrictions

Search term: #DynamicCRUD

The visibility of the "Edit", "Create" and "Delete" actions can be dynamically adjusted. For example the delete operation can be dependent on a field of the entity, through the annotation @Capabilities.DeleteRestrictions. Fixed values are also possible.

Since UI5 Version 1.100 also Singleton are supported as values. The Syntax for Singletons is special, as it can be seen in the code snippet. The path value starts with a '/' followed by the service name, defined in the cds service file, and a '.EntityContainer/'. Afterwards the name of the singleton follows, in the Feature Showcase it is 'Singleton', and the last part is the property path.

annotate service1.RootEntityVariants with @(
    Capabilities.DeleteRestrictions : {
        Deletable : deletePossible,
    },
    UI.UpdateHidden : updateHidden,
    UI.CreateHidden: { $edmJson: { $Path: '/service1.EntityContainer/Singleton/createHidden' } },
);

capabilities.cds

While @Capabilities.UpdateRestrictions would restrict the update possibilities of the entity in the edit mode, e.g. all fields are read only, the "Edit" button would not disappear. Instead the @UI.UpdateHidden annotation should be used, which when true, hides the "Edit" button as intended.

Navigation Button

Search term: #NavAction

A navigation action navigating to an associated entity can be added, through adding the UI.DataFieldForIntentBasedNavigation as a line item.

annotate service.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataFieldForIntentBasedNavigation',
            Label : '{i18n>inboundNavigation}',
            SemanticObject : 'FeatureShowcaseChildEntity2',
            Action : 'manage',
            RequiresContext : true,
            Inline : true,
            IconUrl : 'sap-icon://cart',
            Mapping : [
                {
                    $Type : 'Common.SemanticObjectMappingType',
                    LocalProperty : integerValue,
                    SemanticObjectProperty : 'integerProperty',
                },
            ],
            ![@UI.Importance] : #High,
        },
        ...
    ],
);

layouts_RootEntities.cds

The semantic object and the action are in the fiori.html file. The application property in this contains the following code snippet:

"FeatureShowcaseChildEntity2-manage": {
    title: "ChildEntities2",
    description:"Manage",
    additionalInformation: "SAPUI5.Component=sap.fe.featureShowcase.childEntities2ui",
    applicationType: "URL",
    url: "/featureShowcaseNavigationTarget/webapp",
    navigationMode: "embedded",
},

Here "FeatureShowcaseChildEntity2" is the semantic object to be referenced. The second part of the name is the action of the app. As an example you may have the apps "SalesOrder-manage", "SalesOrder-view" and so on. Semantic object and action have to be divided by a dash. The property RequiresContext determines, whether an entry needs to be selected to enable the navigation button or not. If it is set to true, it may be needed, to add the Mapping property. This property is an array of mappings between local and semantic object properties and it is needed if local properties should be used to filter in the app of the semantic object, but the property names differ. In this example, the local property 'integerValue' is mapped to the semantic object property 'integerProperty', so when selecting an entity where integerValue equals 22, the navigation would filter for entries where the 'integerProperty' property equals 22 in the semantic object app.
Icons can be displayed as the label of the button instead of text, but only if the button is inline. When Icons are displayed, the criticality is being ignored.

Critical Actions

Search term: #CriticalAction

When an action is annotated with @Common.IsActionCritical : true, a popover will appear before invoking the action, asking the user if he/she is sure about invoking the selected action.

annotate service1.criticalAction with @(
    Common.IsActionCritical : true
);

Message Toasts

Search term: #MessageToast

Message toasts are shown on the UI when the Backend sends a message with the severity equaling 1. If the severity is higher, a dialog will be shown. For more information regarding the sending of messages from a CAP Backend, please have a look at the SAP CAP Documentation for messaging.

req.notify(`Critical action pressed`);

notify is the method to send a message with the severity of 1 and req is the request received by CAP.

Custom Actions (Table List Report)

Search term: "CustomActionLR"

With extension points custom actions can be added in the table toolbar of the List Report.

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "@com.sap.vocabularies.UI.v1.LineItem": {
                    "actions": {
                        ...
                        "CustomActionLR" : {
                            "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox",
                            "enabled": "sap.fe.featureShowcase.mainApp.ext.CustomActions.enabledForSingleSelect",
                            "visible" : true,
                            "text": "{i18n>CustomActionLR}"
                        }
                    },
                    ...
                }
            },
            ...
        }
    }
},

The custom action itself is described here: Custom Actions

Setting the Table Type

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "tableSettings", "ResponsiveTable", "GridTable"

Supported table types are the ResponsiveTable and the GridTable. The table type of the List Report can be adjusted in the manifest.json file (Line 146).

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "@com.sap.vocabularies.UI.v1.LineItem": {
                    ...
                    "tableSettings": {
                        "type": "ResponsiveTable",
                        ...
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
},

Multiple Views

Search term: #multipleViews, "views", [#multipleViews](../../search?q=#multipleViews), ["quickVariantSelection"](../../search?q=quickVariantSelection)

With multiple views, you can display different selections and/or presentations of the entity set, without the need to set the filter manually.

Single table mode

Search term: "quickVariantSelection"

In the single table mode all views are displayed in the same table. You can switch between the views through a segmented button next to the table title. If you define more than three views, a drop down menu will be displayed instead. A restriction of the single table mode is, that you can change the selected entities (@UI.SelectionVariant), but not the presentation (@UI.SelectionPresentationVariant) of the entities, nor the entity set itself. To implement the single table mode, you need to define a selection variant and refer to it in the manifest.json file, through using its qualifier (e.g. #variant1).

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "@com.sap.vocabularies.UI.v1.LineItem": {
                    ...
                    "tableSettings": {
                        ...
                        "quickVariantSelection": {
                            "paths": [
                                {
                                    "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant1"
                                },
                                {
                                    "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant2"
                                }
                            ],
                            "hideTableTitle": false,
                            "showCounts": true
                        }
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
}

Further you can define, if each view should show the amount of rows it displays and if the table title should be hidden for all views. By default the "showCounts" property is false, as additional $count requests impact the performance.

Multiple table mode

Search term: "views"

In multiple table mode, a icon tab bar will be rendered above the table to switch between the views. Each view has its own table with its own table tool bar and variant management (if activated), but only the table of the selected tab will be shown. Here you have the possibility to use the @UI.SelectionPresentationVariant annotation and there is the possibility to define another entity set to be displayed in a tab. The single and multiple table mode do not exclude each other completely. When using a SelectionVariant as the annotation for a view of the multiple table mode, the different views of the single table mode can be additionally applied. When using a UI.SelectionPresentationVarian in the multiple table mode for the view, you cannot apply the view from the single table mode. To implement the multiple table mode, you need to refer to the Selection- or SelectionPresentationVariants via the qualifier in the manifest.json file. Each view has to have a unique "key" property for the tab. The "annotationPath" property refers to the qualifier. There is again the option to display the counts of each view, but it affects the performance.

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "views": {
                "paths": [
                    {
                        "key": "tab1",
                        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant1"
                    },
                    {
                        "key": "tab2",
                        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant2"
                    },
                    {
                        "key": "tab3",
                        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant#SelectionPresentationVariant"
                    },
                    {
                        "key": "tab4",
                        "entitySet": "RootEntityVariants",
                        "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant3"
                    }
                ],
                "showCounts": false
            },
            ...
        }
    }
}

When you want to have a view with a different entity set, you just need to add the "entitySet" property to a path entry in the manifest.json. The referenced entity name equals the entity name in the CAP Service. The Selection- or SelectionPresentationVariant has to be annotated to the different entity set. When displaying a different entity set, the counts of each view will be automatically shown, ignoring the showCounts annotation. Filters from the main entity set will be applied, when the property exist in the other entity set, else they will be ignored. There is no option to add filters for unique properties of the other entity set. More information are available in the SAP UI5 Documentation.

Selection Variant

Search term: #SVariant

With a selection variant, you can define how the fields of an entity set should be sorted. The "Text" property is the title of the view and the property "SelectOptions" contains all sorting parameters.

annotate service.RootEntities with @(
    UI.SelectionVariant #variant1 : {
        Text : '{i18n>SVariant1}',
        SelectOptions : [
            {
                PropertyName : criticality_code,
                Ranges : [
                    {
                        Sign : #I,
                        High : 2,
                        Option : #BT,
                        Low : 0,
                    },
                ],
            },
        ],
    },
    ...
);

The "Option" property supports the following options: Equal To (EQ), Between (BT), Less than or equal to (LE), Greater than or equal to (GE), Not equal to (NE), Greater than (GT) and Less than (LT). The annotations are in the layouts_RootEntities.cds file.

Selection Presentation Variant

Search term: #SPVariant

With a selection presentation variant a selection of entities and a presentation can be defined. The PresentationVariant currently supports the properties SortOrder and Visualizations. The selection and presentation variants are basically identical to their stand-alone counterparts, only the selection variant here does not include the text property.

annotate service.RootEntities with @(
    UI.SelectionPresentationVariant #SelectionPresentationVariant : {
        Text : '{i18n>SelectionPresentationVariant}',
        SelectionVariant : {
            $Type : 'UI.SelectionVariantType',
            SelectOptions : [
                {
                    PropertyName : criticality_code,
                    Ranges : [
                        {
                            Sign : #I,
                            Option : #GT,
                            Low : 0,
                        },
                    ],
                },
            ],
        },
        PresentationVariant :{
            SortOrder : [
                {
                    Property : fieldWithPrice,
                    Descending : false,
                },
            ],
            Visualizations : [
                '@UI.LineItem#simplified',
            ],
        },
    },
);

You can refer to a specialised UI.LineItem collection, when you define one with a qualifier. The view with this UI.SelectionPresentationVariant will then have other columns. More information are available in the SAP UI5 Documentation.

Creation Dialog

Search term: #CreationDialog

When creating a new entity, a creation dialog will pop up for all fields, which are annotated with @Core.Immutable, because fields with this annotation cannot be updated and the value has to be provided during creation.

annotate service1.RootEntities {
    ...
    stringProperty @Core.Immutable;
    ...
};

Defining the Default Sort Order

Search term: #DefaultSort

Use the UI.PresentationVariant annotation to define a default sort order. The attribute Visualizations defines, on which line items the sort order should be applied.

annotate service.RootEntities with @(
    UI.PresentationVariant :{
        SortOrder : [
            {
                Property : field,
                Descending : false,
            },
        ],
        Visualizations : [
            '@UI.LineItem',
        ],
    },
);

Without a sort order defined, the values are ascending. The implementation is in the File: layout.cds

Enabling Multiple Selection in Tables

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "selectionMode"

Multiple Selection can be enabled in the List Report with the property "selectionMode": "Multi" in the table Settings. Other possible values are: Auto, Single or None. More Information about these are available in the SAP Fiori elements Documentation.

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "@com.sap.vocabularies.UI.v1.LineItem": {
                    ...
                    "tableSettings": {
                        "type": "ResponsiveTable",
                        "selectionMode": "Multi",
                        ...
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
},

Handling Semantic Key Fields

Search term: #SemanticKey

Semantic Key fields can be defined, with the annotation Common.SemanticKey, which consists of an Array of fields from the entity. The given fields will be displayed in bold, and when possible the editing status will be displayed. Currently this is only possible for the default DataField.

annotate service.RootEntities with @(
    Common.SemanticKey : [ field ],
);

layouts_RootEntities.cds

Highlighting Line Items Based on Criticality

Search term: #LineItemHighlight

Line items can be highlighted based on there criticality with the annotation @UI.Criticality. The annotation has to be a part of the @UI.LineItem annotation.

annotate service.RootEntities with @(
    UI.LineItem.@UI.Criticality : criticality_code,
);

Adding a Rating Indicator to a Table

Search term: #RatingIndicator

To add a rating indicator (stars) to the table, the entity needs to be annotated with @UI.DataPoint. The Value Property of the annotation defines, how many stars are visible. Values between x.25 and x.74 are displaced as a half star. The target property defines, how many stars are possible.

annotate service.RootEntities with @(
    ...
    UI.DataPoint #ratingIndicator : {
        Value : starsValue,
        TargetValue : 4,
        Visualization : #Rating,
        Title : '{i18n>ratingIndicator}',
        ![@Common.QuickInfo] : 'Tooltip via Common.QuickInfo',
    },
    ...
);

After creating the data point, it has to be added to the @UI.LineItem annotation. For that the UI.DataFieldForAnnotation type is used and the target is the data point.

annotate service.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataFieldForAnnotation',
            Label : '{i18n>ratingIndicator}',
            Target : '@UI.DataPoint#ratingIndicator',
            ![@UI.Importance] : #Low,
        },
        ...
    ],
);

The annotations are in the layouts_RootEntities.cds file.

Adding a Progress Indicator to a Table

Search term: #ProgressIndicator

To add a progress indicator to a table, the entity needs to be annotated with @UI.DataPoint. The value property defines the current progress and the target property the maximum progress. Additionally a criticality can be given, if wanted.

annotate service.RootEntities with @(
    UI.DataPoint #progressIndicator : {
        Value : integerValue,
        TargetValue : 100,
        Visualization : #Progress,
        Title : '{i18n>progressIndicator}',
        //Criticality: criticality,
    },
    ...
);

After creating the data point, it has to be added to the @UI.LineItem annotation. For that the UI.DataFieldForAnnotation type is used and the target is the data point.

annotate service.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataFieldForAnnotation',
            Label : '{i18n>progressIndicator}',
            Target : '@UI.DataPoint#progressIndicator',
            ![@UI.Importance] : #Low,
        },
        ...
    ],
);

The annotations are in the layouts_RootEntities.cds file.

Adding a field with a tooltip to a Table

Search term: #ToolTip

Fields can have a tooltip in the List Report through a work around. First a data point is created, only with the property 'Value' and the annotation '@Common.QuickInfo', which defines the displayed tool tip.

annotate service.RootEntities with @(
    ...
    UI.DataPoint #fieldWithTooltip : {
        Value : dimensions,
        ![@Common.QuickInfo] : '{i18n>Tooltip}',
    },
);

Secondly the data point is added as a line item with the '@UI.DataFieldForAnnotation' type to the table.

annotate service.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataFieldForAnnotation',
            Target : '@UI.DataPoint#fieldWithTooltip',
            Label : '{i18n>fieldWithToolTip}',
        },
        ...
    ],
);

Adding a Smart Micro Chart to a Table

Search term: #MicroChart

To add a smart micro chart to a table you have again to define a @UI.DataPoint. In the case of a radial chart, the properties value and target value are mandatory and the criticality is optional.

annotate service.RootEntities with @(
    ...
    UI.DataPoint #radialChart : { 
        Value : integerValue,
        TargetValue : targetValue,
        Criticality : criticality_code,
    },
    ...
);

The data point needs to be referenced in an @UI.Chart annotation in the measure attributes. The chart type has to be "#Donut" for a radial chart and Measures and MeasureAttributes are mandatory.

UI.Chart #radialChart : {
    Title : '{i18n>radialChart}',
    Description : '{i18n>ThisIsAMicroChart}',
    ChartType : #Donut,
    Measures : [integerValue],
    MeasureAttributes : [{
            $Type : 'UI.ChartMeasureAttributeType',
            Measure : integerValue,
            Role : #Axis1,
            DataPoint : '@UI.DataPoint#radialChart',
    }]
},

The chart is then the target of a DataFieldForAnnotation in the @UI.LineItem annotation, to be shown in the table.

annotate service.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataFieldForAnnotation',
            Target : '@UI.Chart#radialChart',
            Label   : '{i18n>radialChart}',
        },
        ...
    ],
);

The annotations of the example are in the layouts_RootEntities.cds file.

Adding a Contact Quick View to a Table

Search term: #Contact

To have a data field which shows a contact with a contact quick view, the contact quick view needs to be implemented first. An Example would be:

annotate service1.Contacts with @(
    Communication.Contact : {
        fn   : name, //full name
        kind : #org,
        tel  : [{
            uri  : phone,
            type : #preferred
        }],
        adr  : [{
            building : building,
            country  : country.name,
            street   : street,
            locality : city,
            code     : postCode,
            type     : #preferred
        }],
    }
);

There are more supported properties for the Contact, which are listed in the SAP Fiori elements Documentation. This contact card then needs to be a target of a DataFieldForAnnotation, which itself is a port of the @UI.LineItem annotation, to be shown in the table.

annotate service.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataFieldForAnnotation',
            Target : 'contact/@Communication.Contact',
            Label : '{i18n>contactQuickView}'
        },
        ...
    ],
);

The contact card is referenced through the contact attribute of the entity. The annotations of the example are in the layouts_RootEntities.cds file. The contact card starts in Line 761.

Adding a Quick View Facet to a Table

Search term: #QuickView

A quick view facet is a pop up, when you click on an entry in a column and get more information. Typically it is used in combination with associations to one, where the association name is displayed in the column and with a click on it, more information about the association entity can be consumed. To enable a quick view facet, the association entity needs to be annotated with @UI.QuickViewFacet. It is an array of reference facets, where you can reference field groups (a group of properties) to be shown in the quick view. For a better looking header of the quick view, the association entity gets typically also annotated with @UI.HeaderInfo.

annotate service1.ChildEntities2 with @(
    UI.FieldGroup #data : {
        Label : '{i18n>ChildEntity2}',
        Data : [
            {Value : field2},
            {Value : integerProperty},
            {Value : field4},
        ],
    },
);

annotate service1.ChildEntities2 with @(
    UI.HeaderInfo :{
        TypeName : '{i18n>ChildEntity2}',
        TypeNamePlural : '{i18n>ChildEntity2.typeNamePlural}',
        Title          : {
            $Type : 'UI.DataField',
            Value : '{i18n>ChildEntity2}',
        },
        Description    : {
            $Type : 'UI.DataField',
            Value : field,
        },
        ImageUrl : '',
        TypeImageUrl : 'sap-icon://blank-tag',
    },
);

annotate service1.ChildEntities2 with @(
    UI.QuickViewFacets : [
        {
            $Type : 'UI.ReferenceFacet',
            Target : '@UI.FieldGroup#data',
        }
    ],
);

The last step is, that a UI.DataField has to be added to the @UI.LineItem annotation. The value of the data field is the key attribute and then the quick view facet will be automatically visible.

annotate service.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataField',
            Value : association2one_ID,
            Label : '{i18n>ChildEntity2}',
            ![@UI.Importance] : #High,
        },
        ...
    ],
);

The annotations of the example are in the layouts_RootEntities.cds file. Additionally the @Common.Text and @Common.TextArrangement might be used, to replace the ID value with a name property, so that the column is easier to understand.

association2one @title : '{i18n>ChildEntity2}' @Common.Text : association2one.field @Common.TextArrangement : #TextOnly;

The annotations are in the labels.cds file.

Links to the apps of the entity

Search term: FeatureShowcaseChildEntity2, #Navigation

The quick view facet also shows links to the apps of the entity, when the entity is annotated with @Common.SemanticObject.

association2one @Common.SemanticObject : 'FeatureShowcaseChildEntity2';

The semantic object is the application name in the html file. The application property in this contains the following code snippet:

"FeatureShowcaseChildEntity2-manage": {
    title: "ChildEntities2",
    description:"Manage",
    additionalInformation: "SAPUI5.Component=sap.fe.featureShowcase.childEntities2ui",
    applicationType: "URL",
    url: "/featureShowcaseNavigationTarget/webapp",
    navigationMode: "embedded",
},

Here "FeatureShowcaseChildEntity2" is the semantic object to be referenced. The second part of the name is the action of the app. As an example you may have the apps "SalesOrder-Manage", "SalesOrder-View" and so on. Semantic object and action have to be divided by a dash. The description of the app in the html file is the name of the app in the quick view facet. In the deployed version with a SAP WorkZone the subtitle of the app is used.

Adding Multiple Fields to one Column in Responsive Tables

Search term: #MultiFieldsCol

Multiple fields can be in one column, if a field group is added to table with the UI.DataFieldForAnnotation. First you have to define the field group.

annotate service.RootEntities with @(
    UI.FieldGroup #AdminData       : {
        Data  : [
            {Value : createdAt},
            {Value : createdBy},
            {Value : modifiedAt},
            {Value : modifiedBy},
        ]
    },
    ...
);

Secondly you have to add a DataField For Annotation to the @UI.LineItem annotation.

annotate service.RootEntities with @(
    UI.LineItem : [
        ...
        {
            $Type : 'UI.DataFieldForAnnotation',
            Target : '@UI.FieldGroup#AdminData', 
            Label : '{i18n>adminData}',
            ![@UI.Importance] : #High,
        },
        ...
    ],
);

Adding Images to a table

Search term: #Image

Images are typically the first column in a table and help to visually guide the user. An image can be added to a table by just adding a normal data field to the line items.

annotate service.RootEntities with @(
    UI.LineItem : [
        {
            $Type : 'UI.DataField',
            Value : imageUrl,
            @UI.Importance : #High,
        },
        ...
    ],
);

The special thing is just, that the property, which contains the image url has to be annotated with @UI.IsImageURL. The example is annotated in the labels.cds file.

Adding Currency or UoM Fields to a table

Search term: #Units

The special thing about currency or unit of measure fields is, that they have an additional field with the unit. In order to not have to add both properties to the table, and may risk, that through personalisation one might be not visible, the property with the value can be annotated with the unit. For units of measure the annotation is @Measures.Unit. For currencies the annotation is @Measures.ISOCurrency and for percentage value the annotation is @Measures.Unit : '%' . The examples from the feature showcase are in the labels.cds file.

Adding a link to a table

Search term: #Link

With a UI.DataFieldWithUrl a link can be added to the table. The 'Value' property is the visible text and the 'Url' is the target.

@UI.LineItem : [
    {
        $Type               : 'UI.DataFieldWithUrl',
        Url                 : fieldWithURL, //Target, when pressing the text
        Value               : fieldWithURLtext, //Visible text
        Label               : '{i18n>dataFieldWithURL}',
        ![@UI.Importance]   : #Medium,
    },
]

Since UI5 1.129.0 the 'Value' property can also be annotated to determine how the link opens.

annotate service.RootEntities with {
    fieldWithURLtext @HTML5.LinkTarget : '_blank';
}

The annotation is documented here.

Add custom column (Extensibility)

Search term: #CustomColumn

To fulfill business requirements, there might be the need, to add custom columns to a table. With the SAP Fiori elements extension points this is possible. First the additional column needs to be created als a xml fragment. This fragment should be in a separate folder of the webapp. In this example, the fragment contains a label which consists of the validFrom and validTo property of the entity.

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m">
        <Label text="{validFrom} - {validTo}"/>
</core:FragmentDefinition>

This label shall be visible as an additional column. For this the manifest.json file needs to be adjusted.

"RootEntityListReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "@com.sap.vocabularies.UI.v1.LineItem": {
                    ...
                    "columns": {
                        "CustomColumn": {
                            "key": "customColumnLR",
                            "header": "{i18n>validityPeriodLR}",
                            "template": "sap.fe.featureShowcase.mainApp.ext.CustomColumn-DateRangeLR",
                            "availability": "Adaptation",
                            "horizontalAlign": "Center",
                            "width": "auto",
                            "properties": [
                                "validFrom",
                                "validTo"
                            ],
                            "position": {
                                "placement": "After",
                                "anchor": "DataField::fieldWithCriticality"
                            }
                        }
                    }
                },
                ...
            },
            ...
        }
    }
}

The columns of the line item property need to be extended with the additional field. The key property needs to be unique and the template refers to the xml fragment. The path consists of two parts. The first one is the namespace of the application (sap.fe.featureShowcase.mainApp), the second one is the navigation to the fragment within the webapp folder of the app (.ext.CustomColumn-DateRangeLR). The "availability" property defines, whether the column is visible or not. Possible values are "Default", "Adaption" or "Hidden". The "properties property defines, which properties should be used, when sorting is available, to sort. The given properties have to be part of the entity and cannot be navigation properties. Lastly "position" defines, were the column should be added in the table. For "position" there are the options "Before" or "After" and the "anchor" has to ba an existing data field of the table, for example "DataField::fieldWithCriticality". Additional information are available in the SAP UI5 Documentation.

Object Page

General Features Object Page

Annotations for data fields

Communication properties

Search term: #CommunicationFields

To display emails and phone numbers as a link, they are annotated with @Communication.IsEmailAddress or @Communication.IsPhoneNumber

annotate schema.RootEntities with{
    ...
    email                   @title : '{i18n>email}'                          @Communication.IsEmailAddress;
    telephone               @title : '{i18n>telephone}'                      @Communication.IsPhoneNumber;
    ...

Time and Date

Search term: #TimeAndDate

SAP Fiori elements provides out of the box support for displaying and editing dates and times, as well as time stamps. No annotations are needed, the properties just need to have the corresponding data type.

aspect rootBasis : {
    ...
    validFrom   : Date;
    validTo     : DateTime;
    time        : Time;
    timeStamp   : Timestamp;
    ...
};

Since UI5 1.129.0 you can use @UI.DateTimeStyle to modify how the date is displayed.

annotate service.RootEntities with {
    validTo @UI.DateTimeStyle : 'short'
}

Allowed values are 'short', 'medium', 'long' and 'full'.

Multi line text

Search terms: #MultiLineText, "formatOptions"

With the annotation @UI.MultiLineText longer Strings are displayed in multiple lines.

annotate schema.RootEntities with{
    ...
    description             @title : '{i18n>description}'                    @UI.MultiLineText;
    ...
};

Additionally the maximum number of lines can be defined in the manifest.json. The data field which is annotated with the @UI.MultiLineText annotation is the qualifier. The format option "textLinesDisplay" defines how many lines are displayed in the read only mode and "textLinesEdit" defines it correspondingly for the edit mode. "textMaxLines" defines how many lines are maximal possible, if lesser are used, lesser are displayed. Another option for "textMaxCharactersDisplay" is "Infinity", to display the text completely and for "textExpandBehaviorDisplay" "InPlace", to expand the text on the page. "InPlace" is the default option.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                ...
                "@com.sap.vocabularies.UI.v1.FieldGroup#Section": {
                    "fields": {
                        "DataField::description": {
                            "formatOptions": {
                                "textLinesDisplay": 1,
                                "textLinesEdit": 3
                            }
                        },
                        "DataField::description_customGrowing": {
                            "formatOptions": {
                                "textMaxLines": "5",
                                "textMaxCharactersDisplay": 400,
                                "textExpandBehaviorDisplay" : "Popover"
                            }
                        }
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
},

More information are available in the SAP Fiori elements Documentation.

Placeholder values

Search term: #Placeholder

With @UI.Placeholder a placeholder value can be defined, for when the field is in edit mode.

annotate schema.RootEntities with {
    ...
    region @title : '{i18n>region}' @UI.Placeholder : 'Select a region';
    ...
};

The value can also be a property path.

Header Area Object Page

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "anchorBarVisible"

By default, the header of an Object Page and the anchor bar are enabled. Both can be disabled with the SAP Fiori tools or in the manifest.json.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "content": {
                "header": {
                    "anchorBarVisible": true,
                    "visible": true,
                    ...
                },
                ...
            }
        }
    }
},

Title and Subtitle

Search term: #HeaderInfo

The title and subtitle of an Object Page are defined with the annotation @UI.HeaderInfo.

annotate service.RootEntities with @(
    UI.HeaderInfo :{
        TypeName : '{i18n>RootEntities}',
        TypeNamePlural : '{i18n>RootEntities.typeNamePlural}',
        Title          : {
            $Type : 'UI.DataField',
            Value : field,
        },
        Description    : {
            $Type : 'UI.DataField',
            Value : '{i18n>RootEntities}',
        },
        ImageUrl : imageUrl,
        TypeImageUrl : 'sap-icon://sales-order',
    },
);

layouts_RootEntities.cds. The "TypeName" is the Title and it is displayed next to the SAP Logo in header bar on the Object Page. The "TypeNamePlural" will be shown, if all entities are shown in a table on the parent Object Page (this is not the case in the example). The "Title" of the Object Page, displayed in the actual header on the left side in bold. It should display a language-dependent product text in SAP back-end systems. The "Description" is beneath the "Title" and displays normally the product title in SAP back-end systems. If the optional "ImageUrl" property is given, then the picture will be visible on the left side of the "Title" and "Description". If no url is given for the "ImageUrl", but "TypeImageUrl" is defined, it will be displayed instead.

Header Facets

Search term: #HeaderFacets

The header facets are a collection of facets which are displayed in the header of an Object Page. Both UI.ReferenceFacet and UI.CollectionFacet are supported. The facets are added to the @UI.HeaderFacets annotation. Collection facets need to have an ID, to work properly.

annotate service.RootEntities with @(
    UI.HeaderFacets : [
        {
            $Type : 'UI.ReferenceFacet',
            Target : '@UI.DataPoint#fieldWithPrice',
        },
        {
            $Type : 'UI.CollectionFacet',
            Facets : [
                ...
            ],
        },
        ...
    ],

Plain Text

Search term: #PlainText

Plain text can be displayed, by adding a normal data field to a field group and use this field group as a target of a reference facet.

annotate service.RootEntities with @(
    UI.HeaderFacets : [
        ...
        {
            $Type : 'UI.ReferenceFacet',
            Target : '@UI.FieldGroup#plainText',
            Label : '{i18n>plainText}'
        },
    ],
);

annotate service.RootEntities with @(
    UI.FieldGroup #plainText : {
        Data  : [
            {Value : description}
        ]
    },
);

layouts_RootEntities.cds Additionally the used property of the entity in the field group has to be annotated with @UI.MultiLineText.

description     @UI.MultiLineText;

labels.cds

Header Field Group Facet

Search term: #HeaderFieldGroup

Field groups can be part of a header.

annotate service.RootEntities with @(
    UI.HeaderFacets : [
        ...
        {
            $Type : 'UI.ReferenceFacet',
            Target : '@UI.FieldGroup#HeaderData',
            Label : '{i18n>HeaderData}'
        },
        ...
    ],
);

Supported types for the data property of the field group in a header, are the normal UI.DataField and the UI.DataFieldForAnnotation. A quick view contact card can be displayed, through the DataFieldForAnnotation. A quick view facet can be display, by just adding the key as a data field. Both implementations are identical, to how they would be added as a line item in a List Report.

annotate service.RootEntities with @(
    ...
    UI.FieldGroup #HeaderData       : {
        Data  : [
            {Value : field},
            {Value : fieldWithCriticality, Criticality : criticality_code},
            {Value : fieldWithUoM},
            {Value : association2one_ID},
            {
                $Type : 'UI.DataFieldForAnnotation',
                Target : 'contact/@Communication.Contact',
                Label   : '{i18n>contact}',
            },
        ]
    },
    ...
);

Custom Field

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "CustomFieldHeaderOP"

With extension points, it is possible to add custom fields to existing field groups. Therefore the manifest.json file needs to be adapted.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                ...
                "@com.sap.vocabularies.UI.v1.FieldGroup#HeaderData": {
                    "fields": {
                        "CustomFieldHeaderOP": {
                            "label": "{i18n>validityPeriodOP}",
                            "template": "sap.fe.featureShowcase.mainApp.ext.CustomField-DateRange",
                            "position": {
                                "placement": "After",
                                "anchor": "DataField::field"
                            }
                        }
                    }
                }
            },
            ...
        }
    }
},

Under control configuration an existing field group is extended through adding a fields to the "fields" property. The template is the path to the xml fragment. For the position.placement the value "Before" and "After" are possible. Other data fields of the field group can be used as an anchor.

Address Facet

Search term: #AddressFacet

The @Communication.Address annotation of an entity can be directly displayed. For this the label property of the annotation is used, therefore the label property needs to be fully formatted. Linebreaks can be achieved with '\n'.

annotate service.RootEntities with @(
    UI.HeaderFacets : [
        ...
        {
            $Type : 'UI.ReferenceFacet',
            Target : 'contact/@Communication.Address',
            Label : '{i18n>Address}'
        },
        ...
    ],
);

annotate service1.Contacts with @(
    ...
    Communication.Address : {
        ...
        label : addressLabel,
        ...
    }
);

In this example the label is generated through a CAP function in the service.js file.

Data Points

Search term: #DataPoint

A data point represent a single point of data. Typically it is a number, but it can also be textual, like a status value.

annotate service.RootEntities with @(
    UI.HeaderFacets : [
        ...
        {
            $Type : 'UI.ReferenceFacet',
            Target : '@UI.DataPoint#progressIndicator',
        },
        ...
    ],
);

If the data point is a number, the default scale and precision can be overridden. More information are available in the SAP Fiori elements Documentation. The following types of data points are supported: Rating, Progress and Key value. Data points support tooltips with the annotation @Common.QucikInfo. The tooltip can either be a string or a property path.

Rating

Search term: #RatingIndicator

With the Visualization property set to "#Rating" the data point will be displayed as filled stars. The "TargetValue" property sets the maximal amount of stars. The value property is the amount of stars, which are filled. Values between x.25 and x.74 are displaced as a half star.

annotate service.RootEntities with @(
    UI.DataPoint #ratingIndicator : {
        Value : starsValue,
        TargetValue : 4,
        Visualization : #Rating,
        Title : '{i18n>ratingIndicator}',
    },
);

Progress

Search term: #ProgressIndicator

With the Visualization property set to "#Progress" the data point will be displayed as a bar surrounded by a container. The "TargetValue" property is the maximal value. If the value is higher or equals the target value, the container is filled. Additionally a criticality can be defined, which changes the color of the bar and container.

annotate service.RootEntities with @(
    UI.DataPoint #progressIndicator : {
        Value : integerValue,
        TargetValue : 100,
        Visualization : #Progress,
        Title : '{i18n>progressIndicator}',
        Criticality: criticality,
    },
);

Key value

Search term: #KeyValue

A key value data point is the default data point, when the "Visualization" property is not specified.

annotate service.RootEntities with @(
    ...
    UI.DataPoint #fieldWithPrice : {
        Value : fieldWithPrice,
        Title : '{i18n>fieldWithPrice}',
    },
);

Micro chart Facet

Search term: #OPMicroChart

A micro chart facet consists of a title, a subtitle, a Microchart control, and a footer.
The following Microchart controls are supported: Area, Bullet, Radial, Column, Line, Harvey, Stacked bar and Comparison micro chart.
The micro chart is defined with the @UI.Chart annotation, which then is the target of a ReferenceFacet in the @UI.HeaderFacets annotation.

annotate service.RootEntities with @(
    UI.HeaderFacets : [
        ...
        {
            $Type : 'UI.ReferenceFacet',
            Target : '@UI.Chart#radialChart',
        },
        ...
    ],
);

The title of the facet is the "Title" property of the @UI.Chart annotation and the subtitle is the "Description" property of the chart. If the "Value" property of the data point is a field with unit of measure, the unit will be displayed in the footer. Currently navigation properties are not supported in the @UI.Chart annotation and the "MeasureAttributes" property of the chart has to be a data point. The @UI.DataPoint supports generally the "Criticality" and "CriticalityCalculation" property, but the support varies between the micro chart types. If the value of the data point is annotated with a unit of measure, the unit will be shown as the footer of the micro chart facet.

annotate service1.ChartDataEntities {
    integerValueWithUoM @Measures.Unit : uom_code;
}

UI.DataPoint #lineChartWidth : {
    Value : integerValueWithUoM,
    MinimumValue : 0,
    MaximumValue : 100,
    Criticality : criticality_code,
},

In the following examples, all used properties are mandatory.

Area Micro Chart

Search term: #microChartArea

The area micro chart is a trend chart, which provides information for the actual and target value for a specified dimension. The displayed values at the bottom of the chart are the boundary values of the dimension. The values above the chart are the boundary values of the measure attribute.

annotate service.ChartDataEntities with @(
    UI.Chart #areaChart : {
        Title : '{i18n>areaChart}',
        Description : '{i18n>ThisIsAMicroChart}',
        ChartType : #Area,
        Dimensions : [
            dimensions,
        ],
        Measures : [
            integerValue,
        ],
        MeasureAttributes : [
            {
                $Type : 'UI.ChartMeasureAttributeType',
                Measure : integerValue,
                Role : #Axis1,
                DataPoint : '@UI.DataPoint#areaChart',
            },
        ],
    },
    ...
);

The criticality calculation of the data point is mandatory, as each value is shown with its threshold (error, warning, acceptance and good) ranges.

annotate service.ChartDataEntities with @(
    UI.DataPoint #areaChart : { 
        Value : integerValue,
        TargetValue : targetValue,
        CriticalityCalculation :{
            ImprovementDirection        : #Target,
            ToleranceRangeLowValue      : areaChartToleranceLowerBoundValue,
            ToleranceRangeHighValue     : areaChartDeviationUpperBoundValue,
            DeviationRangeLowValue      : areaChartDeviationLowerBoundValue,
            DeviationRangeHighValue     : areaChartDeviationUpperBoundValue,
        },
    },
);

Bullet Micro Chart

Search term: #microChartBullet

The bullet chart features a single measure and compares it to one or more other measures (e.g. value with target comparison). Both "Criticality" and "CriticalityCalculation" are supported, but if both are given "Criticality" overrides "CriticalityCalculation". The bullet chart does not support the criticality value of 5 (new item). The measures attribute, while it is mandatory, has no effect on the chart.

annotate service.RootEntities with @(
    UI.Chart #bulletChart : {
        Title : '{i18n>bulletChart}',
        Description : '{i18n>ThisIsAMicroChart}',
        ChartType : #Bullet,
        Dimensions : [
            dimensions
        ],
        Measures : [
            integerValue,
        ],
        MeasureAttributes : [
            {
                $Type : 'UI.ChartMeasureAttributeType',
                Measure : integerValue,
                Role : #Axis1,
                DataPoint : '@UI.DataPoint#bulletChart',
            },
        ],
    },
    ...
);

The "MinimumValue" property is needed to render the chart properly. The value is the actual bar. The forecast value is the bar in the background with a lower opacity and the target value is the dark line.

annotate service.RootEntities with @(
    ...
    UI.DataPoint #bulletChart : {
        Value : integerValue,          
        TargetValue : targetValue,     
        ForecastValue : forecastValue, 
        Criticality : criticality_code,
        MinimumValue : 0,              
    },
    ...
);

Radial Micro Chart

Search term: #microChartRadial

The radial micro chart displays a single percentage value. The measures attribute, while it is mandatory, has no effect on the chart.

annotate service.RootEntities with @(
    ...
    UI.Chart #radialChart : {
        Title : '{i18n>radialChart}',
        Description : '{i18n>ThisIsAMicroChart}',
        ChartType : #Donut,
        Measures : [
            integerValue,
        ],
        MeasureAttributes : [
            {
                $Type : 'UI.ChartMeasureAttributeType',
                Measure : integerValue,
                Role : #Axis1,
                DataPoint : '@UI.DataPoint#radialChart',
            },
        ],
    },
    ...
);

The percentage value is the fraction of the value and the target value.

annotate service.RootEntities with @(
    ...
    UI.DataPoint #radialChart : { 
        Value : integerValue,
        TargetValue : targetValue,
        Criticality : criticality_code,
    },
    ...
);

The unit of measure label will not be rendered, as the chart displays percentage values. Both "Criticality" and "CriticalityCalculation" are supported, but if both are given "Criticality" overrides "CriticalityCalculation".

Line Micro Chart

Search term: #microChartLine

The line chart displays a series of data points as a line. The bottom values are the border values of the dimension. The upper left value is the smallest value of the first measure property and the upper right value is the largest value of the last measure property. The shown unit of measure is from the first entry.

annotate service.ChartDataEntities with @(
    ...
    UI.Chart #lineChart : { 
        Title : '{i18n>lineChart}',
        Description : '{i18n>ThisIsAMicroChart}',
        ChartType : #Line,
        Measures : [
            integerValueWithUoM,
            targetValue,
        ],
        Dimensions : [
            dimensions,
            dimensions
        ],
        MeasureAttributes : [
            {
                $Type : 'UI.ChartMeasureAttributeType',
                Measure : integerValueWithUoM,
                Role : #Axis2,
                DataPoint : '@UI.DataPoint#lineChartWidth',
            },
            {
                $Type : 'UI.ChartMeasureAttributeType',
                Measure : targetValue,
                Role : #Axis2,
                DataPoint : '@UI.DataPoint#lineChartDepth',
            },
        ],
    },
    ...
);

It is recommended to only use one measure, and a maximum of three measures, if more a required. If the "Criticality" property contains a path, then the value of the last data point's "Criticality" property determines the color of the line.

annotate service.ChartDataEntities with @(
    ...
    UI.DataPoint #lineChartWidth : { 
        Value : integerValueWithUoM,
        Criticality : criticality_code,
    },
    UI.DataPoint #lineChartDepth : { 
        Value : targetValue,
        Criticality : criticality_code,
    },
    ...
);

Column Micro Chart

Search term: #microChartColumn

A column chart uses vertical bars to compare values of a dimension. The displayed values at the bottom of the chart are the boundary values of the dimension. The values above the chart are the boundary values of the measure attribute.

annotate service.ChartDataEntities with @(
    ...
    UI.Chart #columnChart : { 
        Title : '{i18n>columnChart}',
        Description : '{i18n>ThisIsAMicroChart}',
        ChartType : #Column,
        Measures : [
            integerValue
        ],
        Dimensions : [
            dimensions
        ],
        MeasureAttributes : [
            {
                $Type : 'UI.ChartMeasureAttributeType',
                Measure : integerValue,
                Role : #Axis1,
                DataPoint : '@UI.DataPoint#dataPointForChart',
            }
        ]
    },
    ...
);

Both "Criticality" and "CriticalityCalculation" are supported, but if both are given "Criticality" overrides "CriticalityCalculation".

annotate service.ChartDataEntities with @(
    ...
    UI.DataPoint #dataPointForChart : {
        Value : integerValue,
        Criticality : criticality_code
    },
);

Harvey Micro Chart

Search term: #microChartHarvey

A harvey chart plots a single measure value against a maximum value.

annotate service.RootEntities with @(
    ...
    UI.Chart #harveyChart : {
        Title : '{i18n>harveyChart}',
        Description : '{i18n>ThisIsAMicroChart}',
        ChartType : #Pie,
        Measures : [
            fieldWithPrice
        ],
        MeasureAttributes : [
            {
                $Type : 'UI.ChartMeasureAttributeType',
                Role : #Axis1,
                Measure: fieldWithPrice,
                DataPoint : '@UI.DataPoint#harveyChart',
            }
        ]
    },
);

For the semantic coloring, only the "Criticality" property is supported.

annotate service.RootEntities with @(
    ...
    UI.DataPoint #harveyChart : {
        Value : fieldWithPrice,
        MaximumValue : fieldWithUoM,
        Criticality : criticality_code
    },
    ...
);

Stacked Bar Micro Chart

Search term: #microChartStackedBar

A stacked bar chart uses vertical bars to compare values of a dimension. The displayed values at the bottom of the chart are the boundary values of the dimension. The values above the chart are the boundary values of the measure attribute.

annotate service.ChartDataEntities with @(
    ...
    UI.Chart #stackedBarChart : { 
        Title : '{i18n>stackedBarChart}',
        Description : '{i18n>ThisIsAMicroChart}',
        ChartType : #BarStacked,
        Measures : [
            integerValue
        ],
        Dimensions : [
            dimensions
        ],
        MeasureAttributes : [
            {
                $Type : 'UI.ChartMeasureAttributeType',
                Measure : integerValue,
                Role : #Axis1,
                DataPoint : '@UI.DataPoint#dataPointForChart',
            }
        ]
    },
    ...
);

Both "Criticality" and "CriticalityCalculation" are supported, but if both are given "Criticality" overrides "CriticalityCalculation".

annotate service.ChartDataEntities with @(
    ...
    UI.DataPoint #dataPointForChart : {
        Value : integerValue,
        Criticality : criticality_code
    },
);

Comparison Micro Chart

Search term: #microChartComparision

A comparison chart uses three horizontal bars to compare values of a dimension. If more values are defined in the dimension, they will only show up in the tooltip. The displayed values on the left represent the dimension value of each data point. The values on the right are the actual values. If a unit of measure is shown, then it is from the first data point to be plotted.

annotate service.ChartDataEntities with @(
    ...
    UI.Chart #comparisonChart : { 
        Title : '{i18n>comparisonChart}',
        Description : '{i18n>ThisIsAMicroChart}',
        ChartType : #Bar,
        Measures : [
            integerValue
        ],
        Dimensions : [
            dimensions
        ],
        MeasureAttributes : [
            {
                $Type : 'UI.ChartMeasureAttributeType',
                Measure : integerValue,
                Role : #Axis1,
                DataPoint : '@UI.DataPoint#dataPointForChart',
            }
        ]
    },
);

For semantic coloring, only the "Criticality" property is supported.

annotate service.ChartDataEntities with @(
    ...
    UI.DataPoint #dataPointForChart : {
        Value : integerValue,
        Criticality : criticality_code
    },
);

Header Custom Facet

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "CustomHeaderFacet"

Through extension points custom facets can be added to the header. In the Feature Showcase the Item1 Object Page has a custom header facet. The facet itself is a XML fragment, which then gets added through the manifest.json file.

"childEntities1ObjectPage": {
    ...
    "options": {
        "settings": {
            ...
            "content": {
                "header": {
                    "facets": {
                        "CustomHeaderFacet": {
                            "template": "sap.fe.featureShowcase.mainApp.ext.CustomHeaderFacet-ProcessFlow",
                            "templateEdit" : "sap.fe.featureShowcase.mainApp.ext.CustomHeaderFacet-Edit",
                            "stashed": false,
                            "title": "{i18n>customHeaderFacet}",
                            "position": {
                                "placement": "After",
                                "anchor": "FacetWithPercent"
                            },
                            "flexSettings": {
                                "designtime": "not-adaptable-visibility"
                            }
                        }
                    }
                }
            }
        }
    }
},

The "template" property is the path to the XML fragment. The property "stashed" specifies, whether the facet is directly visible or if the facet is not visible from the beginning, but can be added through the key user adaptation feature. The "position.anchor" property is the ID of the anchor facet. The "flexSettings" property specifies, which options key users have, when adapting the UI. The "templateEdit" property is the path to a fragment, which is then shown during edit mode. It is important to use the "sap.ui.layout.FormElement" for structuring the content, because the FormElements will be displayed inside a FormContainer. More information are available in the SAP Fiori elements Documentation

Object Page Actions

Search term: #OPHeaderAction

Actions for the Object Page in general are referenced in the @UI.Identification annotation, which is an array of data fields. The actions are referenced as UI.DataFieldForAction. The criticality only supports the values 0 (normal), 1 (red) and 3 (green). For bound actions the Object Page content is passed and for unbound actions, no context is passed. Navigation actions are also possible.

annotate service.RootEntities with @(
    ...
    UI.Identification : [
        {
            $Type : 'UI.DataFieldForAction',
            Action : 'service1.changeCriticality',
            Label : '{i18n>changeCriticality}',
            Criticality : criticality_code,
        },
        ...
    ],
);

The example is in the layouts_RootEntities.cds file.

Custom Actions (Object Page Header)

Search term: "CustomActionOPHeader"

Custom actions on the Object Page are added in the manifest.json file under "options"->"settings"->"content"->"header"->"actions".

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "content": {
                "header": {
                    ...
                    "actions" : {
                        "CustomActionOPHeader" : {
                            "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox",
                            "enabled": "{= ${ui>/editMode} === 'Editable'}",
                            "visible" : true,
                            "text": "{i18n>CustomActionOPHeader}"
                        }
                    }
                },
                ...
            }
        }
    }
},

The custom action itself is described here: Custom Actions

Navigation from Header Facets

Search term: "targetSections", #InboundNav, "ExternalNavigation"

It is possible to define in-page navigation or external navigation for data points, rating & progress indicators or micro chart facets of the header, so that the facet label will be rendered as a link.

In-page Navigation

Search term: "targetSections", #InboundNav

For the In-page navigation the header facet has the "navigation" property. "sectionId" defines which section of the Object Page is the target und the "subsectionId" defines which subsection of this, if the section has subsections. If no subsection ID is specified, the routing goes to the first subsection. The section ID is composed of the application ID + "--fe::FacetSection::" and then the ID of the section.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                ...
                "@com.sap.vocabularies.UI.v1.DataPoint#progressIndicator":{
                    "navigation":{
                        "targetSections":{
                            "sectionId": "sap.fe.featureShowcase.mainApp::RootEntityObjectReport--fe::FacetSection::chartData",
                            "subSectionId": "sap.fe.featureShowcase.mainApp::RootEntityObjectReport--fe::FacetSubSection::advancedChartData"
                        }
                    }
                },
                ...
            },
            ...
        }
    }
},

annotate service.RootEntities with @(
    UI.Facets : [
        ...
        {
            $Type : 'UI.CollectionFacet',
            Label : '{i18n>chartData}',
            ID  : 'chartDataCollection',
            Facets : [
                ...
                {
                    $Type : 'UI.ReferenceFacet',
                    Target : '@UI.FieldGroup#advancedChartData',
                    ID : 'advancedChartData',
                    ...
                },
            ],
        },
        ...
    ],
);

External Navigation

Search term: "ExternalNavigation"

The external navigation is implemented at two positions in the manifest.json file. First the targeted app needs to be added to the "crossNavigation"->"outbounds" property. In the example "ExternalNavigation" is the qualifier.

"sap.app": {
    ...
    "crossNavigation": {
        "outbounds": {   )
            "ExternalNavigation": {           
                "semanticObject": "FeatureShowcaseChildEntity2",   
                "action": "manage"                     
            }         
        }
    }
},

Secondly the header facet, which shall offer external navigation needs the "navigation" property. "outbound" refers to the qualifier, which is the target of the navigation.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                ...
                "@com.sap.vocabularies.UI.v1.DataPoint#ratingIndicator":{
                    "navigation":{
                        "targetOutbound": {               
                            "outbound": "ExternalNavigation"
                        }
                    }
                },
                ...
            },
            ...
        }
    }
},

Toggling the Editability of Header Fields

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "editableHeaderContent"

By default, the header of an Object Page is editable in edit-mode. However with the annotation "editableHeaderContent": false in the manifest.json file this can be changed, so that the header is non-editable in edit- and display-mode.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            "editableHeaderContent": false,
            ...
        }
    }
},

Adding Subpages

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "childEntities1ObjectPage"

To add a subpage, two objects are needed in the manifest.json file. First an additional route needs to be added, which specifies the target.

"routing": {
    "routes": [
        ...
        {
            "pattern": "RootEntities({key})/ChildEntities1({key2}):?query:",
            "name": "childEntities1ObjectPage",
            "target": "childEntities1ObjectPage"
        },
    ],
    ...
},

Secondly the target needs to be specified.

"routing": {
    ...
    "targets": {
        ...
        "childEntities1ObjectPage": {
            "type": "Component",
            "id": "childEntities1ObjectPage",
            "name": "sap.fe.templates.ObjectPage",
            "options": {
                "settings": {
                    ...
                    "entitySet": "ChildEntities1",
                    ...
                }
            }
        },
        ...
    }
},

To remove the subpage, the route and the target need to be removed. For actual navigation the name of the navigation route has to be referenced as the "route". 'childEntities1' is the attribute name of a child from the entity set of the Object Page.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "navigation": {
                "childEntities1": {
                    "detail": {
                        "route": "childEntities1ObjectPage"
                    }
                },
                ...
            },
            ...
        }
    }
},

Enabling the Related Apps Button

Search term: "showRelatedApps"

With the property "showRelatedApps": true in the manifest.json file, the header action row on the Object Page will include a button "Related Apps", if there are any related apps. This enables the user to quickly navigate to related apps. Related apps are those, with the same semantic object.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "showRelatedApps": true,
            ...
        }
    }
},

Content Area Object Page

Search term: #OPContentArea

The content for the content area is added to the @UI.Facet annotation, which is an array of @UI.ReferenceFacet and @UI.CollectionFacet. A reference facet is a single form, chart or table. A collection facet is a collection of reference facets. The reference facets of a collection facet are displayed in a horizontal way with an automatic line-break. The facets of the @UI.Facet annotation are displayed either as different tabs or as different topics beneath each other on a single page. This can be changed in the manifest.json file. The possible options are "Tabs" or "Page". The title of a subsection will not be displayed, when there is only one type of content in the subsection and the title of the subsection is the same as the title of the content.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "sectionLayout": "Tabs",
            ...
        }
    }
},

Important is, that collection facets must have an ID, else the UI will not properly work. Collection facets at 3rd level and beyond are not considered and it is recommended to use the Tab representation, if tables are used.

More information are available in the SAP Fiori elements Documentation.

General features Content Area Object Page

Search term: #DisplayTextAndID, #HidingContent, #Preview, #SideContent

Displaying Text and ID for Value help Input fields

Search term: #DisplayTextAndID

Instead of showing unreadable long IDs, there is the option to replace the ID with another property value from the entity, for example a name property. The @Common.Text annotation specifies, which value should be displayed instead of the original value. The @Common.TextArrangement annotation defines how the new text is displayed. The options are '#TextOnly', '#TextFirst', '#TextLast', '#TextSeperate'.

annotate schema.RootEntities with {
    ...
    criticality @Common.Text : criticality.name @Common.TextArrangement : #TextFirst;
    ...
};

The feature is not limited to replacing IDs, every property can be annotated with it.

Hiding features

Search term: #HidingContent

Any header facet, section or data field can be hidden with the annotation @UI.Hidden. The annotation only supports boolean values. Expression bindings, e.g. a '!' are not possible.

annotate service.RootEntities with @(
    UI.Facets : [
        ...
        {
            $Type : 'UI.ReferenceFacet',
            Target : '@UI.FieldGroup#ShowWhenInEdit',
            Label   : '{i18n>ShowWhenInEdit}',
            ![@UI.Hidden]: IsActiveEntity,
        },
        ...

    ],
);

Preview

Search term: #Preview

A reference facet in a collection facet is not shown after loading the app, when the reference facet has the ![@UI.PartOfPreview] annotation and it is set to false. The sub section is then hidden beneath a "Show more" button on the UI.

annotate service.RootEntities with @(
    UI.Facets : [
        ...
        {
            $Type : 'UI.CollectionFacet',
            ...
            Facets : [
                ...
                {
                    $Type : 'UI.ReferenceFacet',
                    Target : '@UI.FieldGroup#advancedChartData',
                    ID : 'advancedChartData',
                    Label : '{i18n>advancedChartData}',
                    ![@UI.PartOfPreview] : false
                },
            ],
        },
        ...
    ],
);

Side Content

Search terms: #SideContent , "sideContent"

Sections and subsection on an Object Page can have toggleable side content, which is by default not shown. Such side content is defined by a XML fragment and the toggle is done with a custom action which calls the this.showSideContent("[side-content-key]"); function. The function does not have to be called through a custom action. The side content itself is referenced in the manifest.json file.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "content": {
                ...
                "body": {
                    ...
                    "sections": {
                        "customSectionQualifier": {
                            ...
                            "sideContent": {
                                "template": "sap.fe.featureShowcase.mainApp.ext.SideContent",
                                "equalSplit":true
                            }
                        },
                        ...
                        "childEntities1Section" : {
                            "sideContent": {
                                "template": "sap.fe.featureShowcase.mainApp.ext.SideContent"
                            }
                        }
                    }
                },
                ...
            }
        }
    }
},

The "template" property references the XML fragment and when "equalSplit" is set to true, the side content and the original content will split the screen 1:1, when "equalSplit" is false or not defined, the screen will be split 2:1 in favour of the original content.

The qualifier is the ID of the facet, where the side content should appear. Which qualifier has to be used depends on the structure of the facets, please look into the documentation, to find which is the right qualifier for your goal.

This is how the toggle function may look. It is possible to provide a second boolean parameter to, instead of toggle, set the visibility directly.

sap.ui.define([], function() {
   "use strict";

   return {
      toggleSideContent: function(oBindingContext) {
         this.showSideContent("customSectionQualifier");
      },
      toggleSideContentItem1: function(oBindingContext) {
         this.showSideContent("childEntities1Section");
      }
   };
});

The implementation of custom actions is described in other chapters.

Forms

Search term: #Form

A form is a group of fields. The @UI.FieldGroup annotation is used to group the fields. The field group is added to the @UI.Facets annotation to be displayed. The data of the field group is added to the "Data" property. Normal data fields do not need the "$Type" property and the "Value" property is enough.

annotate service.RootEntities with @(
    ...
    UI.FieldGroup #ShowWhenInEdit       : {
        Data  : [
            {Value : field},
            {Value : fieldWithCriticality},
            {Value : fieldWithUoM},
            {Value : fieldWithPrice},
            {Value : criticality_code},
            {Value : contact_ID},
            {Value : association2one_ID},
        ]
    },
    ...
);

While the field group also has a "Label" property, only the "Label" property of the reference facet will be used for the UI.
The UI labels of each field are defined in the labels.cds file with the @title property. This is the recommended way to define UI labels in CAP, but it is also possible to use the "Label" property of the data field.

UI.Facets : [
    ...
    {
        $Type : 'UI.ReferenceFacet',
        Target : '@UI.FieldGroup#ShowWhenInEdit',
        Label   : '{i18n>ShowWhenInEdit}',
        ...
    },
    ...
]

Connected Fields

Search term: #ConnectedFields

When two fields are semantically connected, they can be displayed next to each other under one label, to show their data relation. The connected field is defined with the annotation @UI.ConnectedFields. The "Template" property is a string, which defines in which order the fields are displayed and what is displayed between both fields, for example a slash. The field references are the qualifiers of the Data property, not the actual names of the property of the entity. The 'Data' property contains both fields. It is important that the field object has the "$Type" property set to "UI.DataField", else the connected field will not show up.

UI.ConnectedFields #ConnectedDates :{
    Label : '{i18n>ConnectedField}',
    Template : '{integerValue} / {targetValue}',
    Data : {
        integerValue : {
            $Type : 'UI.DataField',
            Value : integerValue,
        },
        targetValue : {
            $Type : 'UI.DataField',
            Value : targetValue,
        },
    },
},

The connected field is then referenced as a target of a data field for annotation, to be displayed in a form.

annotate service.RootEntities with @(
    ...
    UI.FieldGroup #Section : {
        Data  : [
            ...
            {
                $Type : 'UI.DataFieldForAnnotation',
                Target : '@UI.ConnectedFields#ConnectedDates',
            },
            ...
        ]
    },
    ...
);

Currently they cannot be rendered in tables or in header facets.

Custom Content

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "CustomContentFieldGroup"

SAP Fiori elements provides the possibility to add custom data fields to forms. The additional field is created as a XML fragment and referenced in the manifest.json file. Under the property "controlConfiguration" the field group has to be referenced with its qualifier (e.g. #ShowWhenInEdit). An ID is defined for the custom field, in the example "DateRange". The property "template" is the namespace + name of the XML fragment and the "position" property defines, where the field is inserted. "placement" has the valid options "After" and "Before" and an anchor is another data field which is a part of the field group. Behind the two colons is the value property name of the data field, in this case "association2one_ID".

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                ...
                "@com.sap.vocabularies.UI.v1.FieldGroup#timeAndDate": {
                    "fields": {
                        "CustomContentFieldGroup": {
                            "label": "{i18n>validityPeriodOP}",
                            "template": "sap.fe.featureShowcase.mainApp.ext.CustomField-DatePicker",
                            "position": {
                                "placement": "Before",
                                "anchor": "DataField::validTo"
                            }
                        }
                    }
                },
                ...
            },
            ...
        }
    }
},

More information are available in the SAP Fiori elements Documentation.

Form Actions and Navigation

Search term: #FormActionsAndIBN

Forms can have their own actions, which show up in the upper right corner of the section by default. The actions and navigations are just added by adding the corresponding data field ("DataFieldForAction" or "DataFieldForIntentBasedNavigation") to the "Data" array of the field group from the form. If the action should be a part of the form toolbar instead of the section toolbar, the data field needs the additional property "Inline : true".

annotate service.RootEntities with @(
    ...
    UI.FieldGroup #Section : {
        Data  : [
            ...
            {
                $Type : 'UI.DataFieldForIntentBasedNavigation',
                Label : '{i18n>inboundNavigation}',
                SemanticObject : 'FeatureShowcaseChildEntity2',
                Action : 'manage',
                RequiresContext : true,
                IconUrl : 'sap-icon://cart',
                Mapping : [
                    {
                        $Type : 'Common.SemanticObjectMappingType',
                        LocalProperty : integerValue,
                        SemanticObjectProperty : 'integerProperty',
                    },
                ],
                ![@UI.Importance] : #High,
            },
            {
                $Type : 'UI.DataFieldForAction',
                Action : 'service1.EntityContainer/unboundAction',
                Label : '{i18n>formActionEmphasized}',
                ![@UI.Emphasized]   : true,
            },
            {
                $Type   : 'UI.DataFieldForAction',
                Action  : 'service1.changeProgress',
                Label   : '{i18n>formAction}',
                Inline  : true,
            },
        ]
    },
    ...
);

Custom Actions (Object Page Section Form)

Search term: "CustomActionSectionForm"

Custom actions can also be added to the section of a form on the Object Page. The qualifier for the section is the annotated ID.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            ...
            "content": {
                ...
                "body": {
                    ...
                    "sections": {
                        "customSectionQualifier": {
                            ...
                            "actions" : {
                                "CustomActionSectionForm" : {
                                    "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox",
                                    "enabled": "{= ${ui>/editMode} !== 'Editable'}",
                                    "visible" : true,
                                    "text": "{i18n>CustomActionSection}"
                                },
                                ...
                            }
                        },
                        ...
                    }
                },
                ...
            }
        }
    }
},

The custom action itself is described here: Custom Actions.

If the action should be part of the form toolbar instead of the section toolbar, the action has to be defined for the fieldgroup and the property "inline" has to be true.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                ...
                "@com.sap.vocabularies.UI.v1.FieldGroup#Section": {
                    ...
                    "actions" : {
                        "CustomActionForm" : {
                            "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox",
                            "enabled": true,
                            "visible" : true,
                            "inline" : true,
                            "text": "{i18n>CustomActionOPFooter}"
                        }
                    }
                },
                ...
            },
            ...
        }
    }
},

Table

Search terms: "Control", "personalization", "enableFullScreen", #OPTableTitle, "quickVariantSelection", "creationMode", "enableExport"

Table sections are most commonly for a child entities or other associated entities. There implementation consists of two parts. First the associated or child entity needs the @UI.LineItem annotation. This defines which fields are displayed.

annotate service1.ChildEntities3 with @(
    UI.LineItem :[
        {
            $Type : 'UI.DataField',
            Value : field,
        },
    ],
);

Secondly the @UI.LineItem annotation needs to be a reference facet.

annotate service.RootEntities with @(
    UI.Facets : [
        ...
        {
            $Type : 'UI.ReferenceFacet',
            Target : 'childEntities3/@UI.LineItem',
            Label : '{i18n>childEntities3}',
        },
        ...
    ],
);

Enable Variant Management Object Page

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "Control"

To enable Variant Management for a table on an Object Page, the property "variantManagement" needs to be set to "Control"` in the manifest.json file.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "variantManagement": "Control",
            ...
        }
    }
}

Enable Personalization

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "personalization"

Additionally you can turn on or off, if the personalization of columns or the sort order of the table should be possible or whether the user can filter the table.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "childEntities1/@com.sap.vocabularies.UI.v1.LineItem": {
                    "tableSettings": {
                        ...
                        "personalization": {
                            "column": true,
                            "sort": false,
                            "filter": true
                        },
                        ...
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
}

The annotation is in the manifest.json file.

Enable Full Screen Mode

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "enableFullScreen"

With the annotation "enableFullScreen": true in the manifest.json file, you get an additional button on the top right of the table, to view the table in a full screen mode.

"RootEntityObjectReport": {
    "...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "childEntities1/@com.sap.vocabularies.UI.v1.LineItem": {
                    "tableSettings": {
                        ...
                        "enableFullScreen": true,
                        ...
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
},

Adding Titles to Object Page Tables

Search term: #OPTableTitle

The title of an Object Page table is the "TypeNamePlural" property of the @UI.HeaderInfo annotation.

annotate service.ChildEntities1 with @(
    UI.HeaderInfo :{
        ...
        TypeNamePlural : '{i18n>childEntities1.typeNamePlural}',
        ...
    },
);

If the section title and the table title are identical or the @UI.HeaderInfo annotation is not given, the table title will not be displayed. Also if the table is the only content in a subsection and has a title, the subsections title will not be displayed.

Adding Segmented Buttons to a Table Toolbar

Search term: "quickVariantSelection"

The segmented button in the table toolbar is used to switch between different views. If more then 3 views are specified for the table, then the segmented button will be replaced by a dropdown button. The view variants are specified in the manifest.json file in the "tableSettings" property of the line item, which is the data source for the table.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "childEntities1/@com.sap.vocabularies.UI.v1.LineItem": {
                    "tableSettings": {
                        ...
                        "quickVariantSelection": {
                            "paths": [
                                {
                                    "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant1"
                                },
                                {
                                    "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant2"
                                },
                                {
                                    "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant3"
                                },
                                {
                                    "annotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#variant4"
                                }
                            ],
                            "hideTableTitle": false,
                            "showCounts": true
                        },
                        ...
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
},

Further information on multiple views are in the List Report part.

Enabling Inline Creation of Table Entries on Object Page

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "creationMode"

The inline creation mode can be enabled in the manifest.json file. Under the table settings the name of the creation mode has to be "Inline". The other option is "NewPage". With the "createAtEnd" property, it can be defined, whether the new row in "Inline" mode should be created at the end of the table or at the beginning (first row) of the table.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "childEntities1/@com.sap.vocabularies.UI.v1.LineItem": {
                    "tableSettings": {
                        ...
                        "creationMode": {
                            "name": "Inline",
                            "createAtEnd": true
                        },
                        ...
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
},

Using the 'Export to Spreadsheet' Feature

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "enableExport"

The "Export to Spreadsheet" feature is enabled on the Object Page, if the copy/paste feature is enabled. Else it is disabled by default. It can be enabled in the manifest.json file for the wanted tables.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "childEntities1/@com.sap.vocabularies.UI.v1.LineItem": {
                    "tableSettings": {
                        ...
                        "enableExport": true
                    },
                    ...
                },
                ...
            },
            ...
        }
    }
},

More information regarding the functionality and restrictions are available in the SAP Fiori elements Documentation.

Custom Actions (Object Page Section Table)

Search term: "CustomActionOPTableToolbar"

Custom actions can also be added to a table toolbar which is part of a section on the Object Page.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "controlConfiguration": {
                "childEntities1/@com.sap.vocabularies.UI.v1.LineItem": {
                    ...
                    "actions" : {
                        "CustomActionOPTableToolbar" : {
                            "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox",
                            "enabled": "{= %{deletePossible} === true}",
                            "visible" : true,
                            "text": "{i18n>CustomActionOPTableToolbar (enabled when delete enabled)}"
                        }
                    }
                },
                ...
            },
            ...
        }
    }
},

The custom action itself is described here: Custom Actions

Chart

Search term: #ChartSection

As an alternative to micro charts in the header, charts are also possible as sections. However the implementation is more complex.

First the entity, which should be the data source for the chart needs to be prepared by annotating it with @Aggregation.ApplySupported

annotate service1.ChartDataEntities with @(
    Aggregation.ApplySupported : {
        Transformations          : [
            'aggregate',
            'topcount',
            'bottomcount',
            'identity',
            'concat',
            'groupby',
            'filter',
            'expand',
            'top',
            'skip',
            'orderby',
            'search'
        ],
        Rollup                   : #None,
        PropertyRestrictions     : true,
        GroupableProperties : [
            dimensions,
            criticality_code
        ],
        AggregatableProperties : [
            {
                $Type : 'Aggregation.AggregatablePropertyType',
                Property : integerValue,
                RecommendedAggregationMethod : 'average',
                SupportedAggregationMethods : [
                    'min',
                    'max',
                    'average'
                ],
            },
        ],
    }
);

Secondly the entity needs the @Analytics.AggregatedProperties annotation, which defines which aggregation methods are supported. These should match the aggregation methods defined as supported methods for the aggregatable property.

annotate service.ChartDataEntities with @(
    Analytics.AggregatedProperties : [
    {
        Name                 : 'minAmount',
        AggregationMethod    : 'min',
        AggregatableProperty : 'integerValue',
        ![@Common.Label]     : 'Minimal Net Amount'
    },
    {
        Name                 : 'maxAmount',
        AggregationMethod    : 'max',
        AggregatableProperty : 'integerValue',
        ![@Common.Label]     : 'Maximal Net Amount'
    },
    {
        Name                 : 'avgAmount',
        AggregationMethod    : 'average',
        AggregatableProperty : 'integerValue',
        ![@Common.Label]     : 'Average Net Amount'
    }
    ],
);

After that the @UI.Chart can be defined. Please note, that the "Measures" property is a name of the aggregation methods. If it is just a property of the entity, like "integerValue", the chart won't be displayed. The "Dimensions" property has the default dimension. The second chart dimension attribute is is the category into which a drill down is possible.
The added actions to the "Actions" property are shown in the chart toolbar.

annotate service.ChartDataEntities with @(
    ...
    UI.Chart : {
        Title : '{i18n>chart}',
        ChartType : #Column,
        Measures :  [maxAmount],
        Dimensions : [dimensions],
        MeasureAttributes   : [{
                $Type   : 'UI.ChartMeasureAttributeType',
                Measure : maxAmount,
                Role    : #Axis1
        }],
        DimensionAttributes : [
            {
                $Type     : 'UI.ChartDimensionAttributeType',
                Dimension : dimensions,
                Role      : #Category
            },
            {
                $Type     : 'UI.ChartDimensionAttributeType',
                Dimension : criticality_code,
                Role      : #Category
            },
        ],
        Actions : [
            {
                $Type : 'UI.DataFieldForAction',
                Action : 'service1.EntityContainer/unboundAction',
                Label : '{i18n>unboundAction}',
            },
        ]
    },
    ...
);

Lastly the @UI.Chart annotation needs to be added as a reference facet to the @UI.Facets annotation.

annotate service.RootEntities with @(
    UI.Facets : [
        ...
        {
            $Type : 'UI.ReferenceFacet',
            Target : 'chartEntities/@UI.Chart',
            Label : '{i18n>chart}'
        },
        ...
    ],
);

For semantic coloring of a dimension, the dimension property is annotated with @UI.ValueCriticality, where possible values of the property are matched against a criticality.

annotate service1.ChartDataEntities with {
    criticality @(
        UI.ValueCriticality   : [
            {
                Value       : 0,
                Criticality : #Neutral
            },
            {
                Value       : 1,
                Criticality : #Negative
            },
            {
                Value       : 2,
                Criticality : #Critical
            },
            {
                Value       : 3,
                Criticality : #Positive
            }
        ]
    );
};

More information about the chart section are available in the SAP Fiori elements Documentation.

Custom Section and Subsection

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "customSectionQualifier"

Custom sections and subsections can be also be implemented by adding the wanted XML fragment as a section to the "body" property of the "content" property in the manifest.json file.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "content": {
                ...
                "body": {
                    ...
                    "sections": {
                        "customSectionQualifier": {
                            "template": "sap.fe.featureShowcase.mainApp.ext.CustomSection",
                            "position": {
                                "anchor": "Section",
                                "placement": "After"
                            },
                            "title": "{i18n>CustomSection}",
                            ...
                        },
                        ...
                    }
                },
                ...
            }
        }
    }
},

The ID of the custom section has to be unique. The "template" property is the path to the XML fragment and the "position" property defines where the section is placed. The "anchor" of it is an ID of another section and the placement can either be "Before" or "After".

Custom Subsection

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "customSubSectionQualifier"

Custom subsections are implemented in a similar way to custom sections. The qualifier for the section is the ID of the collection facet. The subsection is part of the property "subSections" and "template" is the path to the XML fragment. The string is a combination of the ID from the manifest ("sap.fe.featureShowcase.mainApp") and then the path to the fragment in the webapp folder ("ext" is the folder, "CustomSubSection" is the name of the fragment). The "visible" property also accepts binding expressions like "enabled="{= ${ui>/editMode} === 'Editable'}". When no "position" property is given, the fragment is placed at the end.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "content": {
                ...
                "body": {
                    ...
                    "sections": {
                        ...
                        "collectionFacetSection": {
                            "subSections": {
                                "customSubSectionQualifier": {
                                    "template": "sap.fe.featureShowcase.mainApp.ext.CustomSubSection",
                                    "title": "{i18n>customSubSection}",
                                    "visible": true
                                }
                            }
                        },
                        ...
                    }
                },
                ...
            }
        }
    }
},

Footer bar

Determining actions

Search term: #DeterminingAction

Determining actions are shown in the footer bar of the Object Page. These actions are part of the @UI.Identification array. The only difference to actions shown in the header is the additional property Determining : true.

annotate service.RootEntities with @(
    ...
    UI.Identification : [
        ...
        {
            $Type : 'UI.DataFieldForAction',
            Action : 'service1.changeCriticality',
            Label : '{i18n>changeCriticality}',
            Determining : true,
            Criticality : criticality_code,
        },
    ],
);

Custom Actions (Object Page Footer)

Search term: "CustomActionOPFooter"

Of course, custom actions can also be added to the footer bar of the Object Page.

"RootEntityObjectReport": {
    ...
    "options": {
        "settings": {
            ...
            "content": {
                ...
                "footer": {
                    "actions" : {
                        "CustomActionOPFooter" : {
                            "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox",
                            "enabled": "{= ${ui>/editMode} !== 'Editable'}",
                            "visible" : true,
                            "text": "{i18n>CustomActionOPFooter}"
                        }
                    }
                }
            }
        }
    }
},

The custom action itself is described here: Custom Actions

Custom Object Page

INFO: We recommend that you use SAP Fiori tools, which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool.
Search term: "CustomObjectPage_childEntities3"

When navigating from a table to a sub entity, the Object Page for the sub entity can be replaced with a custom one. Two steps are necessary to add a custom Object Page. After creating a XML fragment as the new Object Page for the sub entity, add a new target in the manifest.json file.

"CustomObjectPage_childEntities3": {
    "type": "Component",
    "Id": "CustomObjectPageView",
    "name" : "sap.fe.core.fpm",
    "options": {
        "settings": {
            "viewName": "sap.fe.featureShowcase.mainApp.ext.view.CustomObjectPage",
            "entitySet": "ChildEntities3"
        }
    }
}

The "Id" property should be unique and the "viewName" property is the namespace + name of the XML view, which shall be the Object Page. The "entitySet" property should be the sub entity, to access the data of it in the XML view. It is very important the the "type" is "Component" and that the "name" is "sap.fe.core.fpm", in order to use the Building Blocks and Flexible programming model from SAP Fiori elements.

The second step is to add the route in the manifest.json to the sub Object Page.

{
    "pattern": "RootEntities({key})/childEntities3({key2}):?query:",
    "name": "CustomObjectPage_childEntities3",
    "target": "CustomObjectPage_childEntities3"
}

The pattern is the url to the sub Object Page and the target is the qualifier for the Object Page from the targets. The name property should be the same as the target qualifier.

When creating a custom Object Page, the Building Blocks from SAP Fiori elements can be used, to speed up the development of custom content and ensures higher consistency. More information about the Building Blocks are available in the SAP Fiori elements Documentation.

How to obtain support Create an issue in this repository if you find a bug or have questions about the content.

For additional support, ask a question in SAP Community.

How to obtain support

Create an issue in this repository if you find a bug or have questions about the content.

For additional support, ask a question in SAP Community.

License

Copyright (c) 2021 SAP SE or an SAP affiliate company. All rights reserved. This project is licensed under the Apache Software License, version 2.0 except as noted otherwise in the LICENSE file.