Introducing UI5 Tooling for SAPUI5 Projects
UI5ers Buzz #51: UI5 Tooling 2.0: How to develop and run SAP Fiori elements locally!
npm install --global @ui5/clinpm install -g yo generator-easy-ovp-ui5
--
yo@AbapCatalog.sqlViewName: 'ZZTESTCINV'
@EndUserText.label: 'Test CDS View for Overview Page'
@Metadata.ignorePropogatedAnnotations: true
@AccessControl.authorizationCheck: #CHECK
@AccessControl.personalData.blocking: #REQUIRED
@ClientHandling.algorithm: #SESSION_VARIABLE
@AbapCatalog.compiler.compareFilter: true
@ObjectModel.usageType.serviceQuality: #X
@ObjectModel.usageType.sizeCategory: #XXL
@ObjectModel.usageType.dataClass: #MIXED
@VDM.viewType: #CONSUMPTION
@OData.publish: true
@UI.chart: [{
qualifier: 'LinesReason',
chartType: #COLUMN,
dimensions: ['CompanyCode'],
dimensionAttributes: [{
dimension: 'CompanyCode',
role: #CATEGORY
}],
measures: ['ConvertedAmount'],
measureAttributes: [{
measure: 'ConvertedAmount',
role: #AXIS_1
}]
},{
qualifier: 'Aging',
chartType: #COLUMN,
dimensions: ['Days1'],
dimensionAttributes: [{
dimension: 'Days1',
role: #CATEGORY
}],
measures: ['ConvertedAmount'],
measureAttributes: [{
measure: 'ConvertedAmount',
role: #AXIS_1
}]
}]
define view ZCDS_DDL_TEST_OVP
with parameters
@Consumption.hidden: true
@Environment.systemField: #SYSTEM_DATE
P_KeyDate : vdm_v_key_date,
@Consumption.hidden: true
@Environment.systemField: #SYSTEM_DATE
P_TodayDate : sydate,
@Consumption.hidden: true
@Environment.systemField: #SYSTEM_LANGUAGE
P_Language : sylangu,
@Consumption.defaultValue: 'EUR'
@Consumption.valueHelpDefinition: [{ entity:{ name: 'I_Currency', element: 'Currency' } }]
P_DisplayCurrency : vdm_v_display_currency
as select from P_BSEG_COM
{
@UI.selectionField.position:10
@Consumption.valueHelpDefinition: [{ entity:{ name: 'I_CompanyCodeVH', element: 'CompanyCode' }}]
key bukrs as CompanyCode,
@Consumption.filter.hidden: true
@Consumption.semanticObject: 'Supplier'
@UI.identification: {
importance: #HIGH,
type: #FOR_INTENT_BASED_NAVIGATION,
semanticObjectAction: 'manageLineItems'
}
key belnr as AccountingDocument,
@Consumption.filter.hidden: true
key gjahr as FiscalYear,
@Consumption.filter.hidden: true
key buzei as AccountingDocumentItem,
@Consumption.filter.hidden: true
cast('' as char20) as DataPeriodName,
@ObjectModel.text.element: 'ReasonName'
@UI.textArrangement: #TEXT_LAST
zlspr as Reason,
@Consumption.filter.hidden: true
@ObjectModel.text.element: 'DataPeriodName'
@UI.textArrangement: #TEXT_ONLY
@EndUserText.label: 'Days'
'#3:61-90' as Days1,
// ConvertedAmount,
@EndUserText.label: 'Amount in DC'
@DefaultAggregation:#SUM
@Semantics.amount.currencyCode: 'DisplayCurrency'
@UI.lineItem:[{
position: 10,
type: #AS_DATAPOINT
}]
@UI.dataPoint:{
valueFormat:{ numberOfFractionalDigits: 1 }
}
cast(
-cast(
currency_conversion(
amount => wrbtr_shl,
source_currency => h_waers,
target_currency => $parameters.P_DisplayCurrency,
exchange_rate_date => $parameters.P_TodayDate
) as farp_amount_display_crcy
) as farp_amount_display_crcy)
as ConvertedAmount,
$parameters.P_DisplayCurrency as DisplayCurrency,
@UI.selectionField.position:20
@Consumption.valueHelpDefinition: [{ entity:{ name: 'I_Supplier_VH', element: 'Supplier' } }]
lifnr as Supplier
} where wrbtr_shl<0

