diff --git a/.gitignore b/.gitignore index 5e838be..f3efe87 100644 --- a/.gitignore +++ b/.gitignore @@ -26,4 +26,5 @@ mta_archives/ # IDEs .vscode -.idea \ No newline at end of file +.idea +@cds-models \ No newline at end of file diff --git a/README.md b/README.md index bc44a63..27d3042 100644 --- a/README.md +++ b/README.md @@ -26,6 +26,7 @@ Open `http://localhost:4008/$launchpad` in the Browser to get to the SAP Fiori l - [Invoking CAP actions out of a Custom Action](#invoking-cap-actions-out-of-a-custom-action) - [Header Area](#header-area-list-report) - [Enabling Variant Management](#enabling-variant-management) + - [Enabling Live Mode](#enabling-live-mode) - [Define Filters](#define-filters) - [Default Values](#default-values) - [Hide filters](#hide-filters) @@ -52,6 +53,7 @@ Open `http://localhost:4008/$launchpad` in the Browser to get to the SAP Fiori l - [Message Toasts](#message-toasts) - [Custom Actions](#custom-actions-table-list-report) - [Setting the Table Type](#setting-the-table-type) + - [Tree Table](#tree-table) - [Multiple Views](#multiple-views) - [Single table mode](#single-table-mode) - [Multiple table mode](#multiple-table-mode) @@ -72,6 +74,7 @@ Open `http://localhost:4008/$launchpad` in the Browser to get to the SAP Fiori l - [Adding Multiple Fields to one Column in Responsive Tables](#adding-multiple-fields-to-one-column-in-responsive-tables) - [Adding Images to a table](#adding-images-to-a-table) - [Adding Currency or UoM Fields to a table](#adding-currency-or-uom-fields-to-a-table) + - [Customize UoM or Currency scale](#customize-uom-or-currency-scale) - [Adding a link to a table](#adding-a-link-to-a-table) - [Add custom column (Extensibility)](#add-custom-column-extensibility) - [Object Page](#object-page) @@ -152,8 +155,8 @@ To enable the Flexible Column Layout please use the Application Modeler from the The annotation `@odata.draft.enabled` adds the draft mode to an entity. -``` -annotate service1.RootEntities with @odata.draft.enabled; +```cds +annotate srv.RootEntities with @odata.draft.enabled; ``` ### Replacing Standard UI Texts @@ -161,9 +164,9 @@ annotate service1.RootEntities with @odata.draft.enabled; Search term: [`"enhanceI18n"`](../../search?q=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](app/featureShowcase/webapp/manifest.json) file. +For this a new i18n file is needed, for example "customI18N.properties" which is then referenced in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file. -``` +```json "RootEntityListReport": { ... "options": { @@ -180,7 +183,7 @@ The replacement can be for all entities, for specific entities or for specific a - `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 -``` +```properties C_COMMON_ACTION_PARAMETER_DIALOG_CANCEL|RootEntities = Custom cancel text ``` @@ -190,41 +193,35 @@ More information about replacing standard UI texts and what can be overridden is Search term: [`CustomActions`](../../search?q=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](app/featureShowcase/webapp/manifest.json) file. The location depends on where the action shall be visible on the UI. +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](app/listreport-objectpage/webapp/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. -``` +```json "CustomActionSection" : { - "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox", + "press": "sap.fe.showcase.lrop.ext.CustomActions.messageBox", "enabled": "{= ${ui>/editMode} !== 'Editable'}", "visible" : true, "text": "{i18n>CustomActionSection}" } ``` -The following code snippet is the [CustomActions.js](app/featureShowcase/webapp/ext/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; - } - }; -}); +The following code snippet is the [Extension controller for the list report](app/listreport-objectpage/webapp/ext/controller/RootEntityLRExtension.controller.ts) file from the example. "enabled" and "enabledForSingleSelect" are possible functions for the "enabled" property. +```ts +... +export default class RootEntityLRExtension extends ControllerExtension { + messageBox() { + MessageBox.alert("Button pressed"); + } + enabled() { + return true; + } + enabledForSingleSelect(oBindingContext: ODataContextBinding, aSelectedContexts: [Context]) { + if (aSelectedContexts && aSelectedContexts.length === 1) { + return true; + } + return false; + } +} ``` #### Invoking CAP actions out of a Custom Action @@ -232,26 +229,24 @@ sap.ui.define([ Search term: [`#EditFlowAPI`](../../search?q=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 - }, - ... - }; -}); +```ts +... +export default class RootEntityOPExtension extends ControllerExtension { + ... + + //Search-Term: #EditFlowAPI + onChangeCriticality(oEvent: Button$PressEvent) { + let sActionName = "LROPODataService.changeCriticality"; + let mParameters = { + contexts: oEvent.getSource().getBindingContext(), + model: oEvent.getSource().getModel(), + label: 'Confirm', + invocationGrouping: true + }; + // @ts-expect-error + this.editFlow.invokeAction(sActionName, mParameters); //SAP Fiori elements EditFlow API + } +} ``` ## Header Area List Report @@ -260,8 +255,8 @@ sap.ui.define([ Search term: [`"variantManagement"`](../../search?q=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](app/featureShowcase/webapp/manifest.json). -``` +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](app/listreport-objectpage/webapp/manifest.json). +```json "RootEntityListReport": { ... "options": { @@ -273,8 +268,8 @@ Variant Management (saving the filter settings and the personalization of tables } } ``` -When the Variant Management is disabled, the App title will be shown instead at this place. With the `subTitle` annotation in the [manifest.json](app/featureShowcase/webapp/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](app/featureShowcase/webapp/i18n/i18n.properties) file within the webapp folder of the app. -``` +When the Variant Management is disabled, the App title will be shown instead at this place. With the `subTitle` annotation in the [manifest.json](app/listreport-objectpage/webapp/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](app/listreport-objectpage/webapp/i18n/i18n.properties) file within the webapp folder of the app. +```json "sap.app": { ... "subTitle": "{{appSubTitle}}", @@ -282,20 +277,41 @@ When the Variant Management is disabled, the App title will be shown instead at } ``` +### Enabling Live Mode + +Search term: [`"liveMode"`](../../search?q=liveMode) + +To simplify the user experience you can enable live mode in your apps, which removes the GO button from the filter bar and directly applies filters and search queries. + +It is enabled in the [manifest.json](app/listreport-objectpage/webapp/manifest.json): + +```json +"RootEntityListReport": { + ... + "options": { + "settings": { + "liveMode": true, + ... + } + } +} +``` + + ### Define Filters Search term: [`#FilterDefault`](../../search?q=FilterDefault), [`#HideFilter`](../../search?q=HideFilter),[`#FilterGrouping`](../../search?q=FilterGrouping), [`#VisibleFilters`](../../search?q=VisibleFilters), `#ValueHelps`, [`#DependentFilter`](../../search?q=DependentFilter) #### Default Values Search term: [`#FilterDefault`](../../search?q=FilterDefault) -With the annotation `@Common.FilterDefaultValue` default values can be defined, like in [field-control.cds](app/featureShowcase/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](#selection-variant) annotation is a better solution. +With the annotation `@Common.FilterDefaultValue` default values can be defined, like in [field-control.cds](app/listreport-objectpage/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](#selection-variant) annotation is a better solution. More information are available in the [SAP UI5 Dokumentation](https://sapui5.hana.ondemand.com/#/topic/f27ad7bc1f9c4b0d947b1fb18c37e94c) #### Hide filters Search term: [`#HideFilter`](../../search?q=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](app/featureShowcase/field-control.cds). -``` -annotate service1.RootEntities { +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](app/listreport-objectpage/field-control.cds). +```cds +annotate srv.RootEntities { ... fieldWithURLtext @UI.HiddenFilter; ... @@ -306,8 +322,8 @@ annotate service1.RootEntities { Search term: [`#FilterGrouping`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.FilterFacets : [ { Target : '@UI.FieldGroup#chartData', @@ -319,7 +335,7 @@ annotate service.RootEntities with @( }, ], ); -annotate service.RootEntities with @( +annotate srv.RootEntities with @( UI.FieldGroup #chartData : { Data : [ {Value : integerValue}, @@ -331,13 +347,13 @@ annotate service.RootEntities with @( }, ); ``` -The implementation is in the [layout.cds](app/featureShowcase/layout.cds) file. +The implementation is in the [layout.cds](app/listreport-objectpage/layout.cds) file. #### Selection Fields Search term: [`#VisibleFilters`](../../search?q=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](app/featureShowcase/layout.cds) file. -``` -annotate service.RootEntities with @( +`@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](app/listreport-objectpage/layout.cds) file. +```cds +annotate srv.RootEntities with @( UI.SelectionFields : [ field, fieldWithPrice, @@ -350,10 +366,10 @@ Further information are available in the [UI5 Dokumentation](https://sapui5.hana #### Mandatory filter fields Search term: [`#RequiredFilter`](../../search?q="#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](app/featureShowcase/capabilities.cds) file. +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](app/listreport-objectpage/capabilities.cds) file. -``` -annotate service1.RootEntities with @( +```cds +annotate srv.RootEntities with @( ... Capabilities.FilterRestrictions : { ... @@ -374,8 +390,8 @@ For filter fields of type Date, semantic dates can be activated with the annotat 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 @( +```cds +annotate srv.RootEntities with @( Capabilities.FilterRestrictions : { FilterExpressionRestrictions : [ { @@ -420,8 +436,8 @@ More information are available in the [SAP UI5 Documentation](https://sapui5.han 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 @( +```cds +annotate LROPODataService with @( Capabilities.FilterFunctions : [ 'tolower' ], @@ -429,7 +445,7 @@ annotate service1 with @( ``` 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](app/featureShowcase/capabilities.cds) file. +The example is in the [capabilities.cds](app/listreport-objectpage/capabilities.cds) file. More information are available in the [SAP UI5 Documentation](https://sapui5.hana.ondemand.com/sdk/#/topic/609c39a7498541559dbef503c1ffd194.html). @@ -481,7 +497,7 @@ annotate schema.RootEntities with{ }; ``` -By default the rendering is vertical and with a [manifest.json](app/featureShowcase/webapp/manifest.json) setting it can be adjusted to horizontal. +By default the rendering is vertical and with a [manifest.json](app/listreport-objectpage/webapp/manifest.json) setting it can be adjusted to horizontal. ```json "RootEntityListReport": { "options": { @@ -504,13 +520,13 @@ By default the rendering is vertical and with a [manifest.json](app/featureShowc Rendering as radio buttons is currently only supported for fields on pages and not for fields in action dialogs. -All value help annotations are in the [value-helps.cds](app/featureShowcase/value-helps.cds) file. +All value help annotations are in the [value-helps.cds](app/listreport-objectpage/value-helps.cds) file. #### Dependent Filtering (Value Help) Search term: [`#DependentFilter`](../../search?q=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. -``` +```cds annotate schema.RootEntities with{ ... region @(Common : { @@ -547,7 +563,7 @@ annotate schema.RootEntities with{ }); }; ``` -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](app/featureShowcase/value-helps.cds#L71). +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](app/listreport-objectpage/value-helps.cds#L71). #### Dependent filtering (Multi-Input Value Help) Search term: [`#MultiValueWithDependentFilter`](../../search?q=MultiValueWithDependentFilter) @@ -586,7 +602,7 @@ In the code snippet the 'LocalDataProperty' refers to the country reference and The value help itself is annotated on the property within the assignment entity. This is also the target property of the DataField value path. ```cds -annotate service.RootEntities with @( +annotate srv.RootEntities with @( ... UI.FieldGroup #location : { Data : [ @@ -606,16 +622,16 @@ annotate service.RootEntities with @( Search term: [`navigationProperties`](../../search?q=navigationProperties), [`#NavigationProperties`](../../search?q="#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 @( +```cds +annotate srv.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](app/featureShowcase/webapp/manifest.json) file. -``` +If you want to add navigation properties to the "Adapt Filters" dialog as filter facets, they have to be referenced in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file. +```json "RootEntityListReport": { ... "options": { @@ -642,12 +658,12 @@ More information regarding navigation properties as filter fields are in the [SA Search term: [`customFilter`](../../search?q=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](app/featureShowcase/webapp/manifest.json) is extended with the following lines. +First List Report in the [manifest.json](app/listreport-objectpage/webapp/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. -``` +```json "RootEntityListReport": { ... "options": { @@ -660,7 +676,7 @@ The name of the custom filter has to be the property name, else it would cause e "starsValue": { "label": "{i18n>customFilter}", "property": "starsValue", - "template": "sap.fe.featureShowcase.mainApp.ext.CustomFilter-Rating" + "template": "sap.fe.showcase.lrop.ext.CustomFilter-Rating" } } } @@ -673,10 +689,10 @@ The name of the custom filter has to be the property name, else it would cause e 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'. -``` +```xml - + { + ... + + onResetRating(oEvent: Button$PressEvent) { + // @ts-expect-error + this.setFilterValues("starsValue"); + } +} ``` More information regarding custom filter are in the [SAP Fiori elements Documentation](https://sapui5.hana.ondemand.com/#/topic/5fb9f57fcf12401bbe39a635e9a32a4e). @@ -706,7 +723,7 @@ More information regarding custom filter are in the [SAP Fiori elements Document With extension points custom actions can be added in the header area of the List Report. -``` +```json "RootEntityListReport": { ... "options": { @@ -716,8 +733,8 @@ With extension points custom actions can be added in the header area of the List "header" : { "actions" : { "CustomActionLRGlobal" : { - "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox", - "enabled": "sap.fe.featureShowcase.mainApp.ext.CustomActions.enabled", + "press": "sap.fe.showcase.lrop.ext.CustomActions.messageBox", + "enabled": "sap.fe.showcase.lrop.ext.CustomActions.enabled", "visible" : true, "text": "{i18n>CustomActionLRGlobal}" } @@ -738,28 +755,28 @@ The custom action itself is described here: [Custom Actions](#custom-actions) 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 @( +```cds +annotate srv.RootEntities with @( UI.LineItem : [ ... { $Type : 'UI.DataFieldForAction', - Action : 'service1.changeCriticality', + Action : 'LROPODataService.changeCriticality', Label : '{i18n>changeCriticality}', }, ... ], ); ``` -[layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds) +[layouts_RootEntities.cds](app/listreport-objectpage/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 @( +```cds +annotate srv.RootEntities with @( UI.LineItem : [ ... { $Type : 'UI.DataFieldForAction', - Action : 'service1.changeProgress', + Action : 'LROPODataService.changeProgress', Label : '{i18n>changeProgess}', IconUrl : 'sap-icon://status-critical', Inline : true, @@ -768,14 +785,14 @@ annotate service.RootEntities with @( ], ); ``` -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 @( +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 `srv.unboundAction` you have to refer to `LROPODataService.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. +```cds +annotate srv.RootEntities with @( UI.LineItem : [ ... { $Type : 'UI.DataFieldForAction', - Action : 'service1.EntityContainer/unboundAction', + Action : 'LROPODataService.EntityContainer/unboundAction', Label : '{i18n>unboundAction}', }, ... @@ -784,17 +801,17 @@ annotate service.RootEntities with @( ``` With `@Core.OperationAvailable` actions can by enabled or disabled. This can be done dynamically by using $edmJson for its value, like: -``` +```cds @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: -``` +```cds @( ... - Core.OperationAvailable: {$edmJson: {$If: [{$Ge: [{$Path: 'in/integerValue'}, 0]}, true, false]}} + Core.OperationAvailable: ($self.integerValue > 0) ) action changeProgress ( ... @@ -806,11 +823,10 @@ action changeProgress ( Search term: [`#SideEffect`](../../search?q=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. -``` +```cds entity RootEntities as select from persistence.RootEntities actions { ... @( - cds.odata.bindingparameter.name : 'in', Common.SideEffects : { TargetProperties : ['in/integerValue'] } @@ -823,7 +839,7 @@ The OData binding parameter is needed, in order to refer to the fields of the en Search term: [`#ValueHelpParameter`](../../search?q=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. -``` +```cds entity RootEntities as select from persistence.RootEntities actions { ... action changeCriticality ( @@ -859,7 +875,7 @@ This can be achieved, by just annotating the parameter with a common valueList. Search term: [`#ParameterDefaultValue`](../../search?q=ParameterDefaultValue) With the annotation `@UI.ParameterDefaultValue` a default value for the parameter is set. -``` +```cds entity RootEntities as select from persistence.RootEntities actions { ... action changeProgress (@(title : '{i18n>newProgress}', UI.ParameterDefaultValue : 50)newProgress : Integer); @@ -869,8 +885,8 @@ entity RootEntities as select from persistence.RootEntities actions { ##### Action Drop down menu Search term: [`"MenuActions"`](../../search?q=MenuActions) -A dropdown menu to group actions is possible with an annotation in the [manifest.json](app/featureShowcase/webapp/manifest.json) file. -``` +A dropdown menu to group actions is possible with an annotation in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file. +```json "RootEntityListReport": { ... "options": { @@ -882,8 +898,8 @@ A dropdown menu to group actions is possible with an annotation in the [manifest "MenuActions": { "text": "{i18n>MenuButton}", "menu": [ - "DataFieldForAction::service1.changeCriticality", - "DataFieldForAction::service1.EntityContainer::unboundAction" + "DataFieldForAction::LROPODataService.changeCriticality", + "DataFieldForAction::LROPODataService.EntityContainer::unboundAction" ] } }, @@ -902,18 +918,18 @@ In the control configuration of the List Report, the line item annotation of the 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. +The Syntax for Singletons is special, as it can be seen in the code snippet. The path value starts with a '/' followed by the name of the singleton, in the Feature Showcase it is 'Singleton', and the last part is the property path. -``` -annotate service1.RootEntityVariants with @( +```cds +annotate srv.RootEntityVariants with @( Capabilities.DeleteRestrictions : { Deletable : deletePossible, }, UI.UpdateHidden : updateHidden, - UI.CreateHidden: { $edmJson: { $Path: '/service1.EntityContainer/Singleton/createHidden' } }, + UI.CreateHidden: { $edmJson: { $Path: '/Singleton/createHidden' } }, ); ``` -[capabilities.cds](app/featureShowcase/capabilities.cds) +[capabilities.cds](app/listreport-objectpage/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. @@ -921,8 +937,8 @@ While `@Capabilities.UpdateRestrictions` would restrict the update possibilities Search term: [`#NavAction`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.LineItem : [ ... { @@ -940,24 +956,33 @@ annotate service.RootEntities with @( SemanticObjectProperty : 'integerProperty', }, ], - ![@UI.Importance] : #High, + @UI.Importance : #High, }, ... ], ); ``` -[layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds)
+[layouts_RootEntities.cds](app/listreport-objectpage/layouts_RootEntities.cds)
-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", -}, +The semantic object and the action are in the [manifest.json](app/worklist/webapp/manifest.json) file. The application property in this contains the following code snippet: +```json +"sap.app" : { + ..., + "crossNavigation": { + "inbounds": { + "feature-showcase-worklist": { + "signature": { + "parameters": {}, + "additionalParameters": "allowed" + }, + "semanticObject": "FeatureShowcaseChildEntity2", + "action": "manage", + "title": "Work List", + "subTitle": "Manage" + } + } + } +} ``` 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. @@ -968,8 +993,8 @@ Icons can be displayed as the label of the button instead of text, but only if t 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 @( +```cds +annotate srv.criticalAction with @( Common.IsActionCritical : true ); ``` @@ -980,7 +1005,7 @@ annotate service1.criticalAction with @( 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). -``` +```ts 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. @@ -990,7 +1015,7 @@ req.notify(`Critical action pressed`); With extension points custom actions can be added in the table toolbar of the List Report. -``` +```json "RootEntityListReport": { ... "options": { @@ -1001,8 +1026,8 @@ With extension points custom actions can be added in the table toolbar of the Li "actions": { ... "CustomActionLR" : { - "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox", - "enabled": "sap.fe.featureShowcase.mainApp.ext.CustomActions.enabledForSingleSelect", + "press": "sap.fe.showcase.lrop.ext.CustomActions.messageBox", + "enabled": "sap.fe.showcase.lrop.ext.CustomActions.enabledForSingleSelect", "visible" : true, "text": "{i18n>CustomActionLR}" } @@ -1023,8 +1048,8 @@ The custom action itself is described here: [Custom Actions](#custom-actions-lis INFO: 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.
Search term: [`"tableSettings"`](../../search?q=tableSettings), [`"ResponsiveTable"`](../../search?q=ResponsiveTable), [`"GridTable"`](../../search?q=GridTable) -Supported table types are the ResponsiveTable and the GridTable. The table type of the List Report can be adjusted in the [manifest.json](app/featureShowcase/webapp/manifest.json) file (Line 146). -``` +Supported table types are the ResponsiveTable and the GridTable. The table type of the List Report can be adjusted in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file. +```json "RootEntityListReport": { ... "options": { @@ -1047,8 +1072,216 @@ Supported table types are the ResponsiveTable and the GridTable. T }, ``` +##### Tree Table + +Search term: [`#TreeTable`](../../search?q=`#TreeTable`), [`"TreeTable"`](../../search?q=TreeTable) + +Tree tables allow to display hierarchical data, namely parent-chield hierarchies. To enable those in the the table type has to be set in the [manifest.json](app/listreport-objectpage/webapp/manifest.json): + +```json +"RootEntityListReport": { + ... + "options": { + "settings": { + ... + "controlConfiguration": { + "/OrganizationalUnits/@com.sap.vocabularies.UI.v1.LineItem": { + "tableSettings": { + "type": "TreeTable", + "hierarchyQualifier": "OrgUnitsHierarchy" + } + } + }, + ... + } + } +} +``` + +Importantly the 'hierarchyQualifier' in the manifest needs to match the qualifier of the `@Aggregation.RecursiveHierarchy` annotation, which specifies the parent-child hierarchy. + +```cds +annotate srv.OrganizationalUnits @Aggregation.RecursiveHierarchy #OrgUnitsHierarchy : { + ParentNavigationProperty : superOrdinateOrgUnit, + NodeProperty : ID, +}; +``` + +`ParentNavigationProperty` must have the association as its value, which points back to the same entity, e.g. `OrganizationalUnits` and determines the parent of a node, which the `NodeProperty` uniquely identifying a node in the hierarchy, usually being the UUID property of said entity. + +For CAP currently it is also required to add the following annotations and properties, as Fiori elements requires those for the Tree Table to work. + +> [!NOTE] +> It is planned that this is automatically added in the future by CAP to reduce setup overhead. + +```cds +extend srv.OrganizationalUnits with @( + // The columns expected by Fiori to be present in hierarchy entities + Hierarchy.RecursiveHierarchy #OrgUnitsHierarchy : { + LimitedDescendantCount : LimitedDescendantCount, + DistanceFromRoot : DistanceFromRoot, + DrillState : DrillState, + LimitedRank : LimitedRank + }, + // Disallow filtering on these properties from Fiori UIs + Capabilities.FilterRestrictions.NonFilterableProperties: [ + 'LimitedDescendantCount', + 'DistanceFromRoot', + 'DrillState', + 'LimitedRank' + ], + // Disallow sorting on these properties from Fiori UIs + Capabilities.SortRestrictions.NonSortableProperties : [ + 'LimitedDescendantCount', + 'DistanceFromRoot', + 'DrillState', + 'LimitedRank' + ], +) columns { // Ensure we can query these fields from database + null as LimitedDescendantCount : Int16, + null as DistanceFromRoot : Int16, + null as DrillState : String, + null as LimitedRank : Int16, +}; +``` + +The tree table works with draft-enabled entities, however some restrictions apply, like only active entities being shown, having a draft indicator if a draft exists, instead of showing the draft. + +For all limitations checkout the [documentation](https://ui5.sap.com/#/topic/7cf7a31fd1ee490ab816ecd941bd2f1f). + +With `@Hierarchy.RecursiveHierarchyActions` some additional actions can be specified: +- `ChangeSiblingForRootsSupported` is a boolean tag, which controls, whether root nodes can be moved up or down and whether nodes can be promoted to root nodes. If it is not defined, it is considered to be true. +- `ChangeNextSiblingAction` specifies a bound action which can be used to move a node up or down in the hierarchy. The bound action is called by the UI, passing a NextSibiling parameter, when a node is dropped onto another node for switching positions or when the Move Up/Down buttons are pressed to change the order of nodes, which are on the same level. +- `CopyAction` specifies the bound action which is called to copy the bound entity to later paste it in the hierarchy. + +```cds +annotate srv.OrganizationalUnits @( + ... + Hierarchy.RecursiveHierarchyActions #OrgUnitsHierarchy : { + ChangeSiblingForRootsSupported, + ChangeNextSiblingAction : 'LROPODataService.moveOrgUnit', + CopyAction : 'copyOrgUnit', + }, +); +``` + +Using `Capabilities.UpdateRestrictions.NonUpdatableNavigationProperties` and providing the association of the parent disables all change actions on the hierarchy. + +```cds +annotate srv.OrganizationalUnits @( + ... + Capabilities.UpdateRestrictions.NonUpdatableNavigationProperties: [superOrdinateOrgUnit] +); +``` + +The create button can also be customized to show special options for different entities in the hierarchy via the [manifest.json](app/listreport-objectpage/webapp/manifest.json). + +```json +"RootEntityListReport": { + ... + "options": { + "settings": { + ... + "controlConfiguration": { + "/OrganizationalUnits/@com.sap.vocabularies.UI.v1.LineItem": { + "tableSettings": { + "type": "TreeTable", + "hierarchyQualifier": "OrgUnitsHierarchy", + "creationMode": { + "name": "CreationDialog", + "createInPlace": true, + "creationFields": "@com.sap.vocabularies.UI.v1.FieldGroup#creationDialog", + "nodeType": { + "propertyName": "category_code", + "values": { + "01": "Create a new department", + "02": { + "label": "Create a new division", + "creationFields": "name,description,isActive" + }, + "03": "Create a new business unit" + } + }, + "isCreateEnabled": ".extension.sap.fe.showcase.lrop.ext.controller.RootEntityLRExtension.isCreateEnabled" + }, + ... + } + } + }, + ... + } + } +} +``` + +The sample uses the CreationDialog creation mode, but "NewPage" and "Inline" also work ("Inline" only on the Object Page). + +The special part for the tree table is the "nodeType" property, via which a creation menu can be achived, in which for each key in the "values" object, an option is shown. + +The value of the keys in the "values" object can either be a string, which is then the label, or in case of CreationDialog an object, to provide a label as well as an alternative creation dialog, which overrides the original creation dialog, specified via "creationFields" in "creationMode". + +To control in which context the create button can be pressed the extension hook `isCreateEnabled` can be used, to provide a callback function. It must return a boolean value determining whether for a given value from the "values" object and a selected node in the tree table, the given value is allowed for creation. + +In the showcase, this allows to specify, that only business units can be created at root level, only divisions under business units and only departments under divisions. + +> [!CAUTION] +> This only enables/disables the create buttons, backend restrictions are still necessary for enforcing this at an API level! + +```ts +export default class RootEntityLRExtension extends ControllerExtension { + ... + isCreateEnabled(value: String, parentContext?: Context) { + switch (parentContext?.getProperty("category_code")) { + case "03": + return value === "02"; // Only Divisions under Business Units + case "02": + return value === "01"; // Only Departments under Divisions + case "01": + return false; // Nothing under Departments + default: + return value === "03"; // Only Business Units at root level + } + } + ... +} +``` + +Four further extension hooks can be used to customize the Tree Table behaviour. + +```json +"RootEntityListReport": { + ... + "options": { + "settings": { + ... + "controlConfiguration": { + "/OrganizationalUnits/@com.sap.vocabularies.UI.v1.LineItem": { + "tableSettings": { + "type": "TreeTable", + "hierarchyQualifier": "OrgUnitsHierarchy", + ... + "isMoveToPositionAllowed": ".extension.sap.fe.showcase.lrop.ext.controller.RootEntityLRExtension.isMoveToPositionAllowed", + "isNodeMovable": ".extension.sap.fe.showcase.lrop.ext.controller.RootEntityLRExtension.isNodeMovable", + "isCopyToPositionAllowed": ".extension.sap.fe.showcase.lrop.ext.controller.RootEntityLRExtension.isCopyToPositionAllowed", + "isNodeCopyable": ".extension.sap.fe.showcase.lrop.ext.controller.RootEntityLRExtension.isNodeCopyable" + } + } + }, + ... + } + } +} +``` + +`isNodeMovable` needs a callback function, providing the OData context and returning a boolean value, whether a node can be moved around the hierarchy via drag & drop or the move up and down buttons. Furthermore it determines if a Node can be cut. + +`isMoveToPositionAllowed` needs again a callback function and is the counterpart to `isNodeMovable`, returning a boolean value, which determines if a node can be moved to a given position. To determine this, Fiori elements passes the OData context of the node to be moved and the OData context of the node under which the node should be moved or dropped. + +`isNodeCopyable` and `isCopyToPositionAllowed` have the same signatures but `isNodeCopyable` specifies whether a node can be copied and `isCopyToPositionAllowed` whether the copied node can be pasted at a given position. + + #### Multiple Views -Search term: [`#multipleViews`](../../search?q=`#multipleViews`), [`"views"`](../../search?q=views), `[`#multipleViews`](../../search?q=`#multipleViews`), ["quickVariantSelection"`](../../search?q=quickVariantSelection) +Search terms: [`#multipleViews`](../../search?q=`#multipleViews`), [`"views"`](../../search?q=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 @@ -1056,7 +1289,7 @@ With multiple views, you can display different selections and/or presentations o 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). -``` +```json "RootEntityListReport": { ... "options": { @@ -1096,8 +1329,8 @@ Further you can define, if each view should show the amount of rows it displays 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. -``` +To implement the multiple table mode, you need to refer to the Selection- or SelectionPresentationVariants via the qualifier in the [manifest.json](app/listreport-objectpage/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. +```json "RootEntityListReport": { ... "options": { @@ -1130,15 +1363,15 @@ To implement the multiple table mode, you need to refer to the Selection- or Sel } } ``` -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. +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/listreport-objectpage/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 Search term: [`#SVariant`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.SelectionVariant #variant1 : { Text : '{i18n>SVariant1}', SelectOptions : [ @@ -1159,14 +1392,14 @@ annotate service.RootEntities with @( ); ``` 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. +The annotations are in the [layouts_RootEntities.cds](app/listreport-objectpage/layouts_RootEntities.cds) file. ##### Selection Presentation Variant Search term: [`#SPVariant`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.SelectionPresentationVariant #SelectionPresentationVariant : { Text : '{i18n>SelectionPresentationVariant}', SelectionVariant : { @@ -1206,8 +1439,8 @@ More information are available in the [SAP UI5 Documentation](https://sapui5.han 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 { +```cds +annotate srv.RootEntities { ... stringProperty @Core.Immutable; ... @@ -1218,8 +1451,8 @@ annotate service1.RootEntities { Search term: [`#DefaultSort`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.PresentationVariant :{ SortOrder : [ { @@ -1233,7 +1466,7 @@ annotate service.RootEntities with @( }, ); ``` -Without a sort order defined, the values are ascending. The implementation is in the File: [layout.cds](app/featureShowcase/layout.cds) +Without a sort order defined, the values are ascending. The implementation is in the File: [layout.cds](app/listreport-objectpage/layout.cds) #### Enabling Multiple Selection in Tables @@ -1241,7 +1474,7 @@ Without a sort order defined, the values are ascending. The implementation is in Search term: [`"selectionMode"`](../../search?q=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). -``` +```json "RootEntityListReport": { ... "options": { @@ -1268,19 +1501,19 @@ Multiple Selection can be enabled in the List Report with the property `"selecti Search term: [`#SemanticKey`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( Common.SemanticKey : [ field ], ); ``` -[layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds) +[layouts_RootEntities.cds](app/listreport-objectpage/layouts_RootEntities.cds) #### Highlighting Line Items Based on Criticality Search term: [`#LineItemHighlight`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.LineItem.@UI.Criticality : criticality_code, ); ``` @@ -1288,41 +1521,41 @@ annotate service.RootEntities with @( Search term: [`#RatingIndicator`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( ... UI.DataPoint #ratingIndicator : { Value : starsValue, TargetValue : 4, Visualization : #Rating, Title : '{i18n>ratingIndicator}', - ![@Common.QuickInfo] : 'Tooltip via Common.QuickInfo', + @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 @( +```cds +annotate srv.RootEntities with @( UI.LineItem : [ ... { $Type : 'UI.DataFieldForAnnotation', Label : '{i18n>ratingIndicator}', Target : '@UI.DataPoint#ratingIndicator', - ![@UI.Importance] : #Low, + @UI.Importance : #Low, }, ... ], ); ``` -The annotations are in the [layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds) file. +The annotations are in the [layouts_RootEntities.cds](app/listreport-objectpage/layouts_RootEntities.cds) file. #### Adding a Progress Indicator to a Table Search term: [`#ProgressIndicator`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.DataPoint #progressIndicator : { Value : integerValue, TargetValue : 100, @@ -1334,39 +1567,39 @@ annotate service.RootEntities with @( ); ``` 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 @( +```cds +annotate srv.RootEntities with @( UI.LineItem : [ ... { $Type : 'UI.DataFieldForAnnotation', Label : '{i18n>progressIndicator}', Target : '@UI.DataPoint#progressIndicator', - ![@UI.Importance] : #Low, + @UI.Importance : #Low, }, ... ], ); ``` -The annotations are in the [layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds) file. +The annotations are in the [layouts_RootEntities.cds](app/listreport-objectpage/layouts_RootEntities.cds) file. #### Adding a field with a tooltip to a Table Search term: [`#ToolTip`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( ... UI.DataPoint #fieldWithTooltip : { Value : dimensions, - ![@Common.QuickInfo] : '{i18n>Tooltip}', + @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 @( +```cds +annotate srv.RootEntities with @( UI.LineItem : [ ... { @@ -1383,8 +1616,8 @@ annotate service.RootEntities with @( Search term: [`#MicroChart`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( ... UI.DataPoint #radialChart : { Value : integerValue, @@ -1395,23 +1628,27 @@ annotate service.RootEntities with @( ); ``` 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', - }] -}, +```cds +annotate srv.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 chart is then the target of a `DataFieldForAnnotation` in the `@UI.LineItem` annotation, to be shown in the table. -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( UI.LineItem : [ ... { @@ -1423,13 +1660,13 @@ annotate service.RootEntities with @( ], ); ``` -The annotations of the example are in the [layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds) file. +The annotations of the example are in the [layouts_RootEntities.cds](app/listreport-objectpage/layouts_RootEntities.cds) file. #### Adding a Contact Quick View to a Table Search term: [`#Contact`](../../search?q=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 @( +```cds +annotate srv.Contacts with @( Communication.Contact : { fn : name, //full name kind : #org, @@ -1450,8 +1687,8 @@ annotate service1.Contacts with @( ``` 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 @( +```cds +annotate srv.RootEntities with @( UI.LineItem : [ ... { @@ -1464,13 +1701,14 @@ annotate service.RootEntities with @( ); ``` 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. +The annotations of the example are in the [layouts_RootEntities.cds](app/listreport-objectpage/layouts_RootEntities.cds#L315) file. + #### Adding a Quick View Facet to a Table Search term: [`#QuickView`](../../search?q=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 @( +```cds +annotate srv.ChildEntities2 with @( UI.FieldGroup #data : { Label : '{i18n>ChildEntity2}', Data : [ @@ -1481,8 +1719,8 @@ annotate service1.ChildEntities2 with @( }, ); ``` -``` -annotate service1.ChildEntities2 with @( +```cds +annotate srv.ChildEntities2 with @( UI.HeaderInfo :{ TypeName : '{i18n>ChildEntity2}', TypeNamePlural : '{i18n>ChildEntity2.typeNamePlural}', @@ -1499,8 +1737,8 @@ annotate service1.ChildEntities2 with @( }, ); ``` -``` -annotate service1.ChildEntities2 with @( +```cds +annotate srv.ChildEntities2 with @( UI.QuickViewFacets : [ { $Type : 'UI.ReferenceFacet', @@ -1510,43 +1748,52 @@ annotate service1.ChildEntities2 with @( ); ``` 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 @( +```cds +annotate srv.RootEntities with @( UI.LineItem : [ ... { $Type : 'UI.DataField', Value : association2one_ID, Label : '{i18n>ChildEntity2}', - ![@UI.Importance] : #High, + @UI.Importance : #High, }, ... ], ); ``` -The annotations of the example are in the [layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds) file. +The annotations of the example are in the [layouts_RootEntities.cds](app/listreport-objectpage/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. -``` +```cds association2one @title : '{i18n>ChildEntity2}' @Common.Text : association2one.field @Common.TextArrangement : #TextOnly; ``` -The annotations are in the [labels.cds](app/featureShowcase/labels.cds) file. +The annotations are in the [labels.cds](app/listreport-objectpage/labels.cds) file. ##### Links to the apps of the entity Search term: [`FeatureShowcaseChildEntity2`](../../search?q=FeatureShowcaseChildEntity2), [`#Navigation`](../../search?q=Navigation) The quick view facet also shows links to the apps of the entity, when the entity is annotated with `@Common.SemanticObject`. -``` +```cds association2one @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: -``` -"FeatureShowcaseChildEntity2-manage": { - title: "ChildEntities2", - description:"Manage", - additionalInformation: "SAPUI5.Component=sap.fe.featureShowcase.childEntities2ui", - applicationType: "URL", - url: "/featureShowcaseNavigationTarget/webapp", - navigationMode: "embedded", -}, +The semantic object is the application name in the [manifest.json](app/worklist/webapp/manifest.json). The application property in this contains the following code snippet: +```json +"sap.app" : { + ..., + "crossNavigation": { + "inbounds": { + "feature-showcase-worklist": { + "signature": { + "parameters": {}, + "additionalParameters": "allowed" + }, + "semanticObject": "FeatureShowcaseChildEntity2", + "action": "manage", + "title": "Work List", + "subTitle": "Manage" + } + } + } +} ``` 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. @@ -1556,8 +1803,8 @@ The description of the app in the html file is the name of the app in the quick 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 @( +```cds +annotate srv.RootEntities with @( UI.FieldGroup #AdminData : { Data : [ {Value : createdAt}, @@ -1570,15 +1817,15 @@ annotate service.RootEntities with @( ); ``` Secondly you have to add a DataField For Annotation to the `@UI.LineItem` annotation. -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( UI.LineItem : [ ... { $Type : 'UI.DataFieldForAnnotation', Target : '@UI.FieldGroup#AdminData', Label : '{i18n>adminData}', - ![@UI.Importance] : #High, + @UI.Importance : #High, }, ... ], @@ -1588,8 +1835,8 @@ annotate service.RootEntities with @( Search term: [`#Image`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.LineItem : [ { $Type : 'UI.DataField', @@ -1600,13 +1847,46 @@ annotate service.RootEntities with @( ], ); ``` -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. +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/listreport-objectpage/labels.cds) file. #### Adding Currency or UoM Fields to a table Search term: [`#Units`](../../search?q=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. +The examples from the feature showcase are in the [labels.cds](app/listreport-objectpage/labels.cds) file. + +##### Customize UoM or Currency scale + +Search term: [`#CustomUnitScale`](../../search?q=CustomUnitScale) + +By default the scale of a field annotated with a unit or currency, is the scale contained in the datatype. E.g. `Decimal(4,2)` will have to fractional digits while `Decimal(4,3)` will have three. + +If the shown fractional digits on the UI shall differ from the backend, you can customize the behaviour by adjusting the Units or Currency value list entity. + +```cds +@CodeList.UnitsOfMeasure : { + Url : './$metadata', + CollectionPath : 'UnitOfMeasures', +} +service LROPODataService @(path : '/srv1') { + … + entity UnitOfMeasures as projection on persistence.UnitOfMeasures; +} +``` + +In the sample the units are customized, by specifying the `@CodeList.UnitsOfMeasure` annotation. The url points to the metadata of the same service, but you could also point to an URL of another service and the CollectionPath points to the entity of the targeted service. + +The key property of the entity which is targeted then needs to be annotated with `@Common.UnitSpecificScale`, pointing to the property storing how many fractional digits should be shown for the respective unit. The fields referred to by `@Common.Text` and `@CodeList.ExternalCode` are shown in the value help when selecting a unit. + +```cds +entity sap.common.UnitOfMeasures : CodeList { + // Search-Term: #CustomUnitScale + key code : String(30) @Common.Text : descr @Common.UnitSpecificScale : scale @CodeList.ExternalCode : name; + scale: Integer; +}; +``` + +For further information check out the [documentation](https://sapui5.hana.ondemand.com/#/topic/4d1b9d44941f483f9b7f579873d38685). #### Adding a link to a table @@ -1621,14 +1901,14 @@ With a `UI.DataFieldWithUrl` a link can be added to the table. The 'Value' prope Url : fieldWithURL, //Target, when pressing the text Value : fieldWithURLtext, //Visible text Label : '{i18n>dataFieldWithURL}', - ![@UI.Importance] : #Medium, + @UI.Importance : #Medium, }, ] ``` Since UI5 1.129.0 the 'Value' property can also be annotated to determine how the link opens. ```cds -annotate service.RootEntities with { +annotate srv.RootEntities with { fieldWithURLtext @HTML5.LinkTarget : '_blank'; } ``` @@ -1640,13 +1920,13 @@ The annotation is documented [here](https://sap.github.io/odata-vocabularies/voc 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. -``` +```xml ``` This label shall be visible as an additional column. For this the manifest.json file needs to be adjusted. -``` +```json "RootEntityListReport": { ... "options": { @@ -1659,7 +1939,7 @@ This label shall be visible as an additional column. For this the manifest.json "CustomColumn": { "key": "customColumnLR", "header": "{i18n>validityPeriodLR}", - "template": "sap.fe.featureShowcase.mainApp.ext.CustomColumn-DateRangeLR", + "template": "sap.fe.showcase.lrop.ext.CustomColumn-DateRangeLR", "availability": "Adaptation", "horizontalAlign": "Center", "width": "auto", @@ -1681,7 +1961,7 @@ This label shall be visible as an additional column. For this the manifest.json } } ``` -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. +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.showcase.lrop), 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). @@ -1697,7 +1977,7 @@ Additional information are available in the [SAP UI5 Documentation](https://sapu To display emails and phone numbers as a link, they are annotated with `@Communication.IsEmailAddress` or `@Communication.IsPhoneNumber` -``` +```cds annotate schema.RootEntities with{ ... email @title : '{i18n>email}' @Communication.IsEmailAddress; @@ -1709,7 +1989,7 @@ annotate schema.RootEntities with{ Search term: [`#TimeAndDate`](../../search?q=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. -``` +```cds aspect rootBasis : { ... validFrom : Date; @@ -1723,7 +2003,7 @@ aspect rootBasis : { Since UI5 1.129.0 you can use `@UI.DateTimeStyle` to modify how the date is displayed. ```cds -annotate service.RootEntities with { +annotate srv.RootEntities with { validTo @UI.DateTimeStyle : 'short' } ``` @@ -1734,7 +2014,7 @@ Allowed values are 'short', 'medium', 'long' and 'full'. Search terms: `#MultiLineText`, `"formatOptions"` With the annotation `@UI.MultiLineText` longer Strings are displayed in multiple lines. -``` +```cds annotate schema.RootEntities with{ ... description @title : '{i18n>description}' @UI.MultiLineText; @@ -1742,9 +2022,10 @@ annotate schema.RootEntities with{ }; ``` -Additionally the maximum number of lines can be defined in the [manifest.json](app/featureShowcase/webapp/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. +Additionally the maximum number of lines can be defined in the [manifest.json](app/listreport-objectpage/webapp/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. -``` + +```json "RootEntityObjectReport": { ... "options": { @@ -1784,7 +2065,7 @@ More information are available in the [SAP Fiori elements Documentation](https:/ Search term: [`#Placeholder`](../../search?q=Placeholder) With `@UI.Placeholder` a placeholder value can be defined, for when the field is in edit mode. -``` +```cds annotate schema.RootEntities with { ... region @title : '{i18n>region}' @UI.Placeholder : 'Select a region'; @@ -1799,7 +2080,7 @@ The value can also be a property path. Search term: [`"anchorBarVisible"`](../../search?q=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. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -1823,8 +2104,8 @@ By default, the header of an Object Page and the anchor bar are enabled. Both c Search term: [`#HeaderInfo`](../../search?q=HeaderInfo) The title and subtitle of an Object Page are defined with the annotation `@UI.HeaderInfo`. -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( UI.HeaderInfo :{ TypeName : '{i18n>RootEntities}', TypeNamePlural : '{i18n>RootEntities.typeNamePlural}', @@ -1841,7 +2122,7 @@ annotate service.RootEntities with @( }, ); ``` -[layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds). +[layouts_RootEntities.cds](app/listreport-objectpage/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. @@ -1852,20 +2133,14 @@ If the optional "ImageUrl" property is given, then the picture will be visible o Search term: [`#ODataConcat`](../../search?q=ODataConcat) -It is possible to use the edmJson function `odata.concat` in the `@UI.HeaderInfo` annotation for the "Title" and "Description" values to concat multiple references together. +It is possible to use an expression in the `@UI.HeaderInfo` annotation for the "Title" and "Description" values to concat multiple references together. ```cds annotate service.ChildEntities1 with @( UI.HeaderInfo : { ... Description : { - Value : {$edmJson: { - $Apply : [ - 'Using odata.concat - Field: ', - {$Path: 'field'} - ], - $Function : 'odata.concat' - }}, + Value : ('Using odata.concat - Field: ' || field), }, ... }, @@ -1879,17 +2154,7 @@ annotate service.ChildEntities1 with @( UI.HeaderInfo : { ... Description : { - Value : {$edmJson: { - $Apply : [ - 'Using odata.concat - Field: ', - {$If: [ - {$Eq: [{$Path: 'field'}, 'child entity 1']}, - {$Path: 'field'}, - 'Other child entities' - ]} - ], - $Function : 'odata.concat' - }}, + Value : ('Using odata.concat - Field: ' || (field = 'child entity 1' ? field : 'Other child entities')), }, ... }, @@ -1901,8 +2166,8 @@ annotate service.ChildEntities1 with @( Search term: [`#HeaderFacets`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.HeaderFacets : [ { $Type : 'UI.ReferenceFacet', @@ -1916,15 +2181,15 @@ annotate service.RootEntities with @( }, ... ], - +) ``` #### Plain Text Search term: [`#PlainText`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.HeaderFacets : [ ... { @@ -1935,8 +2200,8 @@ annotate service.RootEntities with @( ], ); ``` -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( UI.FieldGroup #plainText : { Data : [ {Value : description} @@ -1944,20 +2209,20 @@ annotate service.RootEntities with @( }, ); ``` -[layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds) +[layouts_RootEntities.cds](app/listreport-objectpage/layouts_RootEntities.cds) Additionally the used property of the entity in the field group has to be annotated with `@UI.MultiLineText`. -``` +```cds description @UI.MultiLineText; ``` -[labels.cds](app/featureShowcase/labels.cds) +[labels.cds](app/listreport-objectpage/labels.cds) #### Header Field Group Facet Search term: [`#HeaderFieldGroup`](../../search?q=HeaderFieldGroup) Field groups can be part of a header. -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( UI.HeaderFacets : [ ... { @@ -1970,8 +2235,8 @@ annotate service.RootEntities with @( ); ``` 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 @( +```cds +annotate srv.RootEntities with @( ... UI.FieldGroup #HeaderData : { Data : [ @@ -1996,7 +2261,7 @@ annotate service.RootEntities with @( Search term: [`"CustomFieldHeaderOP"`](../../search?q=CustomFieldHeaderOP) With extension points, it is possible to add custom fields to existing field groups. Therefore the manifest.json file needs to be adapted. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -2008,7 +2273,7 @@ With extension points, it is possible to add custom fields to existing field gro "fields": { "CustomFieldHeaderOP": { "label": "{i18n>validityPeriodOP}", - "template": "sap.fe.featureShowcase.mainApp.ext.CustomField-DateRange", + "template": "sap.fe.showcase.lrop.ext.CustomField-DateRange", "position": { "placement": "After", "anchor": "DataField::field" @@ -2029,8 +2294,8 @@ Under control configuration an existing field group is extended through adding a Search term: [`#AddressFacet`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.HeaderFacets : [ ... { @@ -2042,8 +2307,8 @@ annotate service.RootEntities with @( ], ); ``` -``` -annotate service1.Contacts with @( +```cds +annotate srv.Contacts with @( ... Communication.Address : { ... @@ -2052,15 +2317,15 @@ annotate service1.Contacts with @( } ); ``` -In this example the label is generated through a CAP function in the [service.js](srv/service.js) file. +In this example the label is generated through a CAP function in the [service.js](srv/list-report-srv.js) file. #### Data Points Search term: [`#DataPoint`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.HeaderFacets : [ ... { @@ -2079,8 +2344,8 @@ The following types of data points are supported: Rating, Progress and Key value 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 @( +```cds +annotate srv.RootEntities with @( UI.DataPoint #ratingIndicator : { Value : starsValue, TargetValue : 4, @@ -2096,8 +2361,8 @@ annotate service.RootEntities with @( 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 @( +```cds +annotate srv.RootEntities with @( UI.DataPoint #progressIndicator : { Value : integerValue, TargetValue : 100, @@ -2113,8 +2378,8 @@ annotate service.RootEntities with @( Search term: [`#KeyValue`](../../search?q=KeyValue) A key value data point is the default data point, when the "Visualization" property is not specified. -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( ... UI.DataPoint #fieldWithPrice : { Value : fieldWithPrice, @@ -2128,8 +2393,8 @@ annotate service.RootEntities with @( Search term: [`#OPMicroChart`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.HeaderFacets : [ ... { @@ -2144,18 +2409,20 @@ The title of the facet is the "Title" property of the `@UI.Chart` annotation and 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 { +```cds +annotate srv.ChartDataEntities { integerValueWithUoM @Measures.Unit : uom_code; } ``` -``` -UI.DataPoint #lineChartWidth : { - Value : integerValueWithUoM, - MinimumValue : 0, - MaximumValue : 100, - Criticality : criticality_code, -}, +```cds +annotate srv.ChartDataEntities @( + UI.DataPoint #lineChartWidth : { + Value : integerValueWithUoM, + MinimumValue : 0, + MaximumValue : 100, + Criticality : criticality_code, + }, +); ``` In the following examples, all used properties are mandatory. @@ -2165,7 +2432,7 @@ In the following examples, all used properties are mandatory. 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. -``` +```cds annotate service.ChartDataEntities with @( UI.Chart #areaChart : { Title : '{i18n>areaChart}', @@ -2190,7 +2457,7 @@ annotate service.ChartDataEntities with @( ); ``` The criticality calculation of the data point is mandatory, as each value is shown with its threshold (error, warning, acceptance and good) ranges. -``` +```cds annotate service.ChartDataEntities with @( UI.DataPoint #areaChart : { Value : integerValue, @@ -2211,8 +2478,8 @@ annotate service.ChartDataEntities with @( 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 @( +```cds +annotate srv.RootEntities with @( UI.Chart #bulletChart : { Title : '{i18n>bulletChart}', Description : '{i18n>ThisIsAMicroChart}', @@ -2236,8 +2503,8 @@ annotate service.RootEntities with @( ); ``` 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 @( +```cds +annotate srv.RootEntities with @( ... UI.DataPoint #bulletChart : { Value : integerValue, @@ -2256,8 +2523,8 @@ annotate service.RootEntities with @( 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 @( +```cds +annotate srv.RootEntities with @( ... UI.Chart #radialChart : { Title : '{i18n>radialChart}', @@ -2279,8 +2546,8 @@ annotate service.RootEntities with @( ); ``` The percentage value is the fraction of the value and the target value. -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( ... UI.DataPoint #radialChart : { Value : integerValue, @@ -2297,7 +2564,7 @@ The unit of measure label will not be rendered, as the chart displays percentage Search term: [`#microChartLine`](../../search?q=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. -``` +```cds annotate service.ChartDataEntities with @( ... UI.Chart #lineChart : { @@ -2332,7 +2599,7 @@ annotate service.ChartDataEntities with @( ``` 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. -``` +```cds annotate service.ChartDataEntities with @( ... UI.DataPoint #lineChartWidth : { @@ -2353,7 +2620,7 @@ annotate service.ChartDataEntities with @( 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. -``` +```cds annotate service.ChartDataEntities with @( ... UI.Chart #columnChart : { @@ -2379,7 +2646,7 @@ annotate service.ChartDataEntities with @( ); ``` Both "Criticality" and "CriticalityCalculation" are supported, but if both are given "Criticality" overrides "CriticalityCalculation". -``` +```cds annotate service.ChartDataEntities with @( ... UI.DataPoint #dataPointForChart : { @@ -2394,8 +2661,8 @@ annotate service.ChartDataEntities with @( Search term: [`#microChartHarvey`](../../search?q=microChartHarvey) A harvey chart plots a single measure value against a maximum value. -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( ... UI.Chart #harveyChart : { Title : '{i18n>harveyChart}', @@ -2416,8 +2683,8 @@ annotate service.RootEntities with @( ); ``` For the semantic coloring, only the "Criticality" property is supported. -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( ... UI.DataPoint #harveyChart : { Value : fieldWithPrice, @@ -2434,7 +2701,7 @@ annotate service.RootEntities with @( 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. -``` +```cds annotate service.ChartDataEntities with @( ... UI.Chart #stackedBarChart : { @@ -2460,7 +2727,7 @@ annotate service.ChartDataEntities with @( ); ``` Both "Criticality" and "CriticalityCalculation" are supported, but if both are given "Criticality" overrides "CriticalityCalculation". -``` +```cds annotate service.ChartDataEntities with @( ... UI.DataPoint #dataPointForChart : { @@ -2476,7 +2743,7 @@ annotate service.ChartDataEntities with @( 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. -``` +```cds annotate service.ChartDataEntities with @( ... UI.Chart #comparisonChart : { @@ -2501,7 +2768,7 @@ annotate service.ChartDataEntities with @( ); ``` For semantic coloring, only the "Criticality" property is supported. -``` +```cds annotate service.ChartDataEntities with @( ... UI.DataPoint #dataPointForChart : { @@ -2516,8 +2783,8 @@ annotate service.ChartDataEntities with @( INFO: 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.
Search term: [`"CustomHeaderFacet"`](../../search?q=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](app/featureShowcase/webapp/manifest.json) file. -``` +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](app/listreport-objectpage/webapp/manifest.json) file. +```json "childEntities1ObjectPage": { ... "options": { @@ -2527,8 +2794,8 @@ Through extension points custom facets can be added to the header. In the Featur "header": { "facets": { "CustomHeaderFacet": { - "template": "sap.fe.featureShowcase.mainApp.ext.CustomHeaderFacet-ProcessFlow", - "templateEdit" : "sap.fe.featureShowcase.mainApp.ext.CustomHeaderFacet-Edit", + "template": "sap.fe.showcase.lrop.ext.CustomHeaderFacet-ProcessFlow", + "templateEdit" : "sap.fe.showcase.lrop.ext.CustomHeaderFacet-Edit", "stashed": false, "title": "{i18n>customHeaderFacet}", "position": { @@ -2555,13 +2822,13 @@ More information are available in the [SAP Fiori elements Documentation](https:/ Search term: [`#OPHeaderAction`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( ... UI.Identification : [ { $Type : 'UI.DataFieldForAction', - Action : 'service1.changeCriticality', + Action : 'LROPODataService.changeCriticality', Label : '{i18n>changeCriticality}', Criticality : criticality_code, }, @@ -2569,14 +2836,14 @@ annotate service.RootEntities with @( ], ); ``` -The example is in the [layouts_RootEntities.cds](app/featureShowcase/layouts_RootEntities.cds) file. +The example is in the [layouts_RootEntities.cds](app/listreport-objectpage/layouts_RootEntities.cds) file. #### Custom Actions (Object Page Header) Search term: [`"CustomActionOPHeader"`](../../search?q=CustomActionOPHeader) -Custom actions on the Object Page are added in the [manifest.json](app/featureShowcase/webapp/manifest.json) file under "options"->"settings"->"content"->"header"->"actions". +Custom actions on the Object Page are added in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file under "options"->"settings"->"content"->"header"->"actions". -``` +```json "RootEntityObjectReport": { ... "options": { @@ -2587,7 +2854,7 @@ Custom actions on the Object Page are added in the [manifest.json](app/featureSh ... "actions" : { "CustomActionOPHeader" : { - "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox", + "press": "sap.fe.showcase.lrop.ext.CustomActions.messageBox", "enabled": "{= ${ui>/editMode} === 'Editable'}", "visible" : true, "text": "{i18n>CustomActionOPHeader}" @@ -2615,7 +2882,7 @@ It is possible to define in-page navigation or external navigation for data poin 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. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -2626,8 +2893,8 @@ The section ID is composed of the application ID + "--fe::FacetSection::" and th "@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" + "sectionId": "sap.fe.showcase.lrop::RootEntityObjectReport--fe::FacetSection::chartData", + "subSectionId": "sap.fe.showcase.lrop::RootEntityObjectReport--fe::FacetSubSection::advancedChartData" } } }, @@ -2638,8 +2905,8 @@ The section ID is composed of the application ID + "--fe::FacetSection::" and th } }, ``` -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( UI.Facets : [ ... { @@ -2665,10 +2932,10 @@ annotate service.RootEntities with @( Search term: [`"ExternalNavigation"`](../../search?q=ExternalNavigation) -The external navigation is implemented at two positions in the [manifest.json](app/featureShowcase/webapp/manifest.json) file. +The external navigation is implemented at two positions in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file. First the targeted app needs to be added to the "crossNavigation"->"outbounds" property. In the example "ExternalNavigation" is the qualifier. -``` +```json "sap.app": { ... "crossNavigation": { @@ -2683,7 +2950,7 @@ In the example "ExternalNavigation" is the qualifier. ``` 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. -``` +```cds "RootEntityObjectReport": { ... "options": { @@ -2711,8 +2978,8 @@ Secondly the header facet, which shall offer external navigation needs the "navi INFO: 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.
Search term: [`"editableHeaderContent"`](../../search?q=editableHeaderContent) -By default, the header of an Object Page is editable in edit-mode. However with the annotation `"editableHeaderContent": false` in the [manifest.json](app/featureShowcase/webapp/manifest.json) file this can be changed, so that the header is non-editable in edit- and display-mode. -``` +By default, the header of an Object Page is editable in edit-mode. However with the annotation `"editableHeaderContent": false` in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file this can be changed, so that the header is non-editable in edit- and display-mode. +```cds "RootEntityObjectReport": { ... "options": { @@ -2729,9 +2996,9 @@ By default, the header of an Object Page is editable in edit-mode. However with INFO: 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.
Search term: [`"childEntities1ObjectPage"`](../../search?q=childEntities1ObjectPage) -To add a subpage, two objects are needed in the [manifest.json](app/featureShowcase/webapp/manifest.json) file. +To add a subpage, two objects are needed in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file. First an additional route needs to be added, which specifies the target. -``` +```json "routing": { "routes": [ ... @@ -2745,7 +3012,7 @@ First an additional route needs to be added, which specifies the target. }, ``` Secondly the target needs to be specified. -``` +```json "routing": { ... "targets": { @@ -2769,7 +3036,7 @@ Secondly the target needs to be specified. 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. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -2793,8 +3060,8 @@ For actual navigation the name of the navigation route has to be referenced as t Search term: [`"showRelatedApps"`](../../search?q=showRelatedApps) -With the property `"showRelatedApps": true` in the [manifest.json](app/featureShowcase/webapp/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. -``` +With the property `"showRelatedApps": true` in the [manifest.json](app/listreport-objectpage/webapp/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. +```json "RootEntityObjectReport": { ... "options": { @@ -2811,8 +3078,8 @@ With the property `"showRelatedApps": true` in the [manifest.json](app/featureSh Search term: [`#OPContentArea`](../../search?q=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](app/featureShowcase/webapp/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. -``` +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](app/listreport-objectpage/webapp/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. +```json "RootEntityObjectReport": { ... "options": { @@ -2838,7 +3105,7 @@ More information are available in the [SAP Fiori elements Documentation](https:/ 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'. -``` +```cds annotate schema.RootEntities with { ... criticality @Common.Text : criticality.name @Common.TextArrangement : #TextFirst; @@ -2852,15 +3119,15 @@ The feature is not limited to replacing IDs, every property can be annotated wit Search term: [`#HidingContent`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( UI.Facets : [ ... { $Type : 'UI.ReferenceFacet', Target : '@UI.FieldGroup#ShowWhenInEdit', Label : '{i18n>ShowWhenInEdit}', - ![@UI.Hidden]: IsActiveEntity, + @UI.Hidden: IsActiveEntity, }, ... @@ -2872,9 +3139,9 @@ annotate service.RootEntities with @( Search term: [`#Preview`](../../search?q=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 @( +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. +```cds +annotate srv.RootEntities with @( UI.Facets : [ ... { @@ -2887,7 +3154,7 @@ annotate service.RootEntities with @( Target : '@UI.FieldGroup#advancedChartData', ID : 'advancedChartData', Label : '{i18n>advancedChartData}', - ![@UI.PartOfPreview] : false + @UI.PartOfPreview : false }, ], }, @@ -2904,9 +3171,9 @@ annotate service.RootEntities with @( 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](app/featureShowcase/webapp/manifest.json) file. +The side content itself is referenced in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -2920,14 +3187,14 @@ The side content itself is referenced in the [manifest.json](app/featureShowcase "customSectionQualifier": { ... "sideContent": { - "template": "sap.fe.featureShowcase.mainApp.ext.SideContent", + "template": "sap.fe.showcase.lrop.ext.SideContent", "equalSplit":true } }, ... "childEntities1Section" : { "sideContent": { - "template": "sap.fe.featureShowcase.mainApp.ext.SideContent" + "template": "sap.fe.showcase.lrop.ext.SideContent" } } } @@ -2943,19 +3210,19 @@ The "template" property references the XML fragment and when "equalSplit" is set 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](https://sapui5.hana.ondemand.com/#/topic/8e01a463d3984bfa8b23c2270d40e38c), 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"); - } - }; -}); +```ts +... +export default class RootEntityOPExtension extends ControllerExtension { + ... + toggleSideContent(oBindingContext: ODataContextBinding) { + // @ts-expect-error + this.showSideContent("customSectionQualifier"); + } + toggleSideContentItem1(oContextInfo: ODataContextBinding) { + // @ts-expect-error + this.showSideContent("childEntities1Section"); + } +} ``` The implementation of custom actions is described in other chapters. @@ -2966,8 +3233,8 @@ The implementation of custom actions is described in other chapters. 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 @( +```cds +annotate srv.RootEntities with @( ... UI.FieldGroup #ShowWhenInEdit : { Data : [ @@ -2983,9 +3250,9 @@ annotate service.RootEntities with @( ... ); ``` -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](app/featureShowcase/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. +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](app/listreport-objectpage/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. -``` +```cds UI.Facets : [ ... { @@ -3004,7 +3271,7 @@ UI.Facets : [ 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. -``` +```cds UI.ConnectedFields #ConnectedDates :{ Label : '{i18n>ConnectedField}', Template : '{integerValue} / {targetValue}', @@ -3021,8 +3288,8 @@ UI.ConnectedFields #ConnectedDates :{ }, ``` 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 @( +```cds +annotate srv.RootEntities with @( ... UI.FieldGroup #Section : { Data : [ @@ -3044,9 +3311,9 @@ Currently they cannot be rendered in tables or in header facets. INFO: 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.
Search term: [](../../search?q=)`"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](app/featureShowcase/webapp/manifest.json) file. +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](app/listreport-objectpage/webapp/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". -``` +```json "RootEntityObjectReport": { ... "options": { @@ -3058,7 +3325,7 @@ Under the property "controlConfiguration" the field group has to be referenced w "fields": { "CustomContentFieldGroup": { "label": "{i18n>validityPeriodOP}", - "template": "sap.fe.featureShowcase.mainApp.ext.CustomField-DatePicker", + "template": "sap.fe.showcase.lrop.ext.CustomField-DatePicker", "position": { "placement": "Before", "anchor": "DataField::validTo" @@ -3079,8 +3346,8 @@ More information are available in the [SAP Fiori elements Documentation](https:/ Search term: [`#FormActionsAndIBN`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( ... UI.FieldGroup #Section : { Data : [ @@ -3099,17 +3366,17 @@ annotate service.RootEntities with @( SemanticObjectProperty : 'integerProperty', }, ], - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { $Type : 'UI.DataFieldForAction', - Action : 'service1.EntityContainer/unboundAction', + Action : 'LROPODataService.EntityContainer/unboundAction', Label : '{i18n>formActionEmphasized}', - ![@UI.Emphasized] : true, + @UI.Emphasized : true, }, { $Type : 'UI.DataFieldForAction', - Action : 'service1.changeProgress', + Action : 'LROPODataService.changeProgress', Label : '{i18n>formAction}', Inline : true, }, @@ -3124,7 +3391,7 @@ annotate service.RootEntities with @( 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. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -3140,7 +3407,7 @@ Custom actions can also be added to the section of a form on the Object Page. Th ... "actions" : { "CustomActionSectionForm" : { - "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox", + "press": "sap.fe.showcase.lrop.ext.CustomActions.messageBox", "enabled": "{= ${ui>/editMode} !== 'Editable'}", "visible" : true, "text": "{i18n>CustomActionSection}" @@ -3161,7 +3428,7 @@ Custom actions can also be added to the section of a form on the Object Page. Th The custom action itself is described here: [Custom Actions](#custom-actions-object-page). 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. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -3173,7 +3440,7 @@ If the action should be part of the form toolbar instead of the section toolbar, ... "actions" : { "CustomActionForm" : { - "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox", + "press": "sap.fe.showcase.lrop.ext.CustomActions.messageBox", "enabled": true, "visible" : true, "inline" : true, @@ -3195,11 +3462,10 @@ If the action should be part of the form toolbar instead of the section toolbar, 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 @( +```cds +annotate srv.ChildEntities3 with @( UI.LineItem :[ { - $Type : 'UI.DataField', Value : field, }, ], @@ -3208,8 +3474,8 @@ annotate service1.ChildEntities3 with @( Secondly the `@UI.LineItem` annotation needs to be a reference facet. -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( UI.Facets : [ ... { @@ -3227,8 +3493,8 @@ annotate service.RootEntities with @( INFO: 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.
Search term: [`"Control"`](../../search?q=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](app/featureShowcase/webapp/manifest.json) file. -``` +To enable Variant Management for a table on an Object Page, the property "variantManagement" needs to be set to "Control"` in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file. +```cds "RootEntityObjectReport": { ... "options": { @@ -3247,7 +3513,7 @@ To enable Variant Management for a table on an Object Page, the property "varian Search term: [`"personalization"`](../../search?q=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. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -3273,18 +3539,18 @@ Additionally you can turn on or off, if the personalization of columns or the so } } ``` -The annotation is in the [manifest.json](app/featureShowcase/webapp/manifest.json) file. +The annotation is in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file. #### Enable Full Screen Mode INFO: 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.
Search term: [`"enableFullScreen"`](../../search?q=enableFullScreen) -With the annotation `"enableFullScreen": true` in the [manifest.json](app/featureShowcase/webapp/manifest.json) file, you get an additional button on the top right of the table, to view the table in a full screen mode. +With the annotation `"enableFullScreen": true` in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file, you get an additional button on the top right of the table, to view the table in a full screen mode. -``` +```json "RootEntityObjectReport": { - "... + ... "options": { "settings": { ... @@ -3310,7 +3576,7 @@ With the annotation `"enableFullScreen": true` in the [manifest.json](app/featur Search term: [`#OPTableTitle`](../../search?q=OPTableTitle) The title of an Object Page table is the "TypeNamePlural" property of the `@UI.HeaderInfo` annotation. -``` +```cds annotate service.ChildEntities1 with @( UI.HeaderInfo :{ ... @@ -3325,8 +3591,8 @@ If the section title and the table title are identical or the `@UI.HeaderInfo` a Search term: [`"quickVariantSelection"`](../../search?q=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](app/featureShowcase/webapp/manifest.json) file in the "tableSettings" property of the line item, which is the data source for the table. -``` +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](app/listreport-objectpage/webapp/manifest.json) file in the "tableSettings" property of the line item, which is the data source for the table. +```json "RootEntityObjectReport": { ... "options": { @@ -3372,10 +3638,10 @@ Further information on [multiple views](#multiple-views) are in the List Report INFO: 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.
Search term: [`"creationMode"`](../../search?q=creationMode) -The inline creation mode can be enabled in the [manifest.json](app/featureShowcase/webapp/manifest.json) file. +The inline creation mode can be enabled in the [manifest.json](app/listreport-objectpage/webapp/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. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -3407,7 +3673,7 @@ With the "createAtEnd" property, it can be defined, whether the new row in "Inli Search term: [`"enableExport"`](../../search?q=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](app/featureShowacse/webapp/manifest.json) file for the wanted tables. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -3436,7 +3702,7 @@ More information regarding the functionality and restrictions are available in t Custom actions can also be added to a table toolbar which is part of a section on the Object Page. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -3447,7 +3713,7 @@ Custom actions can also be added to a table toolbar which is part of a section o ... "actions" : { "CustomActionOPTableToolbar" : { - "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox", + "press": "sap.fe.showcase.lrop.ext.CustomActions.messageBox", "enabled": "{= %{deletePossible} === true}", "visible" : true, "text": "{i18n>CustomActionOPTableToolbar (enabled when delete enabled)}" @@ -3471,39 +3737,16 @@ The custom action itself is described here: [Custom Actions](#custom-actions-obj 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 @( +```cds +annotate srv.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' - ], }, ], } @@ -3512,26 +3755,26 @@ annotate service1.ChartDataEntities with @( 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. -``` +```cds annotate service.ChartDataEntities with @( Analytics.AggregatedProperties : [ { Name : 'minAmount', AggregationMethod : 'min', AggregatableProperty : 'integerValue', - ![@Common.Label] : 'Minimal Net Amount' + @Common.Label : 'Minimal Net Amount' }, { Name : 'maxAmount', AggregationMethod : 'max', AggregatableProperty : 'integerValue', - ![@Common.Label] : 'Maximal Net Amount' + @Common.Label : 'Maximal Net Amount' }, { Name : 'avgAmount', AggregationMethod : 'average', AggregatableProperty : 'integerValue', - ![@Common.Label] : 'Average Net Amount' + @Common.Label : 'Average Net Amount' } ], ); @@ -3541,7 +3784,7 @@ After that the `@UI.Chart` can be defined. Please note, that the "Measures" prop 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. -``` +```cds annotate service.ChartDataEntities with @( ... UI.Chart : { @@ -3569,7 +3812,7 @@ annotate service.ChartDataEntities with @( Actions : [ { $Type : 'UI.DataFieldForAction', - Action : 'service1.EntityContainer/unboundAction', + Action : 'LROPODataService.EntityContainer/unboundAction', Label : '{i18n>unboundAction}', }, ] @@ -3579,8 +3822,8 @@ annotate service.ChartDataEntities with @( ``` Lastly the `@UI.Chart` annotation needs to be added as a reference facet to the `@UI.Facets` annotation. -``` -annotate service.RootEntities with @( +```cds +annotate srv.RootEntities with @( UI.Facets : [ ... { @@ -3595,8 +3838,8 @@ annotate service.RootEntities with @(
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 { +```cds +annotate srv.ChartDataEntities with { criticality @( UI.ValueCriticality : [ { @@ -3627,8 +3870,8 @@ More information about the chart section are available in the [SAP Fiori element INFO: 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.
Search term: [`"customSectionQualifier"`](../../search?q=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](app/featureShowcase/webapp/manifest.json) file. -``` +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](app/listreport-objectpage/webapp/manifest.json) file. +```json "RootEntityObjectReport": { ... "options": { @@ -3640,7 +3883,7 @@ Custom sections and subsections can be also be implemented by adding the wanted ... "sections": { "customSectionQualifier": { - "template": "sap.fe.featureShowcase.mainApp.ext.CustomSection", + "template": "sap.fe.showcase.lrop.ext.CustomSection", "position": { "anchor": "Section", "placement": "After" @@ -3664,9 +3907,9 @@ The ID of the custom section has to be unique. The "template" property is the pa INFO: 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.
Search term: [`"customSubSectionQualifier"`](../../search?q=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. +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.showcase.lrop") 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. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -3681,7 +3924,7 @@ Custom subsections are implemented in a similar way to custom sections. The qual "collectionFacetSection": { "subSections": { "customSubSectionQualifier": { - "template": "sap.fe.featureShowcase.mainApp.ext.CustomSubSection", + "template": "sap.fe.showcase.lrop.ext.CustomSubSection", "title": "{i18n>customSubSection}", "visible": true } @@ -3704,14 +3947,14 @@ Custom subsections are implemented in a similar way to custom sections. The qual Search term: [`#DeterminingAction`](../../search?q=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 @( +```cds +annotate srv.RootEntities with @( ... UI.Identification : [ ... { $Type : 'UI.DataFieldForAction', - Action : 'service1.changeCriticality', + Action : 'LROPODataService.changeCriticality', Label : '{i18n>changeCriticality}', Determining : true, Criticality : criticality_code, @@ -3725,7 +3968,7 @@ annotate service.RootEntities with @( Of course, custom actions can also be added to the footer bar of the Object Page. -``` +```json "RootEntityObjectReport": { ... "options": { @@ -3736,7 +3979,7 @@ Of course, custom actions can also be added to the footer bar of the Object Page "footer": { "actions" : { "CustomActionOPFooter" : { - "press": "sap.fe.featureShowcase.mainApp.ext.CustomActions.messageBox", + "press": "sap.fe.showcase.lrop.ext.CustomActions.messageBox", "enabled": "{= ${ui>/editMode} !== 'Editable'}", "visible" : true, "text": "{i18n>CustomActionOPFooter}" @@ -3757,15 +4000,15 @@ The custom action itself is described here: [Custom Actions](#custom-actions-obj Search term: [`"CustomObjectPage_childEntities3"`](../../search?q=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](app/featureShowcase/webapp/manifest.json) file. -``` +After creating a XML fragment as the new Object Page for the sub entity, add a new target in the [manifest.json](app/listreport-objectpage/webapp/manifest.json) file. +```json "CustomObjectPage_childEntities3": { "type": "Component", "Id": "CustomObjectPageView", "name" : "sap.fe.core.fpm", "options": { "settings": { - "viewName": "sap.fe.featureShowcase.mainApp.ext.view.CustomObjectPage", + "viewName": "sap.fe.showcase.lrop.ext.view.CustomObjectPage", "entitySet": "ChildEntities3" } } @@ -3777,7 +4020,7 @@ It is very important the the "type" is "Component" and that the "name" is "sap.f
The second step is to add the route in the [manifest.json](app/featureShowacse/webapp/manifest.json) to the sub Object Page. -``` +```json { "pattern": "RootEntities({key})/childEntities3({key2}):?query:", "name": "CustomObjectPage_childEntities3", @@ -3799,6 +4042,28 @@ For additional support, ask a question in SAP Community.

+# [Worklist](https://www.sap.com/design-system/fiori-design-web/v1-136/page-types/floorplans/work-list/?external) + +since UI5 Version: 1.99.0 + +In Fiori elements V4 the Worklist floorplan is just a flavor of the List Report. That means that all features described in the List Report part are applicable for the Worklist, expect for the Filter bar, which is disabled to get the Worklist floorplan. + +You can disable the filter bar with a single setting in the [manifest.json](app/worklist/webapp/manifest.json) file. + +```json +"ChildEntities2List": { + ... + "options": { + "settings": { + ... + "hideFilterBar": true + } + } +} +``` + +More information regarding the Worklist are available in the [SAP Fiori elements Documentation](https://sapui5.hana.ondemand.com/#/topic/d1d588f1061b4bac96a1facb80d3f3a2). + # How to obtain support [Create an issue](https://github.com/SAP-samples/fiori-elements-feature-showcase/issues) in this repository if you find a bug or have questions about the content. diff --git a/_i18n/i18n.properties b/_i18n/i18n.properties index e9ae142..701a20f 100644 --- a/_i18n/i18n.properties +++ b/_i18n/i18n.properties @@ -15,6 +15,7 @@ sumTargetValue=Sum of target values connectedField=Connected fields changeCriticality=Change Criticality (Bound) +changeProgress=Change Progress (Bound) unboundAction=Show input (Unbound) subSection=Subsection customSubSection=Custom subsection @@ -74,6 +75,7 @@ fieldWithUoM=Property with unit fieldWithCriticality=Property with criticality fieldWithPerCent=Percentage property fieldWithToolTip=Field with tool tip +toolTip=This is a tip 😄 adminData=Admin data (field group) dataFieldWithURL=URL property contactQuickView=Contact with quick view @@ -125,4 +127,13 @@ region=Region description2=Second description MultiInputField=Multi input field -MultiInputFieldWithVH=Multi input with value help and input filter \ No newline at end of file +MultiInputFieldWithVH=Multi input with value help and input filter + +ID=ID +ExternalId=External ID +IsActive=Is Active +Category=Category +SuperOrdinateOrgUnit=Super ordinate Org-Unit +SubordinaryOrgUnits=Subordinary Org-Units +OrganizationalUnit=Organizational unit +OrganizationalUnits=Organizational units \ No newline at end of file diff --git a/_i18n/i18n_en.properties b/_i18n/i18n_en.properties index e9ae142..701a20f 100644 --- a/_i18n/i18n_en.properties +++ b/_i18n/i18n_en.properties @@ -15,6 +15,7 @@ sumTargetValue=Sum of target values connectedField=Connected fields changeCriticality=Change Criticality (Bound) +changeProgress=Change Progress (Bound) unboundAction=Show input (Unbound) subSection=Subsection customSubSection=Custom subsection @@ -74,6 +75,7 @@ fieldWithUoM=Property with unit fieldWithCriticality=Property with criticality fieldWithPerCent=Percentage property fieldWithToolTip=Field with tool tip +toolTip=This is a tip 😄 adminData=Admin data (field group) dataFieldWithURL=URL property contactQuickView=Contact with quick view @@ -125,4 +127,13 @@ region=Region description2=Second description MultiInputField=Multi input field -MultiInputFieldWithVH=Multi input with value help and input filter \ No newline at end of file +MultiInputFieldWithVH=Multi input with value help and input filter + +ID=ID +ExternalId=External ID +IsActive=Is Active +Category=Category +SuperOrdinateOrgUnit=Super ordinate Org-Unit +SubordinaryOrgUnits=Subordinary Org-Units +OrganizationalUnit=Organizational unit +OrganizationalUnits=Organizational units \ No newline at end of file diff --git a/app/ControllerExtension.d.ts b/app/ControllerExtension.d.ts new file mode 100644 index 0000000..ad82a45 --- /dev/null +++ b/app/ControllerExtension.d.ts @@ -0,0 +1,28 @@ +/** + * Helper to be able to define how to get the page specific extension API when writing a controller extension. + */ +declare module 'sap/ui/core/mvc/ControllerExtension' { + import View from 'sap/ui/core/mvc/View'; + import AppComponent from 'sap/fe/core/AppComponent'; + import Controller from 'sap/ui/core/mvc/Controller'; + import EditFlow from 'sap/fe/core/controllerextensions/EditFlow'; + import IntentBasedNavigation from 'sap/fe/core/controllerextensions/IntentBasedNavigation'; + import ViewState from 'sap/fe/core/controllerextensions/ViewState'; + import Routing from 'sap/fe/core/controllerextensions/Routing'; + + export default class ControllerExtension { + override?: Overrides; + base: { + getExtensionAPI(): ExtensionAPI; + getView(): View; + getAppComponent(): AppComponent; + }; + } + + export type Overrides = { + editFlow?: Partial; + intentBasedNavigation?: Partial; + routing?: Partial; + viewState?: Partial; + } & Partial; +} diff --git a/app/featureShowcase/capabilities.cds b/app/featureShowcase/capabilities.cds deleted file mode 100644 index f9e44a7..0000000 --- a/app/featureShowcase/capabilities.cds +++ /dev/null @@ -1,97 +0,0 @@ -using service1 from '../../srv/service'; - -annotate service1.RootEntities with @odata.draft.enabled; //Search-Term: #Draft - -annotate service1.RootEntityVariants with @odata.draft.enabled; //Annotation has to exists, without no entites would be visible on view with other entity set of List Report - -annotate service1.RootEntities with @( - //Disables the delete option dependent of the fields value - Capabilities.DeleteRestrictions : { - Deletable : deletePossible, //Search-Term: #DynamicCRUD - }, - /* Capabilities.UpdateRestrictions : { - Updatable : updatePossible, //UpdateRestrictions are ignored in determining if the edit button is visible or not, but it still affects wheather the fields are editable or not - }, */ - UI.UpdateHidden : updateHidden,//Search-Term: #DynamicCRUD - - UI.CreateHidden: { $edmJson: { $Path: '/service1.EntityContainer/Singleton/createHidden' } }, //Search-Term: #DynamicCRUD - - Capabilities.FilterRestrictions : { - FilterExpressionRestrictions : [ - { - //Search-Term: #SemanticDateFilter - Property : 'validFrom', - AllowedExpressions : 'SingleRange' //Other option: SingleValue - }, - ], - // RequiredProperties : [ - // stringProperty //Search-Term: #RequiredFilter - // ] - }, -) { - validTo @UI.DateTimeStyle : 'short' -}; - -annotate service1 with @( - Capabilities.FilterFunctions : [ - 'tolower' //Search-Term: #CaseInsensitiveFiltering - ], -); - -annotate service1.ChartDataEntities with @( - //Search-Term: #ChartSection - Aggregation.ApplySupported : { - Transformations : [ - 'aggregate', - 'topcount', - 'bottomcount', - 'identity', - 'concat', - 'groupby', - 'filter', - 'expand', - 'top', - 'skip', - 'orderby', - 'search' - ], - Rollup : #None, - PropertyRestrictions : true, - GroupableProperties : [ - dimensions, - criticality_code - ], - AggregatableProperties : [ - {Property : integerValue}, - ], - } -); - -annotate service1.ChartDataEntities with { - //Search-Term: #ChartSection - criticality @( - UI.ValueCriticality : [ - { - Value : 0, - Criticality : #Neutral - }, - { - Value : 1, - Criticality : #Negative - }, - { - Value : 2, - Criticality : #Critical - }, - { - Value : 3, - Criticality : #Positive - } - ] - ); - - integerValue @( - Measures.ISOCurrency : uom_code, - Core.Immutable : true, - ); -}; \ No newline at end of file diff --git a/app/featureShowcase/layouts_GrandChildEntities.cds b/app/featureShowcase/layouts_GrandChildEntities.cds deleted file mode 100644 index 60ff634..0000000 --- a/app/featureShowcase/layouts_GrandChildEntities.cds +++ /dev/null @@ -1,13 +0,0 @@ -using service1 as service from '../../srv/service'; - -/** - UI.LineItem - */ -annotate service1.GrandChildEntities with @( - UI.LineItem : [ - { - $Type : 'UI.DataField', - Value : field, - }, - ], -); \ No newline at end of file diff --git a/app/featureShowcase/package.json b/app/featureShowcase/package.json deleted file mode 100644 index 5e906d5..0000000 --- a/app/featureShowcase/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "featureShowcase", - "version": "0.0.1", - "description": "A SAP Fiori application.", - "keywords": [ - "ui5", - "openui5", - "sapui5" - ], - "main": "webapp/index.html", - "scripts": { - "deploy-config": "npx -p @sap/ux-ui5-tooling fiori add deploy-config cf" - }, - "devDependencies": { - "@ui5/cli": "^2.11.1", - "@ui5/fs": "^2.0.6", - "@ui5/logger": "^2.0.1", - "@sap/ux-ui5-tooling": "1", - "rimraf": "3.0.2", - "@sap/ux-specification": "latest" -} -} diff --git a/app/featureShowcase/ui5.yaml b/app/featureShowcase/ui5.yaml deleted file mode 100644 index cc29273..0000000 --- a/app/featureShowcase/ui5.yaml +++ /dev/null @@ -1,24 +0,0 @@ -specVersion: '2.4' -metadata: - name: 'featureShowcase' -type: application -server: - customMiddleware: - - name: fiori-tools-proxy - afterMiddleware: compression - configuration: - ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted - backend: - - path: /srv1 - url: http://localhost:4004 - ui5: - path: - - /resources - - /test-resources - url: https://ui5.sap.com - version: # The UI5 version, for instance, 1.78.1. Empty means latest version - - name: fiori-tools-appreload - afterMiddleware: compression - configuration: - port: 35729 - path: webapp diff --git a/app/featureShowcase/webapp/Component.js b/app/featureShowcase/webapp/Component.js deleted file mode 100644 index 4dff293..0000000 --- a/app/featureShowcase/webapp/Component.js +++ /dev/null @@ -1,9 +0,0 @@ -sap.ui.define(['sap/fe/core/AppComponent'], function(AppComponent) { - 'use strict'; - - return AppComponent.extend("sap.fe.featureShowcase.mainApp.Component", { - metadata: { - manifest: "json" - } - }); -}); diff --git a/app/featureShowcase/webapp/ext/CustomActions.js b/app/featureShowcase/webapp/ext/CustomActions.js deleted file mode 100644 index e81d398..0000000 --- a/app/featureShowcase/webapp/ext/CustomActions.js +++ /dev/null @@ -1,21 +0,0 @@ -sap.ui.define([ - "sap/m/MessageBox", - "sap/ui/core/library" -], function(MessageBox, coreLibrary) { - "use strict"; - //Search-Term: CustomActions - return { - messageBox: function() { - MessageBox.alert("Button pressed"); - }, - enabled : function() { - return true; - }, - enabledForSingleSelect: function(oBindingContext, aSelectedContexts) { - if (aSelectedContexts && aSelectedContexts.length === 1) { - return true; - } - return false; - } - }; -}); \ No newline at end of file diff --git a/app/featureShowcase/webapp/ext/CustomFilter-Rating.js b/app/featureShowcase/webapp/ext/CustomFilter-Rating.js deleted file mode 100644 index 8814c2e..0000000 --- a/app/featureShowcase/webapp/ext/CustomFilter-Rating.js +++ /dev/null @@ -1,10 +0,0 @@ -sap.ui.define(["sap/ui/model/Filter", "sap/ui/model/FilterOperator"], function(Filter, FilterOperator) { - "use strict"; - - return { - //Search-Term: "customFilter" - onReset: function(oEvent) { - this.setFilterValues("starsValue"); - } - }; -}); diff --git a/app/featureShowcase/webapp/ext/SideContent.js b/app/featureShowcase/webapp/ext/SideContent.js deleted file mode 100644 index b166e6d..0000000 --- a/app/featureShowcase/webapp/ext/SideContent.js +++ /dev/null @@ -1,12 +0,0 @@ -sap.ui.define([], function() { - "use strict"; - //Search-Term: #SideContent - return { - toggleSideContent: function(oBindingContext) { - this.showSideContent("customSectionQualifier"); - }, - toggleSideContentItem1: function(oContextInfo) { - this.showSideContent("childEntities1Section"); - } - }; -}); \ No newline at end of file diff --git a/app/featureShowcase/webapp/ext/controller/CustomObjectPage.controller.js b/app/featureShowcase/webapp/ext/controller/CustomObjectPage.controller.js deleted file mode 100644 index 3d4b461..0000000 --- a/app/featureShowcase/webapp/ext/controller/CustomObjectPage.controller.js +++ /dev/null @@ -1,80 +0,0 @@ -sap.ui.define([ - "sap/fe/core/PageController", - "sap/ui/model/json/JSONModel", - "sap/suite/ui/microchart/ComparisonMicroChart", - "sap/suite/ui/microchart/ComparisonMicroChartData" -], function (PageController, JSONModel, ComparisonMicroChart, ComparisonMicroChartData) { - return PageController.extend("sap.fe.featureShowcase.mainApp.ext.controller.CustomObjectPage", { - onInit: function () { - PageController.prototype.onInit.apply(this); - - var oModel = new JSONModel(sap.ui.require.toUrl("sap/fe/featureShowcase/mainApp/ext/controller/data.json")); - var that = this; - - this.getView().setModel(oModel, 'graph'); - - this._oModelSettings = new JSONModel({ - source: "atomicCircle", - orientation: "LeftRight", - arrowPosition: "End", - arrowOrientation: "ParentOf", - nodeSpacing: 55, - mergeEdges: false - }); - - this.getView().setModel(this._oModelSettings, "settings"); - - var fnSetContent = function (oNode) { - oNode.setContent(new ComparisonMicroChart({ - size: "M", - scale: "M", - data: [ - new ComparisonMicroChartData({ - title: "USA", - value: Math.floor(Math.random() * 60), - color: "Neutral" - }), - new ComparisonMicroChartData({ - title: "EMEA", - value: Math.floor(Math.random() * 60), - color: "Error" - }), - new ComparisonMicroChartData({ - title: "APAC", - value: -20, - color: "Good" - }), - new ComparisonMicroChartData({ - title: "LTA", - value: Math.floor(Math.random() * 60) * -1, - color: "Critical" - }), - new ComparisonMicroChartData({ - title: "ALPS", - value: Math.floor(Math.random() * 20), - color: "Good" - }) - ] - }).addStyleClass("sapUiSmallMargin")); - - }; - - oModel.attachRequestCompleted(function (oData) { - that.byId("graph").getNodes().forEach(function (oNode) { - if (oNode.getKey() === "21" || oNode.getKey() === "18") { - fnSetContent(oNode); - } - }); - }); - }, - onAfterRendering: function () { - this.byId("graphWrapper").$().css("overflow-y", "auto"); - }, - mergeChanged: function (oEvent) { - this._oModelSettings.setProperty("/mergeEdges", !!Number(oEvent.getSource().getProperty("selectedKey"))); - }, - spacingChanged: function (oEvent) { - this._oModelSettings.setProperty("/nodeSpacing", Number(oEvent.getSource().getProperty("selectedKey"))); - } - }); -}); \ No newline at end of file diff --git a/app/featureShowcase/webapp/utils/locate-reuse-libs.js b/app/featureShowcase/webapp/utils/locate-reuse-libs.js deleted file mode 100644 index 7180e73..0000000 --- a/app/featureShowcase/webapp/utils/locate-reuse-libs.js +++ /dev/null @@ -1,136 +0,0 @@ - - -//Generated by SAP Fiori tools Application Generator - - -/*eslint-disable semi, no-console*/ -(function (sap) { - fioriToolsGetManifestLibs = function (manifestPath) { - var url = manifestPath; - var result = ""; - // SAPUI5 delivered namespaces from https://ui5.sap.com/#/api/sap - var ui5Libs = [ - "sap.apf", - "sap.base", - "sap.chart", - "sap.collaboration", - "sap.f", - "sap.fe", - "sap.fileviewer", - "sap.gantt", - "sap.landvisz", - "sap.m", - "sap.ndc", - "sap.ovp", - "sap.rules", - "sap.suite", - "sap.tnt", - "sap.ui", - "sap.uiext", - "sap.ushell", - "sap.uxap", - "sap.viz", - "sap.webanalytics", - "sap.zen" - ]; - return new Promise(function (resolve, reject) { - $.ajax(url) - .done(function (manifest) { - if (manifest) { - if ( - manifest["sap.ui5"] && - manifest["sap.ui5"].dependencies && - manifest["sap.ui5"].dependencies.libs - ) { - Object.keys(manifest["sap.ui5"].dependencies.libs).forEach(function (manifestLibKey) { - // ignore libs that start with SAPUI5 delivered namespaces - if (!ui5Libs.some(function (substring) { return manifestLibKey === substring || manifestLibKey.startsWith(substring + "."); })) { - if (result.length > 0) { - result = result + "," + manifestLibKey; - } else { - result = manifestLibKey; - } - } - }); - } - } - resolve(result); - }) - .fail(function (error) { - reject(new Error("Could not fetch manifest at '" + manifestPath)); - }); - }); - }; - /** - * Registers the module paths for dependencies of the given component. - * @param {string} manifestPath The the path to the app manifest path - * for which the dependencies should be registered. - * @returns {Promise} A promise which is resolved when the ajax request for - * the app-index was successful and the module paths were registered. - */ - sap.registerComponentDependencyPaths = function (manifestPath) { - return fioriToolsGetManifestLibs(manifestPath).then(function (libs) { - if (libs && libs.length > 0) { - var url = "/sap/bc/ui2/app_index/ui5_app_info?id=" + libs; - var sapClient = jQuery.sap.getUriParameters().get("sap-client"); - if (sapClient && sapClient.length === 3) { - url = url + "&sap-client=" + sapClient; - } - return $.ajax(url).done(function (data) { - if (data) { - Object.keys(data).forEach(function (moduleDefinitionKey) { - var moduleDefinition = data[moduleDefinitionKey]; - if (moduleDefinition && moduleDefinition.dependencies) { - moduleDefinition.dependencies.forEach(function (dependency) { - if (dependency.url && dependency.url.length > 0 && dependency.type === "UI5LIB") { - jQuery.sap.log.info( - "Registering Library " + - dependency.componentId + - " from server " + - dependency.url - ); - jQuery.sap.registerModulePath(dependency.componentId, dependency.url); - } - }); - } - }); - } - }); - } - }); - }; -})(sap); - -var scripts = document.getElementsByTagName("script"); -var currentScript = scripts[scripts.length - 1]; -var manifestUri = currentScript.getAttribute("data-sap-ui-manifest-uri"); -var componentName = currentScript.getAttribute("data-sap-ui-componentName"); -var useMockserver = currentScript.getAttribute("data-sap-ui-use-mockserver"); -sap.registerComponentDependencyPaths(manifestUri) - .catch(function (error) { - jQuery.sap.log.error(error); - }) - .finally(function () { - if (componentName && componentName.length > 0) { - if (useMockserver && useMockserver === "true") { - sap.ui.getCore().attachInit(function () { - sap.ui.require([componentName.replace(/\./g, "/") + "/localService/mockserver"], function (server) { - // set up test service for local testing - server.init(); - // initialize the ushell sandbox component - sap.ushell.Container.createRenderer().placeAt("content"); - }); - }); - } else { - // Requiring the ComponentSupport module automatically executes the component initialisation for all declaratively defined components - sap.ui.require(["sap/ui/core/ComponentSupport"]); - } - } else { - sap.ui.getCore().attachInit(function () { - // initialize the ushell sandbox component - sap.ushell.Container.createRenderer().placeAt("content"); - }); - } - }); - -sap.registerComponentDependencyPaths(manifestUri); diff --git a/app/featureShowcaseNavigationTarget/package.json b/app/featureShowcaseNavigationTarget/package.json deleted file mode 100644 index 9b83fe9..0000000 --- a/app/featureShowcaseNavigationTarget/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "items3", - "version": "0.0.1", - "description": "A SAP Fiori application.", - "keywords": [ - "ui5", - "openui5", - "sapui5" - ], - "main": "webapp/index.html", - "scripts": { - "deploy-config": "npx -p @sap/ux-ui5-tooling fiori add deploy-config cf" - }, - "devDependencies": { - "@ui5/cli": "^2.11.1", - "@ui5/fs": "^2.0.6", - "@ui5/logger": "^2.0.1", - "@sap/ux-ui5-tooling": "1", - "rimraf": "3.0.2", - "@sap/ux-specification": "latest" -} -} diff --git a/app/featureShowcaseNavigationTarget/ui5.yaml b/app/featureShowcaseNavigationTarget/ui5.yaml deleted file mode 100644 index 5bb182c..0000000 --- a/app/featureShowcaseNavigationTarget/ui5.yaml +++ /dev/null @@ -1,24 +0,0 @@ -specVersion: '2.4' -metadata: - name: 'items3' -type: application -server: - customMiddleware: - - name: fiori-tools-proxy - afterMiddleware: compression - configuration: - ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted - backend: - - path: /srv1 - url: http://localhost:4004 - ui5: - path: - - /resources - - /test-resources - url: https://ui5.sap.com - version: # The UI5 version, for instance, 1.78.1. Empty means latest version - - name: fiori-tools-appreload - afterMiddleware: compression - configuration: - port: 35729 - path: webapp diff --git a/app/featureShowcaseNavigationTarget/webapp/Component.js b/app/featureShowcaseNavigationTarget/webapp/Component.js deleted file mode 100644 index 3a21dca..0000000 --- a/app/featureShowcaseNavigationTarget/webapp/Component.js +++ /dev/null @@ -1,9 +0,0 @@ -sap.ui.define(['sap/fe/core/AppComponent'], function(AppComponent) { - 'use strict'; - - return AppComponent.extend("sap.fe.featureShowcase.childEntities2ui.Component", { - metadata: { - manifest: "json" - } - }); -}); diff --git a/app/featureShowcaseNavigationTarget/webapp/utils/locate-reuse-libs.js b/app/featureShowcaseNavigationTarget/webapp/utils/locate-reuse-libs.js deleted file mode 100644 index 7180e73..0000000 --- a/app/featureShowcaseNavigationTarget/webapp/utils/locate-reuse-libs.js +++ /dev/null @@ -1,136 +0,0 @@ - - -//Generated by SAP Fiori tools Application Generator - - -/*eslint-disable semi, no-console*/ -(function (sap) { - fioriToolsGetManifestLibs = function (manifestPath) { - var url = manifestPath; - var result = ""; - // SAPUI5 delivered namespaces from https://ui5.sap.com/#/api/sap - var ui5Libs = [ - "sap.apf", - "sap.base", - "sap.chart", - "sap.collaboration", - "sap.f", - "sap.fe", - "sap.fileviewer", - "sap.gantt", - "sap.landvisz", - "sap.m", - "sap.ndc", - "sap.ovp", - "sap.rules", - "sap.suite", - "sap.tnt", - "sap.ui", - "sap.uiext", - "sap.ushell", - "sap.uxap", - "sap.viz", - "sap.webanalytics", - "sap.zen" - ]; - return new Promise(function (resolve, reject) { - $.ajax(url) - .done(function (manifest) { - if (manifest) { - if ( - manifest["sap.ui5"] && - manifest["sap.ui5"].dependencies && - manifest["sap.ui5"].dependencies.libs - ) { - Object.keys(manifest["sap.ui5"].dependencies.libs).forEach(function (manifestLibKey) { - // ignore libs that start with SAPUI5 delivered namespaces - if (!ui5Libs.some(function (substring) { return manifestLibKey === substring || manifestLibKey.startsWith(substring + "."); })) { - if (result.length > 0) { - result = result + "," + manifestLibKey; - } else { - result = manifestLibKey; - } - } - }); - } - } - resolve(result); - }) - .fail(function (error) { - reject(new Error("Could not fetch manifest at '" + manifestPath)); - }); - }); - }; - /** - * Registers the module paths for dependencies of the given component. - * @param {string} manifestPath The the path to the app manifest path - * for which the dependencies should be registered. - * @returns {Promise} A promise which is resolved when the ajax request for - * the app-index was successful and the module paths were registered. - */ - sap.registerComponentDependencyPaths = function (manifestPath) { - return fioriToolsGetManifestLibs(manifestPath).then(function (libs) { - if (libs && libs.length > 0) { - var url = "/sap/bc/ui2/app_index/ui5_app_info?id=" + libs; - var sapClient = jQuery.sap.getUriParameters().get("sap-client"); - if (sapClient && sapClient.length === 3) { - url = url + "&sap-client=" + sapClient; - } - return $.ajax(url).done(function (data) { - if (data) { - Object.keys(data).forEach(function (moduleDefinitionKey) { - var moduleDefinition = data[moduleDefinitionKey]; - if (moduleDefinition && moduleDefinition.dependencies) { - moduleDefinition.dependencies.forEach(function (dependency) { - if (dependency.url && dependency.url.length > 0 && dependency.type === "UI5LIB") { - jQuery.sap.log.info( - "Registering Library " + - dependency.componentId + - " from server " + - dependency.url - ); - jQuery.sap.registerModulePath(dependency.componentId, dependency.url); - } - }); - } - }); - } - }); - } - }); - }; -})(sap); - -var scripts = document.getElementsByTagName("script"); -var currentScript = scripts[scripts.length - 1]; -var manifestUri = currentScript.getAttribute("data-sap-ui-manifest-uri"); -var componentName = currentScript.getAttribute("data-sap-ui-componentName"); -var useMockserver = currentScript.getAttribute("data-sap-ui-use-mockserver"); -sap.registerComponentDependencyPaths(manifestUri) - .catch(function (error) { - jQuery.sap.log.error(error); - }) - .finally(function () { - if (componentName && componentName.length > 0) { - if (useMockserver && useMockserver === "true") { - sap.ui.getCore().attachInit(function () { - sap.ui.require([componentName.replace(/\./g, "/") + "/localService/mockserver"], function (server) { - // set up test service for local testing - server.init(); - // initialize the ushell sandbox component - sap.ushell.Container.createRenderer().placeAt("content"); - }); - }); - } else { - // Requiring the ComponentSupport module automatically executes the component initialisation for all declaratively defined components - sap.ui.require(["sap/ui/core/ComponentSupport"]); - } - } else { - sap.ui.getCore().attachInit(function () { - // initialize the ushell sandbox component - sap.ushell.Container.createRenderer().placeAt("content"); - }); - } - }); - -sap.registerComponentDependencyPaths(manifestUri); diff --git a/app/listreport-objectpage/capabilities.cds b/app/listreport-objectpage/capabilities.cds new file mode 100644 index 0000000..495e63a --- /dev/null +++ b/app/listreport-objectpage/capabilities.cds @@ -0,0 +1,124 @@ +using LROPODataService as srv from '../../srv/list-report-srv'; + +annotate srv.RootEntities with @odata.draft.enabled; //Search-Term: #Draft + +annotate srv.RootEntityVariants with @odata.draft.enabled; //Annotation has to exists, without no entites would be visible on view with other entity set of List Report + +annotate srv.RootEntities with @( + //Disables the delete option dependent of the fields value + Capabilities.DeleteRestrictions : { + Deletable : deletePossible, //Search-Term: #DynamicCRUD + }, + /* Capabilities.UpdateRestrictions : { + Updatable : updatePossible, //UpdateRestrictions are ignored in determining if the edit button is visible or not, but it still affects wheather the fields are editable or not + }, */ + UI.UpdateHidden : updateHidden,//Search-Term: #DynamicCRUD + + UI.CreateHidden: { $edmJson: { $Path: '/Singleton/createHidden' } }, //Search-Term: #DynamicCRUD + + Capabilities.FilterRestrictions : { + FilterExpressionRestrictions : [ + { + //Search-Term: #SemanticDateFilter + Property : 'validFrom', + AllowedExpressions : 'SingleRange' //Other option: SingleValue + }, + ], + // RequiredProperties : [ + // stringProperty //Search-Term: #RequiredFilter + // ] + }, +) { + validTo @UI.DateTimeStyle : 'short' +}; + +annotate LROPODataService with @( + Capabilities.FilterFunctions : [ + 'tolower' //Search-Term: #CaseInsensitiveFiltering + ], +); + +annotate srv.ChartDataEntities with @( + //Search-Term: #ChartSection + Aggregation.ApplySupported : { + GroupableProperties : [ + dimensions, + criticality_code + ], + AggregatableProperties : [ + {Property : integerValue}, + ], + } +); + +annotate srv.ChartDataEntities with { + //Search-Term: #ChartSection + criticality @( + UI.ValueCriticality : [ + { + Value : 0, + Criticality : #Neutral + }, + { + Value : 1, + Criticality : #Negative + }, + { + Value : 2, + Criticality : #Critical + }, + { + Value : 3, + Criticality : #Positive + } + ] + ); + + integerValue @( + Measures.ISOCurrency : uom_code, + Core.Immutable : true, + ); +}; + +// Search-Term: #TreeTable +annotate srv.OrganizationalUnits @( + Aggregation.RecursiveHierarchy #OrgUnitsHierarchy : { + ParentNavigationProperty : superOrdinateOrgUnit, // navigates to a node's parent + NodeProperty : ID, // identifies a node, usually the key + }, + Hierarchy.RecursiveHierarchyActions #OrgUnitsHierarchy : { + ChangeSiblingForRootsSupported: true, // Disables root node changes, e.g. a business unit cannot be changed to a division and vice versa + ChangeNextSiblingAction : 'LROPODataService.moveOrgUnit', + CopyAction : 'LROPODataService.copyOrgUnit', + }, +); + +// Fiori expects the following to be defined explicitly, even though they're always the same +extend srv.OrganizationalUnits with @( + // The columns expected by Fiori to be present in hierarchy entities + Hierarchy.RecursiveHierarchy #OrgUnitsHierarchy : { + LimitedDescendantCount : LimitedDescendantCount, + DistanceFromRoot : DistanceFromRoot, + DrillState : DrillState, + LimitedRank : LimitedRank + }, + // Disallow filtering on these properties from Fiori UIs + Capabilities.FilterRestrictions.NonFilterableProperties: [ + 'LimitedDescendantCount', + 'DistanceFromRoot', + 'DrillState', + 'LimitedRank' + ], + // Disallow sorting on these properties from Fiori UIs + Capabilities.SortRestrictions.NonSortableProperties : [ + 'LimitedDescendantCount', + 'DistanceFromRoot', + 'DrillState', + 'LimitedRank' + ], +) columns { // Ensure we can query these fields from database + null as LimitedDescendantCount : Int16, + null as DistanceFromRoot : Int16, + null as DrillState : String, + null as LimitedRank : Int16, +}; \ No newline at end of file diff --git a/app/featureShowcase/field-control.cds b/app/listreport-objectpage/field-control.cds similarity index 82% rename from app/featureShowcase/field-control.cds rename to app/listreport-objectpage/field-control.cds index 99cd4a2..7948ae6 100644 --- a/app/featureShowcase/field-control.cds +++ b/app/listreport-objectpage/field-control.cds @@ -1,13 +1,13 @@ -using service1 from '../../srv/service'; +using LROPODataService as srv from '../../srv/list-report-srv'; // // annotations that control the behavior of fields and actions // -annotate service1.RootEntities { +annotate srv.RootEntities { ID @UI.Hidden @readonly @mandatory @UI.ExcludeFromNavigationContext; stringProperty @Core.Immutable @mandatory @UI.ExcludeFromNavigationContext; //Search-Term: #CreationDialog - uom @UI.Hidden; + uom @UI.Hidden; association2one @( //Search-Term: #Navigation @@ -38,38 +38,38 @@ annotate service1.RootEntities { email @mandatory; }; -annotate service1.RootEntities actions { +annotate srv.RootEntities actions { //Search-Terms: #SideEffect, #ParameterDefaultValue changeProgress @( //Update the UI after action Common.SideEffects : { - TargetProperties : ['in/integerValue'] + TargetProperties : [($self.criticality_code), 'in/integerValue'] }, - Core.OperationAvailable: {$edmJson: {$If: [{$Ge: [{$Path: 'in/integerValue'}, 0]}, true, false]}} + Core.OperationAvailable: ($self.integerValue > 0) ) } -annotate service1.ChildEntities1 { +annotate srv.ChildEntities1 { ID @UI.Hidden @readonly @mandatory; parent @UI.Hidden; field @Core.Immutable @mandatory; }; -annotate service1.criticalAction with @( +annotate srv.criticalAction with @( Common.IsActionCritical : true //Search-Term: #CriticalAction ); -annotate service1.GrandChildEntities { +annotate srv.GrandChildEntities { ID @UI.Hidden @readonly @mandatory; parent @UI.Hidden; }; -annotate service1.ChildEntities2 { +annotate srv.ChildEntities2 { ID @UI.Hidden @readonly @mandatory; }; -annotate service1.ChartDataEntities { +annotate srv.ChartDataEntities { ID @UI.Hidden @readonly @mandatory; parent @UI.Hidden @Core.Immutable; diff --git a/app/featureShowcase/labels.cds b/app/listreport-objectpage/labels.cds similarity index 82% rename from app/featureShowcase/labels.cds rename to app/listreport-objectpage/labels.cds index 7c0a6d7..45f395e 100644 --- a/app/featureShowcase/labels.cds +++ b/app/listreport-objectpage/labels.cds @@ -1,4 +1,4 @@ -using { sap.fe.featureShowcase as schema } from '../../db/schema'; +using { sap.fe.showcase as schema } from '../../db/schema'; // // annotations that control rendering of fields and labels @@ -64,11 +64,22 @@ annotate schema.ChartDataEntities with { integerValueWithUoM @Measures.Unit : uom_code; }; -annotate schema.UnitOfMeasureCodeList with { - code @title : '{i18n>unitCode}' @Common.Text : name @Common.TextArrangement : #TextOnly -}; - annotate schema.Contacts with { - ID @title : '{i18n>name}' @Common.Text : name @Common.TextArrangement : #TextOnly + ID @title : '{i18n>Name}' @Common.Text : name @Common.TextArrangement : #TextOnly }; + +annotate schema.OrganizationalUnits with { + ID @title : '{i18n>ID}' @Core.Computed @Common.Text : name @Common.TextArrangement : #TextFirst; + externalId @title : '{i18n>ExternalId}' @Core.Computed; + name @title : '{i18n>Name}'; + description @title : '{i18n>Description}'; + isActive @title : '{i18n>IsActive}'; + category @title : '{i18n>Category}' @Common.Text : category.name @Common.TextArrangement : #TextOnly @Common.ValueListWithFixedValues; + superOrdinateOrgUnit @title : '{i18n>SuperOrdinateOrgUnit}' @Common.Text : superOrdinateOrgUnit.name @Common.TextArrangement : #TextFirst; + subordinaryOrgUnits @title : '{i18n>SubordinaryOrgUnits}'; +} + +annotate schema.OrganizationalUnitCategoryCodes with { + code @Common.Text : name +} \ No newline at end of file diff --git a/app/featureShowcase/layouts_ChartDataEntities.cds b/app/listreport-objectpage/layouts_ChartDataEntities.cds similarity index 93% rename from app/featureShowcase/layouts_ChartDataEntities.cds rename to app/listreport-objectpage/layouts_ChartDataEntities.cds index a448113..f0e2dff 100644 --- a/app/featureShowcase/layouts_ChartDataEntities.cds +++ b/app/listreport-objectpage/layouts_ChartDataEntities.cds @@ -1,6 +1,6 @@ -using service1 as service from '../../srv/service'; +using LROPODataService as srv from '../../srv/list-report-srv'; -annotate service.ChartDataEntities with @( +annotate srv.ChartDataEntities with @( UI.LineItem : [ { $Type : 'UI.DataField', @@ -48,7 +48,7 @@ annotate service.ChartDataEntities with @( Actions : [ { $Type : 'UI.DataFieldForAction', - Action : 'service1.EntityContainer/unboundAction', + Action : 'LROPODataService.EntityContainer/unboundAction', Label : '{i18n>unboundAction}', }, ] @@ -148,7 +148,7 @@ annotate service.ChartDataEntities with @( ); -annotate service.ChartDataEntities with @( +annotate srv.ChartDataEntities with @( UI.DataPoint #areaChart : { //Search-Term: #microChartArea Value : integerValue, @@ -178,26 +178,26 @@ annotate service.ChartDataEntities with @( }, ); -annotate service.ChartDataEntities with @( +annotate srv.ChartDataEntities with @( //Search-Term: #ChartSection Analytics.AggregatedProperties : [ { Name : 'minAmount', AggregationMethod : 'min', AggregatableProperty : 'integerValue', - ![@Common.Label] : 'Minimal Net Amount' + @Common.Label : 'Minimal Net Amount' }, { Name : 'maxAmount', AggregationMethod : 'max', AggregatableProperty : 'integerValue', - ![@Common.Label] : 'Maximal Net Amount' + @Common.Label : 'Maximal Net Amount' }, { Name : 'avgAmount', AggregationMethod : 'average', AggregatableProperty : 'integerValue', - ![@Common.Label] : 'Average Net Amount' + @Common.Label : 'Average Net Amount' } ], ); \ No newline at end of file diff --git a/app/featureShowcase/layouts_ChildEntities1.cds b/app/listreport-objectpage/layouts_ChildEntities1.cds similarity index 81% rename from app/featureShowcase/layouts_ChildEntities1.cds rename to app/listreport-objectpage/layouts_ChildEntities1.cds index f986452..2699b8d 100644 --- a/app/featureShowcase/layouts_ChildEntities1.cds +++ b/app/listreport-objectpage/layouts_ChildEntities1.cds @@ -1,10 +1,8 @@ -using service1 as service from '../../srv/service'; -using service1.GrandChildEntities as grandChildren from './layouts_GrandChildEntities'; +using LROPODataService as srv from '../../srv/list-report-srv'; +using from './layouts_GrandChildEntities'; -/** - UI.LineItem - */ -annotate service.ChildEntities1 with @( +// UI.LineItem +annotate srv.ChildEntities1 with @( UI.LineItem : [ { $Type : 'UI.DataField', @@ -22,10 +20,8 @@ annotate service.ChildEntities1 with @( ], ); -/** - UI.HeaderInfo - */ -annotate service.ChildEntities1 with @( +// UI.HeaderInfo +annotate srv.ChildEntities1 with @( UI.HeaderInfo : { TypeName : '{i18n>childEntities1}', TypeNamePlural : '{i18n>childEntities1.typeNamePlural}', //Search-Term: #OPTableTitle @@ -34,23 +30,15 @@ annotate service.ChildEntities1 with @( }, Description : { //Search-Term: #ODataConcat - Value : {$edmJson: { - $Apply : [ - 'Using odata.concat - Field: ', - {$Path: 'field'}, - ], - $Function : 'odata.concat' - }}, + Value : ('Using odata.concat - Field: ' || field), }, ImageUrl : '', TypeImageUrl : 'sap-icon://blank-tag', }, ); -/** - UI.HeaderFacets - */ -annotate service.ChildEntities1 with @( +// UI.HeaderFacets +annotate srv.ChildEntities1 with @( UI.HeaderFacets : [ { $Type : 'UI.ReferenceFacet', @@ -60,10 +48,8 @@ annotate service.ChildEntities1 with @( ], ); -/** - UI.Facets - */ -annotate service.ChildEntities1 with @( +// UI.Facets +annotate srv.ChildEntities1 with @( UI.Facets : [ { $Type : 'UI.ReferenceFacet', @@ -73,10 +59,8 @@ annotate service.ChildEntities1 with @( ], ); -/** - UI.DataPoint - */ -annotate service.ChildEntities1 with @( +// UI.DataPoint +annotate srv.ChildEntities1 with @( UI.DataPoint #fieldWithPercent : { Value : fieldWithPerCent, Title : '{i18n>fieldWithPerCent}', @@ -84,10 +68,8 @@ annotate service.ChildEntities1 with @( }, ); -/** - UI.PresentationVariant - */ -annotate service.ChildEntities1 with @( +// UI.PresentationVariant +annotate srv.ChildEntities1 with @( UI.PresentationVariant : { SortOrder : [ { @@ -101,7 +83,7 @@ annotate service.ChildEntities1 with @( /** UI.SelectionVariant */ -annotate service.ChildEntities1 with @( +annotate srv.ChildEntities1 with @( //If more then 3 variants are enabled, they are displayed as a dropdown menu UI.SelectionVariant #variant1 : { Text : '{i18n>variant1ChildEntities1}', diff --git a/app/featureShowcase/layouts_ChildEntities2.cds b/app/listreport-objectpage/layouts_ChildEntities2.cds similarity index 69% rename from app/featureShowcase/layouts_ChildEntities2.cds rename to app/listreport-objectpage/layouts_ChildEntities2.cds index a65a59b..4fd52ca 100644 --- a/app/featureShowcase/layouts_ChildEntities2.cds +++ b/app/listreport-objectpage/layouts_ChildEntities2.cds @@ -1,9 +1,7 @@ -using service1 as service from '../../srv/service'; +using LROPODataService as srv from '../../srv/list-report-srv'; -/** - UI.FieldGroup - */ -annotate service1.ChildEntities2 with @( +// UI.FieldGroup +annotate srv.ChildEntities2 with @( UI.FieldGroup #data : { Data : [ {Value : stringProperty, @Common.FieldControl : #ReadOnly}, @@ -16,11 +14,9 @@ annotate service1.ChildEntities2 with @( country @Common.Text : country.name @Common.TextArrangement #TextFirst; }; -/** - UI.HeaderInfo - Search-Term: #QuickView - */ -annotate service1.ChildEntities2 with @( +// UI.HeaderInfo +// Search-Term: #QuickView +annotate srv.ChildEntities2 with @( //Header Info is also displayed in a quick view facet UI.HeaderInfo : { TypeName : '{i18n>ChildEntity2}', @@ -36,17 +32,18 @@ annotate service1.ChildEntities2 with @( ImageUrl : '', TypeImageUrl : 'sap-icon://blank-tag', }, + UI.LineItem : [ + { + Value : stringProperty + } + ] ); -/** - UI.QuickViewFacets - Search-Term: #QuickView - */ -annotate service1.ChildEntities2 with @( - /* - When a semantic object for the entity is defined, the related apps will be shown - below the quick view facet on the panel. - */ +// UI.QuickViewFacets +// Search-Term: #QuickView +annotate srv.ChildEntities2 with @( + // When a semantic object for the entity is defined, the related apps will be shown + // below the quick view facet on the panel. UI.QuickViewFacets : [ { $Type : 'UI.ReferenceFacet', diff --git a/app/featureShowcase/layouts_ChildEntities3.cds b/app/listreport-objectpage/layouts_ChildEntities3.cds similarity index 57% rename from app/featureShowcase/layouts_ChildEntities3.cds rename to app/listreport-objectpage/layouts_ChildEntities3.cds index 394a4eb..dec9c99 100644 --- a/app/featureShowcase/layouts_ChildEntities3.cds +++ b/app/listreport-objectpage/layouts_ChildEntities3.cds @@ -1,9 +1,9 @@ -using service1 as service from '../../srv/service'; +using LROPODataService as srv from '../../srv/list-report-srv'; /** UI.LineItem */ -annotate service1.ChildEntities3 with @( +annotate srv.ChildEntities3 with @( UI.LineItem : [ { $Type : 'UI.DataField', diff --git a/app/listreport-objectpage/layouts_GrandChildEntities.cds b/app/listreport-objectpage/layouts_GrandChildEntities.cds new file mode 100644 index 0000000..ae3f304 --- /dev/null +++ b/app/listreport-objectpage/layouts_GrandChildEntities.cds @@ -0,0 +1,11 @@ +using LROPODataService as srv from '../../srv/list-report-srv'; + +// UI.LineItem +annotate srv.GrandChildEntities with @( + UI.LineItem : [ + { + $Type : 'UI.DataField', + Value : field, + }, + ], +); \ No newline at end of file diff --git a/app/listreport-objectpage/layouts_OrganizationalUnits.cds b/app/listreport-objectpage/layouts_OrganizationalUnits.cds new file mode 100644 index 0000000..42f69c8 --- /dev/null +++ b/app/listreport-objectpage/layouts_OrganizationalUnits.cds @@ -0,0 +1,54 @@ +using LROPODataService as srv from '../../srv/list-report-srv'; + +annotate srv.OrganizationalUnits with @( + odata.draft.enabled, + UI.HeaderInfo : { + TypeName : '{i18n>OrganizationalUnit}', + TypeNamePlural : '{i18n>OrganizationalUnits}', + Title : { + Value: name + }, + Description : { + Value : externalId + }, + }, + UI.SelectionVariant #activeOrgUnits : { + Text : '{i18n>OrganizationalUnits}', + SelectOptions : [ + { + PropertyName : isActive, + Ranges : [ + { + Sign : #I, + Option : #EQ, + Low : true, + }, + ], + }, + ] + }, + UI.LineItem : [ + { + Value : externalId, + }, + { + Value : name, + }, + { + Value : category_code, + }, + { + Value : isActive, + }, + ], + UI.FieldGroup #creationDialog : { + Data : [ + { + Value : name, + }, + { + Value : description, + }, + ] + } +); \ No newline at end of file diff --git a/app/featureShowcase/layouts_RootEntities.cds b/app/listreport-objectpage/layouts_RootEntities.cds similarity index 85% rename from app/featureShowcase/layouts_RootEntities.cds rename to app/listreport-objectpage/layouts_RootEntities.cds index 6f7deaa..b77e852 100644 --- a/app/featureShowcase/layouts_RootEntities.cds +++ b/app/listreport-objectpage/layouts_RootEntities.cds @@ -1,21 +1,19 @@ -using service1 as service from '../../srv/service'; -using service1.ChartDataEntities as chartEntities from './layouts_ChartDataEntities'; -using service1.ChildEntities1 as childEntities1 from './layouts_ChildEntities1'; -using service1.ChildEntities2 as association2one from './layouts_ChildEntities2'; -using service1.ChildEntities3 as childEntities3 from './layouts_ChildEntities3'; -using service1.Contacts as contact from './layouts_contacts'; +using LROPODataService as srv from '../../srv/list-report-srv'; +using from './layouts_ChartDataEntities'; +using from './layouts_ChildEntities1'; +using from './layouts_ChildEntities2'; +using from './layouts_ChildEntities3'; +using from './layouts_contacts'; -/** - UI.Identification (Actions on Object Page) & Semantic Key - */ -annotate service.RootEntities with @( +// UI.Identification (Actions on Object Page) & Semantic Key +annotate srv.RootEntities with @( //Search-Term: #SemanticKey Common.SemanticKey : [stringProperty], //field in bold, editing status displayed, when possible and it effects navigation UI.Identification : [ { //Search-Term: #OPHeaderAction $Type : 'UI.DataFieldForAction', //Action in the RootEntities of the object page next to the edit button - Action : 'service1.changeCriticality', + Action : 'LROPODataService.changeCriticality', Label : '{i18n>changeCriticality}', Criticality : criticality_code, //Only 0,1,3 supported CriticalityRepresentation : #WithIcon, //Has no effect @@ -23,7 +21,7 @@ annotate service.RootEntities with @( { //Search-Term: #DeterminingAction $Type : 'UI.DataFieldForAction', - Action : 'service1.changeCriticality', + Action : 'LROPODataService.changeCriticality', Label : '{i18n>changeCriticality}', Determining : true, //The Action is in the footer of the object page Criticality : criticality_code, //Only 0,1,3 supported @@ -33,26 +31,24 @@ annotate service.RootEntities with @( ); -/** - UI.LineItem - */ -annotate service.RootEntities with @( +// UI.LineItem +annotate srv.RootEntities with @( UI.LineItem : [ { //Search-Term: #Image $Type : 'UI.DataField', Value : imageUrl, - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { $Type : 'UI.DataField', Value : stringProperty, - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { $Type : 'UI.DataField', Value : fieldWithPrice, - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { //Search-Term: #ToolTip @@ -63,42 +59,42 @@ annotate service.RootEntities with @( { $Type : 'UI.DataField', Value : fieldWithUoM, - ![@UI.Importance] : #Low, + @UI.Importance : #Low, }, { $Type : 'UI.DataField', Value : fieldWithCriticality, Criticality : criticality_code, //Supported values 0,1,2,3,5 CriticalityRepresentation : #WithIcon, - ![@UI.Importance] : #Low, + @UI.Importance : #Low, }, { //Search-Term: #ProgressIndicator $Type : 'UI.DataFieldForAnnotation', //Added progress indicator to table Label : '{i18n>progressIndicator}', Target : '@UI.DataPoint#progressIndicator', - ![@UI.Importance] : #Low, + @UI.Importance : #Low, }, { //Search-Term: #RatingIndicator $Type : 'UI.DataFieldForAnnotation', //Added rating indicator to table Label : '{i18n>ratingIndicator}', Target : '@UI.DataPoint#ratingIndicator', - ![@UI.Importance] : #Low, + @UI.Importance : #Low, }, { //Search-Term: #MicroChart $Type : 'UI.DataFieldForAnnotation', Label : '{i18n>bulletChart}', Target : '@UI.Chart#bulletChart', - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { //Search-Term: #QuickView $Type : 'UI.DataField', Value : association2one_ID, Label : '{i18n>ChildEntity2}', - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { //Displaying field Group as Line Item - Adding multiple fields as one column @@ -106,7 +102,7 @@ annotate service.RootEntities with @( $Type : 'UI.DataFieldForAnnotation', Target : '@UI.FieldGroup#AdminData', Label : '{i18n>adminData}', - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { //Search-Term: #MicroChart @@ -124,15 +120,15 @@ annotate service.RootEntities with @( { //Action button in the table toolbar $Type : 'UI.DataFieldForAction', - Action : 'service1.changeCriticality', //Reference to the action of the CAP service + Action : 'LROPODataService.changeCriticality', //Reference to the action of the CAP service Label : '{i18n>changeCriticality}', }, { //Action as a column of the table //Icons only supported for inline actions / intend based navigation $Type : 'UI.DataFieldForAction', - Action : 'service1.changeProgress', - Label : '{i18n>changeProgess}', + Action : 'LROPODataService.changeProgress', + Label : '{i18n>changeProgress}', IconUrl : 'sap-icon://command-line-interfaces', Inline : true, }, @@ -153,21 +149,21 @@ annotate service.RootEntities with @( SemanticObjectProperty : 'integerProperty', }, ], - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { $Type : 'UI.DataFieldForAction', - Action : 'service1.EntityContainer/unboundAction', //Unbound actions need to be referenced through the entity container (Action import) + Action : 'LROPODataService.EntityContainer/unboundAction', //Unbound actions need to be referenced through the entity container (Action import) Label : '{i18n>unboundAction}', }, { $Type : 'UI.DataFieldForAction', - Action : 'service1.EntityContainer/criticalAction', //Unbound actions need to be referenced through the entity container (Action import) + Action : 'LROPODataService.EntityContainer/criticalAction', //Unbound actions need to be referenced through the entity container (Action import) Label : '{i18n>criticalAction}', }, { $Type : 'UI.DataFieldForAction', - Action : 'service1.resetEntities(service1.RootEntities)', //Static action + Action : 'srv.resetEntities(srv.RootEntities)', //Static action Label : '{i18n>resetEntities}', }, { @@ -176,43 +172,39 @@ annotate service.RootEntities with @( Url : fieldWithURL, //Target, when pressing the text Value : fieldWithURLtext, //Visible text Label : '{i18n>dataFieldWithURL}', - ![@UI.Importance] : #Medium, + @UI.Importance : #Medium, }, ], //Search-Term: #LineItemHighlight UI.LineItem.@UI.Criticality : criticality_code, // Annotation, so that the row has a criticality - /** - Used in Selection Presentation Variant - */ + // Used in Selection Presentation Variant UI.LineItem #simplified : [ { $Type : 'UI.DataField', Value : stringProperty, - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { $Type : 'UI.DataField', Value : fieldWithPrice, - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { $Type : 'UI.DataField', Value : fieldWithUoM, - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { $Type : 'UI.DataField', Value : fieldWithCriticality, Criticality : criticality_code, - ![@UI.Importance] : #High, + @UI.Importance : #High, }, ], ); -/** - UI.FieldGroup - */ -annotate service.RootEntities with @( +// UI.FieldGroup +annotate srv.RootEntities with @( UI.FieldGroup #AdminData : { Data : [ {Value : createdAt}, @@ -248,19 +240,19 @@ annotate service.RootEntities with @( SemanticObjectProperty : 'integerProperty', }, ], - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { //Action for the field group. Visible in the upper right corner of the section $Type : 'UI.DataFieldForAction', - Action : 'service1.EntityContainer/unboundAction', + Action : 'LROPODataService.EntityContainer/unboundAction', Label : '{i18n>formActionEmphasized}', - ![@UI.Emphasized] : true, //Button is highlighted + @UI.Emphasized : true, //Button is highlighted }, { //Action for the field group. Visible in the upper right corner of the form $Type : 'UI.DataFieldForAction', - Action : 'service1.changeProgress', + Action : 'LROPODataService.changeProgress', Label : '{i18n>formAction}', Inline : true, //Action in the Form toolbar instead of the section toolbar }, @@ -272,9 +264,7 @@ annotate service.RootEntities with @( ] }, - /** - Search-Term: #Form - */ + // Search-Term: #Form UI.FieldGroup #ShowWhenInEdit : { Data : [ {Value : stringProperty}, @@ -300,9 +290,7 @@ annotate service.RootEntities with @( {Value : sumTargetValue}, ] }, - /** - Search-Term: #HeaderFieldGroup - */ + // Search-Term: #HeaderFieldGroup UI.FieldGroup #HeaderData : { Data : [ {Value : stringProperty}, @@ -310,7 +298,7 @@ annotate service.RootEntities with @( {Value : fieldWithUoM}, {Value : association2one_ID}, //Displaying a quick view facet { - //Displaying a contect card + //Displaying a contact card $Type : 'UI.DataFieldForAnnotation', Target : 'contact/@Communication.Contact', Label : '{i18n>contact}', @@ -334,9 +322,7 @@ annotate service.RootEntities with @( {Value : telephone} ] }, - /** - Displaying Date, Time or TimeStamp values is done by SAP Fiori elements out of the Box - */ + // Displaying Date, Time or TimeStamp values is done by SAP Fiori elements out of the Box UI.FieldGroup #timeAndDate : { Data : [ {Value : validTo}, @@ -344,9 +330,7 @@ annotate service.RootEntities with @( {Value : timeStamp} ] }, - /** - Search-Term: #PlainText - */ + // Search-Term: #PlainText UI.FieldGroup #plainText : { Data : [ {Value : description} @@ -354,11 +338,9 @@ annotate service.RootEntities with @( }, ); -/** - UI.ConnectedFields - Search-Term: #ConnectedFields - */ -annotate service.RootEntities with @( +// UI.ConnectedFields +// Search-Term: #ConnectedFields +annotate srv.RootEntities with @( //Connected Fields only possible for sections on object pages //Wont render in tables and not possible in RootEntities sections UI.ConnectedFields #ConnectedDates : { @@ -377,11 +359,9 @@ annotate service.RootEntities with @( }, ); -/** - UI.HeaderInfo - Search-Term: #HeaderInfo - */ -annotate service.RootEntities with @( +// UI.HeaderInfo +// Search-Term: #HeaderInfo +annotate srv.RootEntities with @( UI.HeaderInfo :{ TypeName : '{i18n>RootEntities}', TypeNamePlural : '{i18n>RootEntities.typeNamePlural}', @@ -399,11 +379,9 @@ annotate service.RootEntities with @( }, ); -/** - UI.HeaderFacets - Search-Term: #HeaderFacets - */ -annotate service.RootEntities with @( +// UI.HeaderFacets +// Search-Term: #HeaderFacets +annotate srv.RootEntities with @( UI.HeaderFacets : [ { $Type : 'UI.ReferenceFacet', @@ -494,11 +472,9 @@ annotate service.RootEntities with @( ], ); -/** - UI.Facets - Search-Term: #OPContentArea - */ -annotate service.RootEntities with @( +// UI.Facets +// Search-Term: #OPContentArea +annotate srv.RootEntities with @( UI.Facets : [ { $Type : 'UI.CollectionFacet', @@ -533,7 +509,7 @@ annotate service.RootEntities with @( $Type : 'UI.ReferenceFacet', Target : '@UI.FieldGroup#ShowWhenInEdit', Label : '{i18n>showWhenInEdit}', - ![@UI.Hidden] : IsActiveEntity, + @UI.Hidden : IsActiveEntity, }, { $Type : 'UI.CollectionFacet', @@ -550,7 +526,7 @@ annotate service.RootEntities with @( Target : '@UI.FieldGroup#advancedChartData', ID : 'advancedChartData', //Search-Term: #InboundNav //Used for RootEntities facet navigation Label : '{i18n>advancedChartData}', - ![@UI.PartOfPreview] : false //Hides the section beneath a Show More Button + @UI.PartOfPreview : false //Hides the section beneath a Show More Button }, ], }, @@ -565,7 +541,7 @@ annotate service.RootEntities with @( $Type : 'UI.ReferenceFacet', Target : 'association2one/@UI.FieldGroup#data', Label : '{i18n>ChildEntity2}', - @UI.Hidden : {$edmJson: {$Not: {$Path : 'IsActiveEntity'}}} + @UI.Hidden : (not $draft.IsActiveEntity) }, { $Type : 'UI.ReferenceFacet', @@ -586,11 +562,9 @@ annotate service.RootEntities with @( ], ); -/** - UI.PresentationVariant - Search-Term: #DefaultSort - */ -annotate service.RootEntities with @( +// UI.PresentationVariant +// Search-Term: #DefaultSort +annotate srv.RootEntities with @( UI.PresentationVariant : { SortOrder : [ //Default sort order { @@ -602,11 +576,9 @@ annotate service.RootEntities with @( }, ); -/** - UI.FilterFacets - Search-Term: #FilterGrouping - */ -annotate service.RootEntities with @( +// UI.FilterFacets +// Search-Term: #FilterGrouping +annotate srv.RootEntities with @( //Custom groups, when selecting filter fields UI.FilterFacets : [ { @@ -620,11 +592,9 @@ annotate service.RootEntities with @( ], ); -/** - UI.SelectionFields - Search-Term: #VisibleFilters - */ -annotate service.RootEntities with @( +// UI.SelectionFields +// Search-Term: #VisibleFilters +annotate srv.RootEntities with @( //Shown filters for the given fields after opening the application UI.SelectionFields : [ stringProperty, @@ -633,11 +603,9 @@ annotate service.RootEntities with @( ], ); -/** - UI.SelectionVariant - Search-Terms: #multipleViews, #SVariant - */ -annotate service.RootEntities with @( +// UI.SelectionVariant +// Search-Terms: #multipleViews, #SVariant +annotate srv.RootEntities with @( UI.SelectionVariant #variant1 : { Text : '{i18n>SVariant1}', SelectOptions : [ //Filtering of entity sets @@ -671,11 +639,9 @@ annotate service.RootEntities with @( }, ); -/** - UI.SelectionPresentationVariant - Search-Terms: #multipleViews, #SPVariant - */ -annotate service.RootEntities with @( +// UI.SelectionPresentationVariant +// Search-Terms: #multipleViews, #SPVariant +annotate srv.RootEntities with @( UI.SelectionPresentationVariant #SelectionPresentationVariant : { Text : '{i18n>SelectionPresentationVariant}', SelectionVariant : { //Filtering of entities @@ -705,11 +671,9 @@ annotate service.RootEntities with @( }, ); -/** - UI.DataPoint - Search-Term: #DataPoint - */ -annotate service.RootEntities with @( +// UI.DataPoint +// Search-Term: #DataPoint +annotate srv.RootEntities with @( UI.DataPoint #progressIndicator : { //Search-Term: #ProgressIndicator Value : integerValue, @@ -724,7 +688,7 @@ annotate service.RootEntities with @( TargetValue : 4, //Max amount of stars Visualization : #Rating, Title : '{i18n>ratingIndicator}', - ![@Common.QuickInfo] : 'Tooltip via Common.QuickInfo', + @Common.QuickInfo : 'Tooltip via Common.QuickInfo', }, UI.DataPoint #bulletChart : { //Search-Terms: #MicroChart, #microChartBullet @@ -754,14 +718,12 @@ annotate service.RootEntities with @( UI.DataPoint #fieldWithTooltip : { //Search-Term: #ToolTip Value : dimensions, - ![@Common.QuickInfo] : '{i18n>Tooltip}', //Can also be a dynamic property path + @Common.QuickInfo : '{i18n>toolTip}', //Can also be a dynamic property path }, ); -/** - UI.Chart - */ -annotate service.RootEntities with @( +/// UI.Chart +annotate srv.RootEntities with @( UI.Chart #bulletChart : { //Search-Terms: #MicroChart, #microChartBullet Title : '{i18n>bulletChart}', diff --git a/app/featureShowcase/layouts_RootEntityVariants.cds b/app/listreport-objectpage/layouts_RootEntityVariants.cds similarity index 84% rename from app/featureShowcase/layouts_RootEntityVariants.cds rename to app/listreport-objectpage/layouts_RootEntityVariants.cds index bf16c04..6d9879c 100644 --- a/app/featureShowcase/layouts_RootEntityVariants.cds +++ b/app/listreport-objectpage/layouts_RootEntityVariants.cds @@ -1,39 +1,35 @@ -using service1 as service from '../../srv/service'; +using LROPODataService as srv from '../../srv/list-report-srv'; -/** - UI.LineItem - */ -annotate service1.RootEntityVariants with @( +// UI.LineItem +annotate srv.RootEntityVariants with @( UI.LineItem : [ { $Type : 'UI.DataField', Value : stringProperty, - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { $Type : 'UI.DataField', Value : fieldWithPrice, - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { $Type : 'UI.DataField', Value : fieldWithUoM, - ![@UI.Importance] : #High, + @UI.Importance : #High, }, { $Type : 'UI.DataField', Value : fieldWithCriticality, Criticality : criticality_code, CriticalityRepresentation : #WithIcon, - ![@UI.Importance] : #High, + @UI.Importance : #High, }, ], ); -/** - UI.SelectionVariant - */ -annotate service1.RootEntityVariants with @( +// UI.SelectionVariant +annotate srv.RootEntityVariants with @( UI.SelectionVariant #variant3 : { Text : '{i18n>variant3RootEntityVariants}', SelectOptions : [ @@ -83,12 +79,10 @@ annotate service1.RootEntityVariants with @( }, ); -/** - UI.SelectionPresentationVariant - */ -annotate service1.RootEntityVariants with @( +// UI.SelectionPresentationVariant +annotate srv.RootEntityVariants with @( UI.SelectionPresentationVariant #SelectionPresentationVariant : { - Text : '{i18n>SPV for RootEntityVariants}', + Text : '{i18n>variant3RootEntityVariants}', SelectionVariant : { SelectOptions : [ { diff --git a/app/featureShowcase/layouts_contacts.cds b/app/listreport-objectpage/layouts_contacts.cds similarity index 84% rename from app/featureShowcase/layouts_contacts.cds rename to app/listreport-objectpage/layouts_contacts.cds index 6369488..4e8bb22 100644 --- a/app/featureShowcase/layouts_contacts.cds +++ b/app/listreport-objectpage/layouts_contacts.cds @@ -1,10 +1,8 @@ -using service1 as service from '../../srv/service'; +using LROPODataService as srv from '../../srv/list-report-srv'; -/** - Communication - Search-Term: #Contact - */ -annotate service1.Contacts with @( +// Communication +// Search-Term: #Contact +annotate srv.Contacts with @( Communication.Contact : { fn : name, //full name kind : #org, diff --git a/app/listreport-objectpage/package.json b/app/listreport-objectpage/package.json new file mode 100644 index 0000000..2c47f93 --- /dev/null +++ b/app/listreport-objectpage/package.json @@ -0,0 +1,29 @@ +{ + "name": "sap.fe.showcase.lrop", + "version": "0.0.1", + "description": "A SAP Fiori application.", + "keywords": [ + "ui5", + "openui5", + "sapui5" + ], + "main": "webapp/index.html", + "scripts": { + "deploy-config": "npx -p @sap/ux-ui5-tooling fiori add deploy-config cf" + }, + "devDependencies": { + "@sap/ux-specification": "UI5-1.93", + "@sap/ux-ui5-tooling": "^1.14.3", + "@sapui5/types": "~1.140.0", + "@ui5/cli": "^4.0.0", + "typescript": "^5.1.6", + "ui5-task-zipper": "^3.4.1", + "ui5-tooling-transpile": "^3.7.5" + }, + "ui5": { + "dependencies": [ + "ui5-task-zipper", + "mbt" + ] + } +} \ No newline at end of file diff --git a/app/listreport-objectpage/tsconfig.json b/app/listreport-objectpage/tsconfig.json new file mode 100644 index 0000000..be7e95c --- /dev/null +++ b/app/listreport-objectpage/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es2022", + "module": "es2022", + "skipLibCheck": true, + "allowJs": true, + "strict": true, + "strictPropertyInitialization": false, + "moduleResolution": "node", + "rootDir": "../../", + "outDir": "./dist", + "baseUrl": "./", + "paths": { + "sap/fe/showcase/lrop/*": ["./webapp/*"], + "#cds-models/*": ["../../@cds-models/*/index.ts"] + }, + "typeRoots": [ + "./node_modules/@types", + "./node_modules/@sapui5/types", + "../../node_modules/@types", + "../../node_modules/@sapui5/types" + ] + }, + "include": ["./webapp/**/*", "../ControllerExtension.d.ts"], + "exclude": ["node_modules/**"] +} diff --git a/app/listreport-objectpage/ui5.yaml b/app/listreport-objectpage/ui5.yaml new file mode 100644 index 0000000..dc86405 --- /dev/null +++ b/app/listreport-objectpage/ui5.yaml @@ -0,0 +1,39 @@ +# yaml-language-server: $schema=https://sap.github.io/ui5-tooling/schema/ui5.yaml.json + +specVersion: '4.0' +metadata: + name: sap.fe.showcase.lrop +type: application +server: + customMiddleware: + - name: fiori-tools-proxy + afterMiddleware: compression + configuration: + ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted + ui5: + path: + - /resources + - /test-resources + url: https://sapui5.hana.ondemand.com + - name: fiori-tools-appreload + afterMiddleware: compression + configuration: + port: 35729 + path: webapp + delay: 300 + - name: ui5-tooling-transpile-middleware + afterMiddleware: compression + configuration: + debug: true + transformModulesToUI5: + overridesToOverride: true + excludePatterns: + - /Component-preload.js +builder: + customTasks: + - name: ui5-tooling-transpile-task + afterTask: replaceVersion + configuration: + debug: true + transformModulesToUI5: + overridesToOverride: true diff --git a/app/featureShowcase/value-helps.cds b/app/listreport-objectpage/value-helps.cds similarity index 95% rename from app/featureShowcase/value-helps.cds rename to app/listreport-objectpage/value-helps.cds index c5585b6..d93e633 100644 --- a/app/featureShowcase/value-helps.cds +++ b/app/listreport-objectpage/value-helps.cds @@ -1,4 +1,4 @@ -using { sap.fe.featureShowcase as schema } from '../../db/schema'; +using { sap.fe.showcase as schema } from '../../db/schema'; // // annotations for value helps @@ -29,7 +29,7 @@ annotate schema.RootEntities with{ Text : contact.name, TextArrangement : #TextOnly, ValueList : { - Label : '{i18n>customer}', //Title of the value help dialog + Label : '{i18n>contact}', //Title of the value help dialog CollectionPath : 'Contacts', //Entities of the value help. Refers to an entity name from the CAP service Parameters : [ { @@ -86,7 +86,7 @@ annotate schema.RootEntities with{ TextArrangement : #TextFirst, ValueListWithFixedValues: true, ValueList : { - Label : '{i18n>Region}', + Label : '{i18n>region}', CollectionPath : 'Regions', Parameters : [ { @@ -122,7 +122,7 @@ annotate schema.AssignedRegions with { TextArrangement : #TextFirst, ValueListWithFixedValues: true, ValueList : { - Label : '{i18n>Region}', + Label : '{i18n>region}', CollectionPath : 'Regions', Parameters : [ { diff --git a/app/listreport-objectpage/webapp/Component.ts b/app/listreport-objectpage/webapp/Component.ts new file mode 100644 index 0000000..f2b8f7c --- /dev/null +++ b/app/listreport-objectpage/webapp/Component.ts @@ -0,0 +1,10 @@ +import AppComponent from 'sap/fe/core/AppComponent'; + +/** + * @namespace sap.fe.showcase.lrop + */ +export default class Component extends AppComponent { + public static metadata = { + manifest: 'json', + }; +} diff --git a/app/featureShowcase/webapp/ext/CustomController.js b/app/listreport-objectpage/webapp/ext/controller/CustomController.js similarity index 80% rename from app/featureShowcase/webapp/ext/CustomController.js rename to app/listreport-objectpage/webapp/ext/controller/CustomController.js index 674443b..6650202 100644 --- a/app/featureShowcase/webapp/ext/CustomController.js +++ b/app/listreport-objectpage/webapp/ext/controller/CustomController.js @@ -4,24 +4,11 @@ sap.ui.define([ "use strict"; return { - //Search-Term: #EditFlowAPI - 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 - }, - //Function for Micro Process Flow in Custom Column itemPressColumn: function(oEvent) { const oPopover = itemPress(oEvent); - const thisHelp = this; - const closeSideContent = function() { - thisHelp.showSideContent("childEntities1Section",false); + const closeSideContent = () => { + this.showSideContent("childEntities1Section",false); }; oPopover.attachBeforeClose(closeSideContent); diff --git a/app/listreport-objectpage/webapp/ext/controller/CustomObjectPage.controller.ts b/app/listreport-objectpage/webapp/ext/controller/CustomObjectPage.controller.ts new file mode 100644 index 0000000..e48228a --- /dev/null +++ b/app/listreport-objectpage/webapp/ext/controller/CustomObjectPage.controller.ts @@ -0,0 +1,85 @@ +import PageController from 'sap/fe/core/PageController'; +import { Button$PressEvent } from 'sap/m/Button'; +import Graph from 'sap/suite/ui/commons/networkgraph/Graph'; +import Node from 'sap/suite/ui/commons/networkgraph/Node'; +import ComparisonMicroChart from 'sap/suite/ui/microchart/ComparisonMicroChart'; +import ComparisonMicroChartData from 'sap/suite/ui/microchart/ComparisonMicroChartData'; +import JSONModel from 'sap/ui/model/json/JSONModel'; + +/** + * @namespace sap.fe.showcase.lrop.ext.controller + * @controller + */ +export default class CustomObjectPage extends PageController { + private _modelSettings: JSONModel + onInit () { + PageController.prototype.onInit.apply(this); + + const model = new JSONModel(sap.ui.require.toUrl("sap/fe/showcase/lrop/ext/controller/data.json")); + + this.getView()?.setModel(model, 'graph'); + + this._modelSettings = new JSONModel({ + source: "atomicCircle", + orientation: "LeftRight", + arrowPosition: "End", + arrowOrientation: "ParentOf", + nodeSpacing: 55, + mergeEdges: false + }); + + this.getView()?.setModel(this._modelSettings, "settings"); + + const fnSetContent = function (node: Node) { + node.setContent(new ComparisonMicroChart({ + size: "M", + scale: "M", + data: [ + new ComparisonMicroChartData({ + title: "USA", + value: Math.floor(Math.random() * 60), + color: "Neutral" + }), + new ComparisonMicroChartData({ + title: "EMEA", + value: Math.floor(Math.random() * 60), + color: "Error" + }), + new ComparisonMicroChartData({ + title: "APAC", + value: -20, + color: "Good" + }), + new ComparisonMicroChartData({ + title: "LTA", + value: Math.floor(Math.random() * 60) * -1, + color: "Critical" + }), + new ComparisonMicroChartData({ + title: "ALPS", + value: Math.floor(Math.random() * 20), + color: "Good" + }) + ] + }).addStyleClass("sapUiSmallMargin")); + + }; + + model.attachRequestCompleted(() => { + (this.byId("graph") as Graph).getNodes().forEach(function (node) { + if (node.getKey() === "21" || node.getKey() === "18") { + fnSetContent(node); + } + }); + }); + } + onAfterRendering () { + this.byId("graphWrapper")?.$().css("overflow-y", "auto"); + } + mergeChanged (oEvent: Button$PressEvent) { + this._modelSettings.setProperty("/mergeEdges", !!Number(oEvent.getSource().getProperty("selectedKey"))); + } + spacingChanged (oEvent: Button$PressEvent) { + this._modelSettings.setProperty("/nodeSpacing", Number(oEvent.getSource().getProperty("selectedKey"))); + } +} \ No newline at end of file diff --git a/app/listreport-objectpage/webapp/ext/controller/RootEntityLRExtension.controller.ts b/app/listreport-objectpage/webapp/ext/controller/RootEntityLRExtension.controller.ts new file mode 100644 index 0000000..c887e83 --- /dev/null +++ b/app/listreport-objectpage/webapp/ext/controller/RootEntityLRExtension.controller.ts @@ -0,0 +1,76 @@ +import ExtensionAPI from 'sap/fe/templates/ListReport/ExtensionAPI'; +import { Button$PressEvent } from 'sap/m/Button'; +import MessageBox from 'sap/m/MessageBox'; +import ControllerExtension from 'sap/ui/core/mvc/ControllerExtension'; +import Context from 'sap/ui/model/odata/v4/Context'; +import ODataContextBinding from 'sap/ui/model/odata/v4/ODataContextBinding'; + +/** + * @namespace sap.fe.showcase.lrop.ext.controller + * @controller + */ +export default class RootEntityLRExtension extends ControllerExtension { + messageBox() { + MessageBox.alert("Button pressed"); + } + enabled() { + return true; + } + enabledForSingleSelect(_: ODataContextBinding, aSelectedContexts: [Context]) { + if (aSelectedContexts && aSelectedContexts.length === 1) { + return true; + } + return false; + } + + onResetRating(_: Button$PressEvent) { + // @ts-expect-error setFilterValues exists but not defined in Type + this.setFilterValues("starsValue"); + } + + isCreateEnabled(value: String, parentContext?: Context) { + switch (parentContext?.getProperty("category_code")) { + case "03": + return value === "02"; // Only Divisions under Business Units + case "02": + return value === "01"; // Only Departments under Divisions + case "01": + return false; // Nothing under Departments + default: + return value === "03"; // Only Business Units at root level + } + } + + isMoveToPositionAllowed(sourceContext: Context, parentContext?: Context) { + switch (parentContext?.getProperty("category_code")) { + case "03": + return sourceContext?.getProperty("category_code") === "02"; + case "02": + return sourceContext?.getProperty("category_code") === "01"; + case "01": + return false; // Nothing under Departments + default: + return false; + } + } + isNodeMovable(sourceContext: Context) { + // Keep in mind getProperty does only return loaded property & + // that via personalisation a user could hide properties assumed to exist + return sourceContext.getProperty('name') !== 'Compilance'; + } + isNodeCopyable(sourceContext: Context) { + return sourceContext.getProperty('name') !== 'Compilance'; + } + isCopyToPositionAllowed(sourceContext: Context, parentContext?: Context) { + switch (parentContext?.getProperty("category_code")) { + case "03": + return sourceContext?.getProperty("category_code") === "02" || sourceContext?.getProperty("category_code") === "01"; + case "02": + return sourceContext?.getProperty("category_code") === "01"; + case "01": + return false; // Nothing under Departments + default: + return false; + } + } +} diff --git a/app/listreport-objectpage/webapp/ext/controller/RootEntityOPExtension.controller.ts b/app/listreport-objectpage/webapp/ext/controller/RootEntityOPExtension.controller.ts new file mode 100644 index 0000000..ec21685 --- /dev/null +++ b/app/listreport-objectpage/webapp/ext/controller/RootEntityOPExtension.controller.ts @@ -0,0 +1,48 @@ +import ExtensionAPI from 'sap/fe/templates/ObjectPage/ExtensionAPI'; +import { Button$PressEvent } from 'sap/m/Button'; +import MessageBox from 'sap/m/MessageBox'; +import Controller from 'sap/ui/core/mvc/Controller'; +import ControllerExtension, { Overrides } from 'sap/ui/core/mvc/ControllerExtension'; +import Context from 'sap/ui/model/Context'; +import ODataContextBinding from 'sap/ui/model/odata/v2/ODataContextBinding'; + +/** + * @namespace sap.fe.showcase.lrop.ext.controller + * @controller + */ +export default class RootEntityOPExtension extends ControllerExtension { + messageBox() { + MessageBox.alert("Button pressed"); + } + enabled() { + return true; + } + enabledForSingleSelect(_: ODataContextBinding, aSelectedContexts: [Context]) { + if (aSelectedContexts && aSelectedContexts.length === 1) { + return true; + } + return false; + } + + toggleSideContent(_: ODataContextBinding) { + // @ts-expect-error showSideContent not yet defined in type but exists + this.showSideContent("customSectionQualifier"); + } + toggleSideContentItem1(_: ODataContextBinding) { + // @ts-expect-error showSideContent not yet defined in type but exists + this.showSideContent("childEntities1Section"); + } + + //Search-Term: #EditFlowAPI + onChangeCriticality(oEvent: Button$PressEvent) { + const sActionName = "LROPODataService.changeCriticality"; + const mParameters = { + contexts: oEvent.getSource().getBindingContext(), + model: oEvent.getSource().getModel(), + label: 'Confirm', + invocationGrouping: true + }; + // @ts-expect-error editFlow not yet defined in type but exists + this.editFlow.invokeAction(sActionName, mParameters); //SAP Fiori elements EditFlow API + } +} diff --git a/app/featureShowcase/webapp/ext/controller/data.json b/app/listreport-objectpage/webapp/ext/controller/data.json similarity index 100% rename from app/featureShowcase/webapp/ext/controller/data.json rename to app/listreport-objectpage/webapp/ext/controller/data.json diff --git a/app/featureShowcase/webapp/ext/CustomColumn-DateRangeLR.fragment.xml b/app/listreport-objectpage/webapp/ext/fragment/listreport/CustomColumn-DateRange.fragment.xml similarity index 100% rename from app/featureShowcase/webapp/ext/CustomColumn-DateRangeLR.fragment.xml rename to app/listreport-objectpage/webapp/ext/fragment/listreport/CustomColumn-DateRange.fragment.xml diff --git a/app/featureShowcase/webapp/ext/CustomFilter-Rating.fragment.xml b/app/listreport-objectpage/webapp/ext/fragment/listreport/CustomFilter-Rating.fragment.xml similarity index 68% rename from app/featureShowcase/webapp/ext/CustomFilter-Rating.fragment.xml rename to app/listreport-objectpage/webapp/ext/fragment/listreport/CustomFilter-Rating.fragment.xml index aebb119..3b4370c 100644 --- a/app/featureShowcase/webapp/ext/CustomFilter-Rating.fragment.xml +++ b/app/listreport-objectpage/webapp/ext/fragment/listreport/CustomFilter-Rating.fragment.xml @@ -1,11 +1,11 @@ - + - + diff --git a/app/featureShowcase/webapp/ext/CustomColumn-ProcessFlow.fragment.xml b/app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomColumn-ProcessFlow.fragment.xml similarity index 94% rename from app/featureShowcase/webapp/ext/CustomColumn-ProcessFlow.fragment.xml rename to app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomColumn-ProcessFlow.fragment.xml index 50353dc..e6f98d5 100644 --- a/app/featureShowcase/webapp/ext/CustomColumn-ProcessFlow.fragment.xml +++ b/app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomColumn-ProcessFlow.fragment.xml @@ -1,5 +1,5 @@ - + diff --git a/app/featureShowcase/webapp/ext/CustomField-DatePicker.fragment.xml b/app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomField-DatePicker.fragment.xml similarity index 100% rename from app/featureShowcase/webapp/ext/CustomField-DatePicker.fragment.xml rename to app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomField-DatePicker.fragment.xml diff --git a/app/featureShowcase/webapp/ext/CustomField-DateRange.fragment.xml b/app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomField-DateRange.fragment.xml similarity index 100% rename from app/featureShowcase/webapp/ext/CustomField-DateRange.fragment.xml rename to app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomField-DateRange.fragment.xml diff --git a/app/featureShowcase/webapp/ext/CustomHeaderFacet-Edit.fragment.xml b/app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomHeaderFacet-Edit.fragment.xml similarity index 100% rename from app/featureShowcase/webapp/ext/CustomHeaderFacet-Edit.fragment.xml rename to app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomHeaderFacet-Edit.fragment.xml diff --git a/app/featureShowcase/webapp/ext/CustomHeaderFacet-ProcessFlow.fragment.xml b/app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomHeaderFacet-ProcessFlow.fragment.xml similarity index 94% rename from app/featureShowcase/webapp/ext/CustomHeaderFacet-ProcessFlow.fragment.xml rename to app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomHeaderFacet-ProcessFlow.fragment.xml index 5886237..24a650c 100644 --- a/app/featureShowcase/webapp/ext/CustomHeaderFacet-ProcessFlow.fragment.xml +++ b/app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomHeaderFacet-ProcessFlow.fragment.xml @@ -1,5 +1,5 @@ - + diff --git a/app/featureShowcase/webapp/ext/CustomSection.fragment.xml b/app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomSection.fragment.xml similarity index 66% rename from app/featureShowcase/webapp/ext/CustomSection.fragment.xml rename to app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomSection.fragment.xml index 5a0c2a7..02af7cb 100644 --- a/app/featureShowcase/webapp/ext/CustomSection.fragment.xml +++ b/app/listreport-objectpage/webapp/ext/fragment/objectpage/CustomSection.fragment.xml @@ -1,6 +1,6 @@ - -