Content

This repo contains a draft enabled CAP (node) based backend that exposes an OData v4 service used by a TypeScript based Fiori Elements frontend (List Report and Object Page with a custom section controller extension).

The frontend was created using the SAP Fiori Tools for SAP Business Application Studio and VSCode.

How to run the app?

• checkout repo
• npm run install
• npm run ui:mockserver (for standalone UI mock server)
• npm run ui:mockserver:proxy (for UI mock server with UI5 sources from CDN)
• npm run ui:mockserver:proxy:rta (for UI mock server with UI5 sources from CDN and runtime adaptation enabled)
• npm run start (for integration of UI5 server into CDS server)
• npm run ui:cap (for integration of CDS server into UI5 server)

How to run the tests?

QUnit and OPA5

• npm run ui:test
• Test execution report can be found in ./app/samples/target/QunitReport/report.html
• LCOV coverage report can be found in ./app/samples/target/coverage/lcov-report/index.html
• Cobertura coverage report can be found in ./app/samples/target/coverage/cobertura-coverage.xml
• Junit test result report can be found in ./app/samples/target/QunitReport/junit.xml

WDI5

• npm run e2e:test
• Test execution report (html) can be found in ./app/samples/target/WDI5report/test-report.html
• Test execution report (json) can be found in ./app/samples/target/WDI5report/test-report-<execution date>.json
• Junit test result report can be found in ./app/samples/target/WDI5report/junit-0-(0|1).xml

What does the repo contain?

• Generate TypeScript types based on the service metadata document (odata2ts)
• Unit tests (QUnit)
• Integration tests (OPA5, sap.fe.test)
• Test runner for Unit- and Integration tests including code coverage and test coverage reporting (ui5-test-runner)
• End-to-End tests (WDI5, wdio-json-html-reporter, sap.fe.test)
• Static code analysis
  • eslint (fiori-tools plugin, ecoCode plugin, eslint-formatter-multiple)
  • @ui5/linter
• CDS server plugins
  • Integration of UI5 server into CDS server (cds-plugin-ui5)
• UI5 server middlewares
  • Transpile TypeScript sources to JavaScript on browser request (ui5-tooling-transpile)
  • OData v4 Mockserver to run the UI standalone (@sap-ux/ui5-middleware-fe-mockserver)
    • Custom mockserver enhancement to mock backend implementation
  • Virtual endpoints for Sandbox Launchpad to run the UI and tests (@sap-ux/preview-middleware)
  • Integration of CDS server into UI5 server (ui5-middleware-cap)
• UI5 builder tasks
  • Check expiring End of Cloud Provisioning date (ui5-task-check-eocp)
  • Zipping project resources (ui5-task-zipper)
  • Transpile TypeScript sources to JavaScript during build (ui5-tooling-transpile-task)
• Runtime adaptation
  • The virtual endpoint of the preview middleware for RTA can be used to create .changes files that will be bundled to flexibility-bundle.json by the UI5 builder (standard task generateFlexChangesBundle). If deployed with the application, the changes contained in the bundle are applied at runtime.

What does the repo not contain?

As the focus of this repo is on the frontend part there's no real backend implementation.

UI5 versions 1.122.x and 1.123.x

There's an issue with the FLP sandbox launchpad sources from npmjs. Hence, the launchpad generated by the preview-middleware does not work correctly in these UI5 versions. As a workaround you can use the ui5-proxy-middleware to load the ui5 sources directly from the CDN.

UI5 versions < 1.112.x

In case you use a UI5 version < 1.112.x you need to enable the overridesToOverride option (see Class Conversion documentation) in the .babelrc.json to be able to use the overrides from sap.ui.core.mvc.ControllerExtension.override.

["transform-ui5", {
"overridesToOverride": true
}]