And register it via tcode : /IWFND/MAINT_SERVICE
1 mkdir ui5tooling
2 cd ui5toolingg
3 yo easy-ovp-ui5
#Enter module name and module namespace
#Enter CDS view name ( ZCDS_DDL_TEST_OVP )
#Enter Project description
cd <your_project_name>npm installcode .
specVersion: '1.0'
metadata:
name: SampleOVP
type: application
resources:
configuration:
propertiesFileSourceEncoding: UTF-8
builder:
customTasks:
- name: webide-extension-task-updateNeoApp
afterTask: generateVersionInfo
configuration:
destDir: dist
appFolder: webapp
nameSpace: com.my.org
- name: webide-extension-task-updateManifestJson
afterTask: webide-extension-task-updateNeoApp
configuration:
appFolder: webapp
destDir: dist
- name: webide-extension-task-lint
afterTask: webide-extension-task-updateManifestJson
configuration:
destDir: dist
appFolder: webapp
nameSpace: com.my.org
- name: webide-extension-task-resources
afterTask: webide-extension-task-lint
configuration:
nameSpace: com.my.orgnpm i ui5-middleware-simpleproxy --save-dev
{
"name": "SampleOVP",
"version": "0.0.2",
"description": "My OVP Page",
"devDependencies": {
"@sap/ui5-builder-webide-extension": "1.0.x",
"@ui5/cli": "1.13.0",
"ui5-middleware-simpleproxy": "0.2.2"
},
"scripts": {
"build": "ui5 build --clean-dest --include-task=generateManifestBundle generateCachebusterInfo"
},
"ui5": {
"dependencies": [
"@sap/ui5-builder-webide-extension",
"ui5-middleware-simpleproxy"
]
},
"private": "true",
"dependencies": {}
}
server:
customMiddleware:
- name: ui5-middleware-simpleproxy
afterMiddleware: compression
mountPath: /resources
configuration:
baseUri: "https://sapui5.hana.ondemand.com/1.76.0/resources/"
- name: ui5-middleware-simpleproxy
afterMiddleware: compression
mountPath: /sap
configuration:
baseUri: "http://<host>:<port>/sap/"specVersion: '1.0'
metadata:
name: SampleOVP
type: application
resources:
configuration:
propertiesFileSourceEncoding: UTF-8
builder:
customTasks:
- name: webide-extension-task-updateNeoApp
afterTask: generateVersionInfo
configuration:
destDir: dist
appFolder: webapp
nameSpace: com.my.org
- name: webide-extension-task-updateManifestJson
afterTask: webide-extension-task-updateNeoApp
configuration:
appFolder: webapp
destDir: dist
- name: webide-extension-task-lint
afterTask: webide-extension-task-updateManifestJson
configuration:
destDir: dist
appFolder: webapp
nameSpace: com.my.org
- name: webide-extension-task-resources
afterTask: webide-extension-task-lint
configuration:
nameSpace: com.my.org
server:
customMiddleware:
- name: ui5-middleware-simpleproxy
afterMiddleware: compression
mountPath: /resources
configuration:
baseUri: "https://sapui5.hana.ondemand.com/1.76.0/resources/"
- name: ui5-middleware-simpleproxy
afterMiddleware: compression
mountPath: /sap
configuration:
baseUri: "http://<host>:<port>/sap/"ui5 serve --port 8080 --open test/testOvp.html

{
"_version": "1.7.0",
"start_url": "start.html",
"sap.app": {
"id": "SampleOVP",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{app_title}}",
"description": "{{app_description}}",
"dataSources": {
"ZCDS_DDL_TEST_OVP_CDS": {
"uri": "/sap/opu/odata/sap/ZCDS_DDL_TEST_OVP_CDS/",
"type": "OData",
"settings": {
"odataVersion": "2.0",
"annotations": [
"ZCDS_DDL_TEST_OVP_CDS_VAN",
"annotation"
],
"localUri": "localService/ZCDS_DDL_TEST_OVP_CDS/metadata.xml"
}
},
"ZCDS_DDL_TEST_OVP_CDS_VAN": {
"uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='ZCDS_DDL_TEST_OVP_CDS_VAN',Version='0001')/$value/",
"type": "ODataAnnotation",
"settings": {
"localUri": "localService/ZCDS_DDL_TEST_OVP_CDS/ZCDS_DDL_TEST_OVP_CDS_VAN.xml"
}
},
"annotation": {
"type": "ODataAnnotation",
"uri": "annotations/annotation.xml",
"settings": {
"localUri": "annotations/annotation.xml"
}
}
},
"sourceTemplate": {
"id": "OVP.smartovptemplate",
"version": "1.41.1"
}
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.65.6",
"libs": {
"sap.ovp": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"uri": "i18n/i18n.properties"
},
"@i18n": {
"preload": true,
"type": "sap.ui.model.resource.ResourceModel",
"uri": "i18n/i18n.properties"
},
"ZCDS_DDL_TEST_OVP_CDS": {
"dataSource": "ZCDS_DDL_TEST_OVP_CDS",
"settings": {
"defaultCountMode": "Inline"
}
}
},
"extends": {
"extensions": {}
},
"contentDensities": {
"compact": true,
"cozy": true
}
},
"sap.ovp": {
"considerAnalyticalParameters": true,
"containerLayout": "resizable",
"enableLiveFilter": false,
"globalFilterEntityType": "ZCDS_DDL_TEST_OVPResult",
"globalFilterModel": "ZCDS_DDL_TEST_OVP_CDS",
"refreshIntervalInMinutes": 15,
"showDateInRelativeFormat": false,
"cards": {
"card01_InvoiceChart": {
"model": "ZCDS_DDL_TEST_OVP_CDS",
"template": "sap.ovp.cards.charts.analytical",
"settings": {
"customParams": "blockedInvoicesChart",
"title": "{{field2}}",
"subTitle": "{{field1}}",
"entitySet": "ZCDS_DDL_TEST_OVPResults",
"valueSelectionInfo": "{{field3}}",
"selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#params",
"tabs": [
{
"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#LinesReason",
"dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#ConvertedAmount",
"selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant#params",
"value": "{{field4}}"
}
]
}
}
}
}
}

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
| User | Count |
|---|---|
| 4246 | |
| 3357 | |
| 2603 | |
| 2153 | |
| 1983 | |
| 1255 | |
| 1164 | |
| 1122 | |
| 1100 |