capcap

v1.0.0

Published

3 years ago

A simple CAP project to demonstrate different FEv4 List Report & Oject Page features.

0High
0Medium
0Low

derrik

cap test

SAP Fiori elements for OData V4 Feature Showcase

Screenshot 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:4004/ 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

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.

<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="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](https://sapui5.hana.ondemand.com/#/topic/5fb9f57fcf12401bbe39a635e9a32a4e).

### Custom Actions (Global List Report)
<i>Search term:</i> `"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](#custom-actions)

## Content Area List Report
### Configuring Tables
#### Actions
<i>Search term:</i> `#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 : { $value : [ ... { $Type : 'UI.DataFieldForAction', Action : 'service1.changeCriticality', Label : '{i18n>changeCriticality}', }, ... ], ... }, );

[layouts_RootEntities.cds](app/featureShowcase/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 : { $value : [ ... { $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. <br/> 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 : { $value : [ ... { $Type : 'UI.DataFieldForAction', Action : 'service1.EntityContainer/unboundAction', Label : '{i18n>unboundAction}', }, ... ], ... }, );

##### Side Effects of actions
<i>Search term:</i> `#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 : '_it', Common.SideEffects : { TargetProperties : ['_it/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
<i>Search term:</i> `#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
<i>Search term:</i> `#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
<i>Search term:</i> `"MenuActions"`

A dropdown menu to group actions is possible with an annotation in the [manifest.json](app/featureShowcase/webapp/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
<i>Search term:</i> `#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.

annotate service1.RootEntityVariants with @( Capabilities.DeleteRestrictions : { Deletable : deletePossible, }, UI.UpdateHidden : updateHidden );

[capabilities.cds](app/featureShowcase/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
<i>Search term:</i> `#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 : { $value : [ ... { $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](app/featureShowcase/layouts_RootEntities.cds) <br/>

The semantic object and the action are in the [fiori.html](app/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
<i>Search term:</i> `#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
<i>Search term:</i> `#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](https://cap.cloud.sap/docs/node.js/events#req-msg).

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)
<i>Search term:</i> `"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](#custom-actions-list-report)

#### Setting the Table Type

<i style="color:orange;">INFO: </i>We recommend that you use [SAP Fiori tools](http://help.sap.com/disclaimer?site=https://help.sap.com/viewer/product/SAP_FIORI_tools/Latest/en-US), which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool. <br/>
<i>Search term:</i> `"tableSettings"`, `"ResponsiveTable"`, `"GridTable"`

Supported table types are the <i>ResponsiveTable</i> and the <i>GridTable</i>. The table type of the List Report can be adjusted in the [manifest.json](app/featureShowcase/webapp/manifest.json) file (Line 146).

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


#### Multiple Views
<i>Search term:</i> `#multipleViews`, `"views"`, `"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
<i>Search term:</i> `"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
<i>Search term:</i> `"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](app/featureShowcase/webapp/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](app/featureShowcase/webapp/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](https://sapui5.hana.ondemand.com/#/topic/b6b59e4a4c3548cf83ff9c3b955d3ba3).

##### Selection Variant
<i>Search term:</i> `#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](app/featureShowcase/layouts_RootEntities.cds) file.

##### Selection Presentation Variant
<i>Search term:</i> `#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](https://sapui5.hana.ondemand.com/#/topic/37aeed74e17a42caa2cba3123f0c15fc).

#### Creation Dialog
<i>Search term:</i> `#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
<i>Search term:</i> `#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](app/featureShowcase/layout.cds)

#### Enabling Multiple Selection in Tables

<i style="color:orange;">INFO: </i>We recommend that you use [SAP Fiori tools](http://help.sap.com/disclaimer?site=https://help.sap.com/viewer/product/SAP_FIORI_tools/Latest/en-US), which is a set of extensions for SAP Business Application Studio and Visual Studio Code, to configure the app using the Application Modeler tool. <br/>
<i>Search term:</i> `"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](https://sapui5.hana.ondemand.com/#/topic/116b5d82e8c545e2a56e1b51b8b0a9bd).

#### Handling Semantic Key Fields
<i>Search term:</i> `#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](app/featureShowcase/layouts_RootEntities.cds)

#### Highlighting Line Items Based on Criticality
<i>Search term:</i> `#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 : { $value : [ ... ], ![@UI.Criticality] : criticality_code, }, );

#### Adding a Rating Indicator to a Table
<i>Search term:</i> `#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 : { $value : [ ... { $Type : 'UI.DataFieldForAnnotation', Label : '{i18n>ratingIndicator}', Target : '@UI.DataPoint#ratingIndicator', ![@UI.Importance] : #Low, }, ... ], ... }, );

The annotations are in the [layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds) file.
#### Adding a Progress Indicator to a Table
<i>Search term:</i> `#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 : { $value : [ ... { $Type : 'UI.DataFieldForAnnotation', Label : '{i18n>progressIndicator}', Target : '@UI.DataPoint#progressIndicator', ![@UI.Importance] : #Low, }, ... ], ... }, );

The annotations are in the [layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds) file.

#### Adding a field with a tooltip to a Table
<i>Search term:</i> `#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 : { $value : [ ... { $Type : 'UI.DataFieldForAnnotation', Target : '@UI.DataPoint#fieldWithTooltip', Label : '{i18n>fieldWithToolTip}', }, ... ], ... }, );


#### Adding a Smart Micro Chart to a Table
<i>Search term:</i> `#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 : { $value : [ ... { $Type : 'UI.DataFieldForAnnotation', Target : '@UI.Chart#radialChart', Label : '{i18n>radialChart}', }, ... ], ... }, );

The annotations of the example are in the [layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds) file.
#### Adding a Contact Quick View to a Table
<i>Search term:</i> `#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](https://sapui5.hana.ondemand.com/#/topic/a6a8c0c4849b483eb10e87f6fdf9383c.html).
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 : { $value : [ ... { $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](app/featureShowcase/layouts_RootEntities.cds) file. The contact card starts in Line 761.
#### Adding a Quick View Facet to a Table
<i>Search term:</i> `#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 : { $value : [ ... { $Type : 'UI.DataField', Value : childEntity2_ID, Label : '{i18n>ChildEntity2}', ![@UI.Importance] : #High, }, ... ], ... }, );

The annotations of the example are in the [layouts_RootEntities.cds](app/featureShowcase/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.

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

The annotations are in the [labels.cds](app/featureShowcase/labels.cds) file.
##### Links to the apps of the entity
<i>Search term:</i> `FeatureShowcaseChildEntity2`, `#Navigation`

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

childEntity2 @Common.SemanticObject : 'FeatureShowcaseChildEntity2';

The semantic object is the application name in the [html file](app/fiori.html). The application property in this contains the following code snippet:

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.
#### Adding Multiple Fields to one Column in Responsive Tables
<i>Search term:</i> `#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 : { $value : [ ... { $Type : 'UI.DataFieldForAnnotation', Target : '@UI.FieldGroup#AdminData', Label : '{i18n>adminData}', ![@UI.Importance] : #High, }, ... ], ... }, );

#### Adding Images to a table
<i>Search term:</i> `#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 : { $value : [ { $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](app/featureShowcase/labels.cds) file.
#### Adding Currency or UoM Fields to a table
<i>Search term:</i> `#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](app/featureShowcase/labels.cds) file.
#### Add custom column (Extensibility)
<i>Search term:</i> `#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"> </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](https://sapui5.hana.ondemand.com/#/topic/d525522c1bf54672ae4e02d66b38e60c).

<br/>

# [Object Page](https://experience.sap.com/fiori-design-web/object-page/)

## General Features Object Page

### Annotations for data fields
#### Communication properties
<i>Search term:</i> `#CommunicationFields`

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

SAP Fiori elements for OData V4 Feature Showcase

Content

List Report

General Features

Flexible Column Layout