renaming

Bumps the production-dependencies group with 1 update: [@sap/cds](https://cap.cloud.sap/).


Updates `@sap/cds` from 7.8.1 to 7.8.2

---
updated-dependencies:
- dependency-name: "@sap/cds"
  dependency-type: direct:production
  update-type: version-update:semver-patch
  dependency-group: production-dependencies
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.eslintrc

@@ -1,24 +0,0 @@
-{
-    "extends": "eslint:recommended",
-    "env": {
-        "node": true,
-        "es6": true,
-        "jest": true
-    },
-    "parserOptions": {
-        "ecmaVersion": 2018
-    },
-    "globals": {
-        "SELECT": true,
-        "INSERT": true,
-        "UPDATE": true,
-        "DELETE": true,
-        "CREATE": true,
-        "DROP": true,
-        "cds": true
-    },
-    "rules": {
-        "no-console": "off",
-        "require-atomic-updates": "off"
-    }
-}

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: This channel is CLOSED. 
+    about: Use SAP community instead
+    url: https://answers.sap.com/tags/9f13aee1-834c-4105-8e43-ee442775e5ce

.github/dependabot.yml

@@ -0,0 +1,17 @@
+version: 2
+
+updates:
+- package-ecosystem: npm
+  directory: /
+  versioning-strategy: increase-if-necessary
+  schedule:
+    interval: weekly
+  groups:
+    production-dependencies:
+      dependency-type: "production"
+    development-dependencies:
+      dependency-type: "development"
+  ignore:
+    - dependency-name: "chai"
+        # chai 5 doesn't work atm w/ cds.test, TODO fix that in cds.test
+      versions: ["5.x"]

.github/workflows/node.js.yml

@@ -0,0 +1,38 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x, 18.x]
+
+    steps:
+    - uses: actions/checkout@v4
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm test
+
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v4
+    - uses: actions/setup-node@v4
+      with:
+        node-version: 20.x
+    - run: npm ci
+    - run: npm run lint

.gitignore

@@ -12,4 +12,14 @@ target/
 *.mtar
 connection.properties
 default-env.json
+.cdsrc-private.json
 packages/messageBox
+reviews/msg-box
+reviews/db/test.db
+
+*.openapi3.json
+*.sqlite
+*.db
+
+@types/
+@cds-models/

.npmrc

@@ -1 +1,3 @@
-@sap:registry=https://npm.sap.com
+# Ensure we always use public packages, i.e. avoid using local registries from ~/.npmrc
+@sap:registry=https://registry.npmjs.org/
+registry=https://registry.npmjs.org/

.reuse/dep5

@@ -0,0 +1,29 @@
+Format: https://www.debian.org/doc/packaging-manuals/copyright-format/1.0/
+Upstream-Name: cloud-cap-samples
+Upstream-Contact: <Christian Georgi (christian.georgi@sap.com)>
+Source: https://github.com/SAP-samples/cloud-cap-samples
+Disclaimer: The code in this project may include calls to APIs (“API Calls”) of
+ SAP or third-party products or services developed outside of this project
+ (“External Products”).
+ “APIs” means application programming interfaces, as well as their respective
+ specifications and implementing code that allows software to communicate with
+ other software.
+ API Calls to External Products are not licensed under the open source license
+ that governs this project. The use of such API Calls and related External
+ Products are subject to applicable additional agreements with the relevant
+ provider of the External Products. In no event shall the open source license
+ that governs this project grant any rights in or to any External Products,or
+ alter, expand or supersede any terms of the applicable additional agreements.
+ If you have a valid license agreement with SAP for the use of a particular SAP
+ External Product, then you may make use of any API Calls included in this
+ project’s code for that SAP External Product, subject to the terms of such
+ license agreement. If you do not have a valid license agreement for the use of
+ a particular SAP External Product, then you may only make use of any API Calls
+ in this project for that SAP External Product for your internal, non-productive
+ and non-commercial test and evaluation of such API Calls. Nothing herein grants
+ you any rights to use or access any SAP External Product, or provide any third
+ parties the right to use of access any SAP External Product, through API Calls.
+
+Files: *
+Copyright: 2019-2020 SAP SE or an SAP affiliate company and cap-cloud-samples
+License: Apache-2.0

.tours/db-native.tour

@@ -0,0 +1,117 @@
+{
+  "$schema": "https://aka.ms/codetour-schema",
+  "title": "Database Functions",
+  "steps": [
+    {
+      "title": "Introduction",
+      "description": "### Database Functions in CDS Models\n\nIn this tour, you'll learn how to add database-specific functions to CDS models in your application."
+    },
+    {
+      "file": "bookshop/db/schema.cds",
+      "description": "#### Basic Schema\n\nWe want to add two fields to the `Authors` entity, one for the author's age and one for the span of years that she or he lived.\n\nThese two fields can be computed out of the existing `dateOfBirth` and `dateOfDeath` fields.",
+      "selection": {
+        "start": {
+          "line": 19,
+          "character": 1
+        },
+        "end": {
+          "line": 21,
+          "character": 1
+        }
+      },
+      "title": "Base fields in Author"
+    },
+    {
+      "file": "bookshop/srv/admin-service.cds",
+      "description": "This is how the `Authors` entity gets exposed in an OData or REST service.\n\nIn the next step, you'll see how we extend this projection.",
+      "selection": {
+        "start": {
+          "line": 4,
+          "character": 1
+        },
+        "end": {
+          "line": 5,
+          "character": 1
+        }
+      },
+      "title": "Authors service"
+    },
+    {
+      "file": "fiori/db/sqlite/index.cds",
+      "description": "#### SQLite Implementation\n\nHere's the first implementation for SQLite.  It computes the two fields `age` and `lifetime` through SQLite's [strftime](https://sqlite.org/lang_datefunc.html) function.\n\nThrough the [`extend projection`](https://cap.cloud.sap/docs/cds/cdl#extend-view) clause you can add additional fields to projection entities.  These are deployed as database views, which is why we can integrate the database functions in the first place.\n",
+      "selection": {
+        "start": {
+          "line": 7,
+          "character": 1
+        },
+        "end": {
+          "line": 11,
+          "character": 1
+        }
+      },
+      "title": "SQLite implementation"
+    },
+    {
+      "file": "fiori/db/hana/index.cds",
+      "description": "#### SAP HANA Implementation\n\nThis is the second implementation for SAP HANA.  It computes the same two fields `age` and `lifetime` through the [YEARS_BETWEEN](https://help.sap.com/viewer/7c78579ce9b14a669c1f3295b0d8ca16/Cloud/en-US/7c0d2c161ea34def86de3f5eadd6a0af.html) and [YEAR](https://help.sap.com/viewer/7c78579ce9b14a669c1f3295b0d8ca16/Cloud/en-US/20f5fac6751910148dabd3c6821f907d.html) functions of SAP HANA.\n\n#### File Layout and Code Structure\n\nNote the path of the `.cds` file we are in: it's in a subfolder of `db`, so that it's _not_ automatically picked up when we start the application.  The same is true for the SQLite implementation: it's in a separate `db/sqlite/` folder as well.  In the next step, you'll see how these files are loaded.\n\nAlso, we choose to implement all of that as an extension of the original bookshop here in the _fiori_ package.  See the first [CAP Samples] code tour for more details on the different packages of this repository.",
+      "selection": {
+        "start": {
+          "line": 7,
+          "character": 1
+        },
+        "end": {
+          "line": 11,
+          "character": 1
+        }
+      },
+      "title": "SAP HANA implementation"
+    },
+    {
+      "file": "fiori/package.json",
+      "description": "#### Configuration\n\nThe `cds.requires` section in `package.json` is a place to configure which of the `db/sqlite` and `db/hana` folders are used for which database.\n\nWe use [Node.js profiles](https://cap.cloud.sap/docs/node.js/cds-env#profiles) to separate the configuration.\nIn the `development` profile, you can see that `db/sqlite` is set as the model, while the `db/hana` folder is configured in the `production` profile.  `db-ext` is a pseudo datasource, its name doesn't matter.\n\nSee [`cds.resolve`](https://cap.cloud.sap/docs/node.js/cds-compile#cds-resolve) to learn more about how models are found.",
+      "selection": {
+        "start": {
+          "line": 41,
+          "character": 1
+        },
+        "end": {
+          "line": 48,
+          "character": 1
+        }
+      },
+      "title": "Configuration"
+    },
+    {
+      "file": "fiori/package.json",
+      "description": "#### Run with SQLite\n\nTo run with `development` and an in-memory SQLite database, you don't need to do anything special, because it's activated by default.  Just run:\n\n>> cds watch fiori\n\nThen open [http://localhost:4004/admin/Authors](http://localhost:4004/admin/Authors) to see the two new fields.\n",
+      "line": 43,
+      "title": "Run with SQLite"
+    },
+    {
+      "file": "fiori/package.json",
+      "description": "#### Deploy the CDS Model to SAP HANA\n\nTo 'activate' SAP HANA through the `production` profile, you can use the global `--production` flag:\n\n>> cd fiori; cds deploy --to hana --production\n\n[Learn more about SAP HANA deployment](https://cap.cloud.sap/docs/guides/databases#get-hana)\n\n#### Run the Application\n\n>> cd fiori; cds watch --production\n\nThe service on [http://localhost:4004/admin/Authors](http://localhost:4004/admin/Authors) is the same as before, but this time the `Authors` entity is backed by a database view with an SAP HANA function.\n\n#### More\n\nIf you don't see data, you can add some in the next step.",
+      "line": 46,
+      "title": "Run with SAP HANA"
+    },
+    {
+      "file": "fiori/test/requests.http",
+      "description": "### Add More Data\n\nOptionally you can add some `Authors` data by clicking on the _Send Request_ link (provided by the [REST client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) extension).",
+      "line": 72,
+      "selection": {
+        "start": {
+          "line": 67,
+          "character": 1
+        },
+        "end": {
+          "line": 73,
+          "character": 1
+        }
+      },
+      "title": "Add Data"
+    },
+    {
+      "title": "Wrap-up",
+      "description": "### Summary\n\nThat's it!  You have seen: \n- How to integrate database-specific functions in a CDS model.\n- How to switch between the two implementations for SQLite and SAP HANA."
+    }
+  ]
+}

.tours/samples.tour

@@ -0,0 +1,139 @@
+{
+  "$schema": "https://aka.ms/codetour-schema",
+  "title": "CAP Samples",
+  "steps": [
+    {
+      "title": "Welcome",
+      "file": "README.md",
+      "description": "### Welcome to CAP Samples!\n\nThis tour leads you through a collection of samples for the [SAP Cloud Application Programming Model (CAP)](https://cap.cloud.sap).\nYou will learn which features of the programming model are demonstrated in which sample.\n\nLet's start!",
+      "line": 2,
+      "selection": {
+        "start": {
+          "line": 1,
+          "character": 1
+        },
+        "end": {
+          "line": 3,
+          "character": 108
+        }
+      }
+    },
+    {
+      "file": "hello/srv/world.cds",
+      "description": "### Hello World!\n\nThis is a simplistic [Hello World](https://cap.cloud.sap/docs/get-started/hello-world) service using [CDS](https://cap.cloud.sap/docs/cds/) and [cds.services](https://cap.cloud.sap/docs/node.js/api#services-api).",
+      "line": 2,
+      "selection": {
+        "start": {
+          "line": 1,
+          "character": 1
+        },
+        "end": {
+          "line": 4,
+          "character": 1
+        }
+      },
+      "title": "Hello World!"
+    },
+    {
+      "file": "bookshop/db/schema.cds",
+      "description": "### A Bookshop!\n\nIntroduces:\n- [Project Setup](https://cap.cloud.sap/docs/get-started/) and [Layouts](https://cap.cloud.sap/docs/get-started/projects)\n- [Domain Modeling](https://cap.cloud.sap/docs/guides/domain-models)\n- [Defining Services](https://cap.cloud.sap/docs/guides/providing-services)\n- [Generic Providers](https://cap.cloud.sap/docs/guides/generic-providers)\n- [Adding Custom Logic](https://cap.cloud.sap/docs/guides/service-impl)\n- [Using Databases](https://cap.cloud.sap/docs/guides/databases)\n",
+      "line": 1,
+      "selection": {
+        "start": {
+          "line": 1,
+          "character": 1
+        },
+        "end": {
+          "line": 32,
+          "character": 1
+        }
+      },
+      "title": "Bookshop"
+    },
+    {
+      "file": "common/index.cds",
+      "description": "### Extend and Reuse\n\nShowcases how to extend [@sap/cds/common](https://cap.cloud.sap/docs/cds/common) thereby covering:\n- Building [extension packages](https://cap.cloud.sap/docs/guides/domain-models#aspects-extensibility)\n- Providing [reuse packages](https://cap.cloud.sap/docs/get-started/projects#sharing-and-reusing-content)\n- [Verticalization](https://cap.cloud.sap/docs/cds/common#adapting-to-your-needs)\n- Using [Aspects](https://cap.cloud.sap/docs/cds/cdl#aspects)\n- Used in the [fiori app sample](#fiori)\n",
+      "line": 1,
+      "selection": {
+        "start": {
+          "line": 1,
+          "character": 1
+        },
+        "end": {
+          "line": 46,
+          "character": 1
+        }
+      },
+      "title": "Common"
+    },
+    {
+      "file": "orders/db/schema.cds",
+      "description": "### Orders - Compositions and Serving Documents\n\nA standalone orders management service, demonstrating:\n- Using [Compositions](https://cap.cloud.sap/docs/cds/cdl#compositions) in [Domain Models](https://cap.cloud.sap/docs/guides/domain-models), along with\n- [Serving deeply nested documents](https://cap.cloud.sap/docs/guides/generic-providers#serving-structured-data)\n",
+      "line": 1,
+      "selection": {
+        "start": {
+          "line": 1,
+          "character": 1
+        },
+        "end": {
+          "line": 27,
+          "character": 1
+        }
+      },
+      "title": "Orders"
+    },
+    {
+      "file": "reviews/db/schema.cds",
+      "description": "### Reviews - More Modularity\n\nShows how to implement a modular service to manage product reviews, including:\n- Consuming other services synchronously and asynchronously\n- Serving requests synchronously\n- Emitting events asynchronously\n- Grow as you go, with:\n- Mocking app services\n- Running service meshes\n- Late-cut Micro Services\n- As well as managed data, input validations, and authorization\n",
+      "line": 1,
+      "selection": {
+        "start": {
+          "line": 1,
+          "character": 1
+        },
+        "end": {
+          "line": 39,
+          "character": 1
+        }
+      },
+      "title": "Reviews"
+    },
+    {
+      "title": "Bookstore",
+      "description": "### Bookstore - Reuse and UI\n\n- A [composite app, reusing and combining](https://cap.cloud.sap/docs/guides/reuse-and-compose) these packages:\n  - [@capire/bookshop](bookshop)\n  - [@capire/reviews](reviews)\n  - [@capire/orders](orders)\n  - [@capire/common](common)\n- [The Vue.js app](bookshop/app/vue) imported from bookshop is served as well\n- [The Vue.js app](reviews/app/vue) imported from reviews is served as well\n- [The Fiori app](orders/app) imported from orders is served as well\n- [OpenAPI export + Swagger UI](https://cap.cloud.sap/docs/advanced/openapi)"
+    },
+    {
+      "file": "fiori/app/services.cds",
+      "description": "### Annotations for SAP Fiori Elements\n\nAdds an SAP Fiori elements application to bookstore, thereby introducing:\n- OData Annotations in `.cds` files\n- Support for Fiori Draft\n- Support for Value Helps\n- Serving SAP Fiori apps locally\n\nSee the [Serving Fiori UIs](https://cap.cloud.sap/docs/advanced/fiori) documentation for more information.",
+      "line": 1,
+      "selection": {
+        "start": {
+          "line": 1,
+          "character": 1
+        },
+        "end": {
+          "line": 13,
+          "character": 1
+        }
+      },
+      "title": "Fiori"
+    },
+    {
+      "file": "package.json",
+      "description": "### All-in-one Monorepo\n\nEach sample sub directory essentially is a standard npm package, some with standard npm dependencies to other samples. The root folder's [package.json](package.json) has local links to the sub folders, such that an `npm install` populates a local `node_modules` folder acts like a local npm registry to the individual sample packages.\n",
+      "selection": {
+        "start": {
+          "line": 8,
+          "character": 1
+        },
+        "end": {
+          "line": 16,
+          "character": 1
+        }
+      },
+      "title": "Packages"
+    }
+  ],
+  "isPrimary": true,
+  "description": "Overview of CAP Samples for Node.js"
+}

.vscode/extensions.json

@@ -0,0 +1,19 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		"qwtel.sqlite-viewer",
+		"sapse.vscode-cds",
+		"dbaeumer.vscode-eslint",
+		"mechatroner.rainbow-csv",
+		"humao.rest-client",
+		"sdras.night-owl",
+		"vsls-contrib.codetour"
+	],
+	// List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+	"unwantedRecommendations": [
+
+	]
+}

.vscode/launch.json

@@ -5,32 +5,52 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "bookshop", "request": "launch", "type": "node", "runtimeExecutable": "npx", "runtimeArgs": [ "-n" ],
-      "args": [ "--", "cds", "run", "--in-memory" ],
-      "cwd": "${workspaceFolder}/packages/bookshop",
-      "console": "integratedTerminal",
-      "skipFiles": ["<node_internals>/**"]
+      "name": "bookshop",
+      "command": "npx cds watch bookshop",
+      "type": "node-terminal",
+      "request": "launch",
+      "skipFiles": [
+        "<node_internals>/**",
+        "**/node_modules/**",
+        "**/cds/lib/lazy.js",
+        "**/cds/lib/req/cds-context.js",
+        "**/odata-v4/okra/**"
+      ]
     },
     {
-      "name": "cds run ...", "request": "launch", "type": "node", "runtimeExecutable": "npx", "runtimeArgs": [ "-n" ],
-      "args": [ "--", "cds", "run", "--with-mocks", "--in-memory?" ],
-      "cwd": "${workspaceFolder}/packages/${input:service}",
-      "console": "integratedTerminal",
-      "skipFiles": ["<node_internals>/**"]
-    }
+      "name": "Fiori App",
+      "command": "npx cds watch fiori",
+      "type": "node-terminal",
+      "request": "launch",
+      "skipFiles": [
+        "<node_internals>/**",
+        "**/node_modules/**",
+        "**/cds/lib/lazy.js",
+        "**/cds/lib/req/cds-context.js",
+        "**/odata-v4/okra/**"
+      ]
+    },
+    {
+      "name": "Debug Mocha Tests",
+      "type": "node",
+      "request": "attach",
+      "port": 9229,
+      "continueOnAttach": true,
+      "skipFiles": [
+        "<node_internals>/**",
+        "**/node_modules/**",
+        "**/cds/lib/lazy.js",
+        "**/cds/lib/req/cds-context.js",
+        "**/odata-v4/okra/**",
+      ]
+    },
   ],
   "inputs": [
     {
       "type": "pickString",
-      "id": "service",
-      "description": "Which service do you want to start?",
-      "options": [
-        "bookshop",
-        "bookstore",
-        "media-server",
-        "office-supplies",
-        "reviews-service"
-      ],
+      "id": "sample",
+      "description": "Which sample do you want to start?",
+      "options": [ "bookshop", "fiori", "reviews", "reviews" ],
       "default": "bookshop"
     }
   ]

.vscode/settings.json

@@ -1,6 +1,25 @@
 {
   "files.exclude": {
+    ".reuse/**": true,
     "**/.gitignore": true,
-    "**/.vscode": true
-  }
+    "**/.vscode": true,
+    "LICENSES/**": true
+  },
+  "debug.javascript.terminalOptions": {
+    "skipFiles": [
+      "<node_internals>/**",
+      "**/node_modules/**",
+      "**/cds/lib/lazy.js",
+      "**/cds/lib/req/cds-context.js",
+      "**/odata-v4/okra/**"
+    ]
+  },
+  "eslint.probe": [
+    "cds",
+    "csn",
+    "csv",
+    "csv (semicolon)",
+    "tsv",
+    "tab"
+  ]
 }

.vscode/tasks.json

@@ -1,17 +1,15 @@
 {
-    // See https://go.microsoft.com/fwlink/?LinkId=733558
-    // for the documentation about the tasks.json format
-    "version": "2.0.0",
-    "tasks": [
-        {
-            "type": "npm", "script": "watch", "path": "packages/bookshop/",
-            "options": { "env": { "PORT": "4004" }},
-            "presentation": { "group": "A" }
-        },
-        {
-            "type": "npm", "script": "watch", "path": "packages/reviews-service/",
-            "options": { "env": { "PORT": "5005" }},
-            "presentation": { "group": "A" }
-        }
-    ]
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "jest",
+      "group": {
+        "kind": "test",
+        "isDefault": true
+      }
+    }
+  ]
 }

LICENSE

@@ -1,190 +1,201 @@
-SAP SAMPLE CODE LICENSE AGREEMENT
-
-Please scroll down and read the following SAP Sample Code License Agreement
-carefully ("Agreement"). By downloading, installing, or otherwise using the
-SAP sample code or any materials that accompany the sample code documentation
-(collectively, the "Sample Code"), You agree that this Agreement forms a legally
-binding agreement between You ("You" or "Your") and SAP SE, for and on behalf
-of itself and its subsidiaries and affiliates (as defined in Section 15 of the
-German Stock Corporation Act), and You agree to be bound by all of the terms
-and conditions stated in this Agreement. If You are trying to access or download
-the Sample Code on behalf of Your employer or as a consultant or agent of a
-third party (either "Your Company"), You represent and warrant that You have
-the authority to act on behalf of and bind Your Company to the terms of this
-Agreement and everywhere in this Agreement that refers to 'You' or 'Your' shall
-also include Your Company. If You do not agree to these terms, do not attempt
-to access or use the Sample Code.
-
-1. LICENSE: Subject to the terms of this Agreement, SAP grants You a nonexclusive,
-non-transferable, non-sublicensable, revocable, royalty-free,
-limited license to use, copy, and modify the Sample Code solely for Your internal
-business purposes.
-
-2. RESTRICTIONS: You must not use the Sample Code to: (a) impair, degrade or
-reduce the performance or security of any SAP products, services or related
-technology (collectively, "SAP Products"); (b) enable the bypassing or
-circumventing of SAP's license restrictions and/or provide users with access to
-the SAP Products to which such users are not licensed; or (c) permit mass data
-extraction from an SAP Product to a non-SAP Product, including use,
-modification, saving or other processing of such data in the non-SAP Product.
-Further, You must not: (i) provide or make the Sample Code available to any
-third party other than your authorized employees, contractors and agents
-(collectively, “Representatives”) and solely to be used by Your Representatives
-for Your own internal business purposes; ii) remove or modify any marks or
-proprietary notices from the Sample Code; iii) assign this Agreement, or any
-interest therein, to any third party; (iv) use any SAP name, trademark or logo
-without the prior written authorization of SAP; or (v) use the Sample Code to
-modify an SAP Product or decompile, disassemble or reverse engineer an SAP
-Product (except to the extent permitted by applicable law). You are responsible
-for any breach of the terms of this Agreement by You or Your Representatives.
-
-3. INTELLECTUAL PROPERTY: SAP or its licensors retain all ownership and
-intellectual property rights in and to the Sample Code and SAP Products. In
-exchange for the right to use, copy and modify the Sample Code provided under
-this Agreement, You covenant not to assert any intellectual property rights in
-or to any of Your products, services, or related technology that are based on
-or incorporate the Sample Code against any individual or entity in respect of
-any current or future SAP Products.
-
-4. SAP AND THIRD PARTY APIS: The Sample Code may include API (application
-programming interface) calls to SAP and third-party products or services. The
-access or use of the third-party products and services to which the API calls
-are directed may be subject to additional terms and conditions between you and
-SAP or such third parties. You (and not SAP) are solely responsible for
-understanding and complying with any additional terms and conditions that apply
-to the access or use of those APIs and/or third-party products and services.
-SAP does not grant You any rights in or to these APIs, products or services
-under this Agreement.
-
-5. FREE AND OPEN SOURCE COMPONENTS: The Sample Code may include third party
-free or open source components ("FOSS Components"). You may have additional
-rights in such FOSS Components that are provided by the third party licensors
-of those components.
-6. THIRD PARTY DEPENDENCIES: The Sample Code may require third party software
-dependencies ("Dependencies") for the use or operation of the Sample Code. These
-Dependencies may be identified by SAP in Maven POM files, documentation or by
-other means. SAP does not grant You any rights in or to such Dependencies under
-this Agreement. You are solely responsible for the acquisition, installation
-and use of such Dependencies.
-7. WARRANTY:
-a) If You are located outside the US or Canada: AS THE SAMPLE CODE IS PROVIDED
-TO YOU FREE OF CHARGE, SAP DOES NOT GUARANTEE OR WARRANT ANY FEATURES OR
-QUALITIES OF THE SAMPLE CODE OR GIVE ANY UNDERTAKING WITH REGARD TO ANY OTHER
-QUALITY. NO SUCH WARRANTY OR UNDERTAKING SHALL BE IMPLIED BY YOU FROM ANY
-DESCRIPTION IN THE SAMPLE CODE OR ANY OTHER MATERIALS, COMMUNICATION OR
-ADVERTISEMENT. IN PARTICULAR, SAP DOES NOT WARRANT THAT THE SAMPLE CODE WILL BE
-AVAILABLE UNINTERRUPTED, ERROR FREE, OR PERMANENTLY AVAILABLE. ALL WARRANTY
-CLAIMS RESPECTING THE SAMPLE CODE ARE SUBJECT TO THE LIMITATION OF LIABILITY
-STIPULATED IN SECTION 8 BELOW.
-b) If You are located in the US or Canada: THE SAMPLE CODE IS LICENSED TO YOU
-"AS IS", WITHOUT ANY WARRANTY, ESCROW, TRAINING, MAINTENANCE, OR SERVICE
-OBLIGATIONS WHATSOEVER ON THE PART OF SAP. SAP MAKES NO EXPRESS OR IMPLIED
-WARRANTIES OR CONDITIONS OF SALE OF ANY TYPE WHATSOEVER, INCLUDING BUT NOT
-LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY AND OF FITNESS FOR A PARTICULAR
-PURPOSE. IN PARTICULAR, SAP DOES NOT WARRANT THAT THE SAMPLE CODE WILL BE
-AVAILABLE UNINTERRUPTED, ERROR FREE, OR PERMANENTLY AVAILABLE. YOU ASSUME ALL
-RISKS ASSOCIATED WITH THE USE OF THE SAMPLE CODE, INCLUDING WITHOUT LIMITATION
-RISKS RELATING TO QUALITY, AVAILABILITY, PERFORMANCE, DATA LOSS, AND UTILITY IN
-A PRODUCTION ENVIRONMENT.
-c) For all locations: SAP DOES NOT MAKE ANY REPRESENTATIONS OR WARRANTIES IN
-RESPECT OF THIRD PARTY DEPENDENCIES, APIS, PRODUCTS AND SERVICES, INCLUDING BUT
-NOT LIMITED TO IMPLIED WARRANTIES OF MERCHANTABILITY AND OF FITNESS FOR A
-PARTICULAR PURPOSE. IN PARTICULAR, SAP DOES NOT WARRANT THAT THIRDPARTY
-DEPENDENCIES, APIS, PRODUCTS AND SERVICES WILL BE AVAILABLE, ERROR FREE,
-INTEROPERABLE WITH THE SAMPLE CODE, SUITABLE FOR ANY PARTICULAR PURPOSE OR NONINFRINGING.
-YOU ASSUME ALL RISKS ASSOCIATED WITH THE USE OF THIRD
-PARTY DEPENDENCIES, APIS, PRODUCTS AND SERVICES, INCLUDING WITHOUT LIMITATION
-RISKS RELATING TO QUALITY, AVAILABILITY, PERFORMANCE, DATA LOSS, UTILITY IN A
-PRODUCTION ENVIRONMENT, AND NON-INFRINGEMENT. IN NO EVENT WILL SAP BE LIABLE
-DIRECTLY OR INDIRECTLY IN RESPECT OF ANY USE OF THIRD PARTY DEPENDENCIES, APIS,
-PRODUCTS AND SERVICES BY YOU.
-
-8. LIMITATION OF LIABILITY:
-a) If You are located outside the US or Canada: IRRESPECTIVE OF THE LEGAL
-REASONS, SAP SHALL ONLY BE LIABLE FOR DAMAGES UNDER THIS AGREEMENT IF SUCH
-DAMAGE (I) CAN BE CLAIMED UNDER THE GERMAN PRODUCT LIABILITY ACT OR (II) IS
-CAUSED BY INTENTIONAL MISCONDUCT OF SAP OR (III) CONSISTS OF PERSONAL INJURY.
-IN ALL OTHER CASES, NEITHER SAP NOR ITS EMPLOYEES, AGENTS AND SUBCONTRACTORS
-SHALL BE LIABLE FOR ANY KIND OF DAMAGE OR CLAIMS HEREUNDER.
-b) If You are located in the US or Canada: IN NO EVENT SHALL SAP BE LIABLE TO
-YOU, YOUR COMPANY OR TO ANY THIRD PARTY FOR ANY DAMAGES IN AN AMOUNT IN EXCESS
-OF $100 ARISING IN CONNECTION WITH YOUR USE OF OR INABILITY TO USE THE SAMPLE
-CODE OR IN CONNECTION WITH SAP'S PROVISION OF OR FAILURE TO PROVIDE SERVICES 
-PERTAINING TO THE SAMPLE CODE, OR AS A RESULT OF ANY DEFECT IN THE SAMPLE COED.
-THIS DISCLAIMER OF LIABILITY SHALL APPLY REGARDLESS OF THE FORM OF ACTION THAT
-MAY BE BROUGHT AGAINST SAP, WHETHER IN CONTRACT OR TORT, INCLUDING WITHOUT
-LIMITATION ANY ACTION FOR NEGLIGENCE. YOUR SOLE REMEDY IN THE EVENT OF BREACH
-OF THIS AGREEMENT BY SAP OR FOR ANY OTHER CLAIM RELATED TO THE SAMPLE CODE SHALL
-BE TERMINATION OF THIS AGREEMENT. NOTWITHSTANDING ANYTHING TO THE CONTRARY
-HEREIN, UNDER NO CIRCUMSTANCES SHALL SAP OR ITS LICENSORS BE LIABLE TO YOU OR
-ANY OTHER PERSON OR ENTITY FOR ANY SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR
-INDIRECT DAMAGES, LOSS OF GOOD WILL OR BUSINESS PROFITS, WORK STOPPAGE, DATA
-LOSS, COMPUTER FAILURE OR MALFUNCTION, ANY AND ALL OTHER COMMERCIAL DAMAGES OR
-LOSS, OR EXEMPLARY OR PUNITIVE DAMAGES.
-
-9. INDEMNITY: You will fully indemnify, hold harmless and defend SAP against
-law suits based on any claim: (a) that any of Your products, services or related
-technology that are based on or incorporate the Sample Code infringes or
-misappropriates any patent, copyright, trademark, trade secrets, or other
-proprietary rights of a third party, or (b) related to Your alleged violation
-of the terms of this Agreement.
-
-10. EXPORT: The Sample Code is subject to German, EU and US export control
-regulations. You confirm that: a) You will not use the Sample Code for, and
-will not allow the Sample Code to be used for, any purposes prohibited by
-German, EU and US law, including, without limitation, for the development,
-design, manufacture or production of nuclear, chemical or biological weapons of
-mass destruction; b) You are not located in Cuba, Iran, Sudan, Iraq, North
-Korea, Syria, nor any other country to which the United States has prohibited
-export or that has been designated by the U.S. Government as a "terrorist
-supporting" country (any, an "US Embargoed Country"); c) You are not a citizen,
-national or resident of, and are not under the control of, a US Embargoed
-Country; d) You will not download or otherwise export or re-export the Sample
-Code, directly or indirectly, to a US Embargoed Country nor to citizens,
-nationals or residents of a US Embargoed Country; e) You are not listed on the
-United States Department of Treasury lists of Specially Designated Nationals,
-Specially Designated Terrorists, and Specially Designated Narcotic Traffickers,
-nor listed on the United States Department of Commerce Table of Denial Orders
-or any other U.S. government list of prohibited or restricted parties and f)
-You will not download or otherwise export or re-export the Sample Code, directly
-or indirectly, to persons on the above-mentioned lists.
-
-11. SUPPORT: SAP does not offer support for the Sample Code.
-
-12. TERM AND TERMINATION: You may terminate this Agreement by destroying all
-copies of the Sample Code in Your possession or control. SAP may terminate Your
-license to use the Sample Code immediately if You fail to comply with any of
-the terms of this Agreement, or, for SAP's convenience by providing you with
-ten (10) days written notice of termination. In case of termination or
-expiration of this Agreement, You must immediately destroy all copies of the
-Sample Code in your possession or control. In the event Your Company is acquired
-(by merger, purchase of stock, assets or intellectual property or exclusive
-license), or You become employed, by a direct competitor of SAP, then this
-Agreement and all licenses granted to You in this Agreement shall immediately
-terminate upon the date of such acquisition or change of employment.
-
-13. LAW/VENUE:
-a) If You are located outside the US or Canada: This Agreement is governed by
-and construed in accordance with the laws of Germany without reference to its
-conflicts of law principles. You and SAP agree to submit to the exclusive 
-jurisdiction of, and venue in, the courts located in Karlsruhe, Germany in any
-dispute arising out of or relating to this Agreement or the Sample Code. The
-United Nations Convention on Contracts for the International Sale of Goods shall
-not apply to this Agreement.
-b) If You are located in the US or Canada: This Agreement shall be governed by
-and construed in accordance with the laws of the State of New York, USA without
-reference to its conflicts of law principles. You and SAP agree to submit to
-the exclusive jurisdiction of, and venue in, the courts located in New York,
-New York, USA in any dispute arising out of or relating to this Agreement or
-the Sample Code. The United Nations Convention on Contracts for the
-International Sale of Goods shall not apply to this Agreement.
-
-14. MISCELLANEOUS: This Agreement is the complete agreement between the parties
-respecting the Sample Code. This Agreement supersedes all prior or
-contemporaneous agreements or representations with regards to the Sample Code.
-If any term of this Agreement is found to be invalid or unenforceable, the
-surviving provisions shall remain effective. SAP's failure to enforce any right
-or provisions stipulated in this Agreement will not constitute a waiver of such
-provision, or any other provision of this Agreement.
-
-v1.0-071618 
+                                  Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

NOTICE

@@ -1 +0,0 @@
-Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved.

README.md

@@ -1,71 +1,75 @@
-# cloud-cap-samples
+# Welcome to cap/samples
 
-This is a monorepository for sample projects on [SAP Cloud Application Programming Model](https://cap.cloud.sap).
+Find here a collection of samples for the [SAP Cloud Application Programming Model](https://cap.cloud.sap) organized in a simplistic [monorepo setup](samples.md#all-in-one-monorepo).
 
-## Description
+[See **Overview** of contained samples](samples.md):
 
-This repository provides a list of samples and reusable packages created based on SAP Cloud Application Programming Model.
-The SAP Cloud Application Programming Model enables you to quickly create business applications by allowing you to focus on your domain logic. It offers a consistent end-to-end programming model that includes languages, libraries and APIs tailored for full-stack development on SAP Cloud Platform.
+![](etc/samples.drawio.svg)
 
-The samples provided can be run in a local setup on SQLite Database.
+![](https://github.com/SAP-samples/cloud-cap-samples/workflows/CI/badge.svg)
+[![REUSE status](https://api.reuse.software/badge/github.com/SAP-samples/cloud-cap-samples)](https://api.reuse.software/info/github.com/SAP-samples/cloud-cap-samples)
 
 
-## Requirements
-* [Node.js](https://nodejs.org/en/) v8 or higher
-* [Git](https://git-scm.com)
-* [SQLite DB](https://www.sqlite.org/download.html) (Windows only; pre-installed on Mac/Linux)
 
-#### Optional (if you want to import the code into an editor)
-* [VS Code](https://code.visualstudio.com)
-* [Add CDS extension to VS](https://cap.cloud.sap/docs/get-started/in-vscode#add-cds-editor)
+### Preliminaries
 
-## Download and Installation
+1. Ensure you have the latest LTS version of Node.js installed (see [Getting Started](https://cap.cloud.sap/docs/get-started/))
+2. Install [**@sap/cds-dk**](https://cap.cloud.sap/docs/get-started/) globally:
+
+   ```sh
+   npm i -g @sap/cds-dk
+   ```
+
+3. _Optional:_ [Use Visual Studio Code](https://cap.cloud.sap/docs/get-started/tools#vscode)
+
+### Download
+
+If you've [Git](https://git-scm.com/downloads) installed, clone this repo as shown below, otherwise [download as ZIP file](archive/main.zip).
 
-#### Install `cds` development kit
 ```sh
-# `@sap`-scoped packages are set via .npmrc
-npm install -g @sap/cds-dk
-cds  #> test-run it
+git clone https://github.com/sap-samples/cloud-cap-samples samples
+cd samples
 ```
-Got issues?  Check out the [documentation](https://cap.cloud.sap/docs/get-started/).
 
-#### Clone and build the application
-`git clone https://github.com/SAP-samples/cloud-cap-samples samples && cd samples && npm i`
+### Setup
 
-#### Run the samples
+In the samples folder run:
 
-With that you're ready to run the samples, e.g. start the [_bookshop_](./packages/bookshop) sample as follows:
+```sh
+npm install
+```
 
-`npm run bookshop`
+### Run
 
-## Test
+With that you're ready to run the samples, for example:
 
-For example, try these links in your browser:
-- <http://localhost:4004> to test with generic index page.
-- <http://localhost:4004/fiori.html> to test with Fiori sandbox.
+```sh
+cds watch bookshop
+```
 
+After that open this link in your browser: [http://localhost:4004](http://localhost:4004)
 
-## Debug
+When asked to log in, type `alice` as user and leave the password field blank, which is the [default user](https://cap.cloud.sap/docs/node.js/authentication#mocked).
 
-For example, in [VS Code](https://code.visualstudio.com) switch to _Debug_ view and launch one of the prepared _cds run_ launch configurations.
+### Testing
 
+Run the provided tests with [_jest_](http://jestjs.io) or [_mocha_](http://mochajs.org), for example:
 
-## Limitations
+```sh
+npx jest
+```
+> While mocha is a bit smaller and faster, jest runs tests in parallel and isolation, which allows to run all tests.
 
-None
+## Code Tours
 
-## Known Issues
+Take one of the [guided tours](.tours) in VS Code through our CAP samples and learn which CAP features are showcased by the different parts of the repository. Just install the [CodeTour extension](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour) for VS Code. We'll add more code tours in the future. Stay tuned!
 
-None
+## Get Support
 
-## How to obtain support
+Check out the documentation at [https://cap.cloud.sap](https://cap.cloud.sap). <br>
+In case you've a question, find a bug, or otherwise need support, use our [community](https://answers.sap.com/tags/9f13aee1-834c-4105-8e43-ee442775e5ce) to get more visibility.
 
-Check out the documentation on https://cap.cloud.sap.  In case you find a bug, or you need additional support, please open an issue [here](https://github.com/SAP-samples/cloud-cap-samples/issues/new) in GitHub.
-
-## To-Do (upcoming changes)
-
-None
 
 ## License
 
-Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under SAP Sample Code License Agreement, except as noted otherwise in the [LICENSE](/LICENSE) file.
+Copyright (c) 2022 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, version 2.0 except as noted otherwise in the [LICENSE](LICENSE) file.

bookshop/.vscode/launch.json

@@ -0,0 +1,25 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Attach to...",
+      "type": "node",
+      "request": "attach",
+      "processId": "${command:PickProcess}",
+      "skipFiles": ["<node_internals>/**"]
+    },
+    {
+      "name": "cds run",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "npx",
+      "runtimeArgs": ["-n"],
+      "args": ["--", "cds", "run", "--with-mocks", "--in-memory?"],
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**"]
+    }
+  ]
+}

bookshop/app/vue/app.js

@@ -0,0 +1,89 @@
+/* global Vue axios */ //> from vue.html
+const $ = sel => document.querySelector(sel)
+const GET = (url) => axios.get('/browse'+url)
+const POST = (cmd,data) => axios.post('/browse'+cmd,data)
+
+const books = Vue.createApp ({
+
+    data() {
+      return {
+        list: [],
+        book: undefined,
+        order: { quantity:1, succeeded:'', failed:'' },
+        user: undefined
+      }
+    },
+
+    methods: {
+
+        search: ({target:{value:v}}) => books.fetch(v && '&$search='+v),
+
+        async fetch (etc='') {
+            const {data} = await GET(`/ListOfBooks?$expand=genre,currency${etc}`)
+            books.list = data.value
+        },
+
+        async inspect (eve) {
+            const book = books.book = books.list [eve.currentTarget.rowIndex-1]
+            const res = await GET(`/Books/${book.ID}?$select=descr,stock,image`)
+            Object.assign (book, res.data)
+            books.order = { quantity:1 }
+            setTimeout (()=> $('form > input').focus(), 111)
+        },
+
+        async submitOrder () {
+            const {book,order} = books, quantity = parseInt (order.quantity) || 1 // REVISIT: Okra should be less strict
+            try {
+                const res = await POST(`/submitOrder`, { quantity, book: book.ID })
+                book.stock = res.data.stock
+                books.order = { quantity, succeeded: `Successfully ordered ${quantity} item(s).` }
+            } catch (e) {
+                books.order = { quantity, failed: e.response.data.error ? e.response.data.error.message : e.response.data }
+            }
+        },
+
+        async login() {
+            try {
+                const { data:user } = await axios.post('/user/login',{})
+                if (user.id !== 'anonymous') books.user = user
+            } catch (err) { books.user = { id: err.message } }
+        },
+
+        async getUserInfo() {
+            try {
+                const { data:user } = await axios.get('/user/me')
+                if (user.id !== 'anonymous') books.user = user
+            } catch (err) { books.user = { id: err.message } }
+        },
+    }
+}).mount('#app')
+
+books.getUserInfo()
+books.fetch() // initially fill list of books
+
+document.addEventListener('keydown', (event) => {
+    // hide user info on request
+    if (event.key === 'u')  books.user = undefined
+})
+
+axios.interceptors.request.use(csrfToken)
+function csrfToken (request) {
+    if (request.method === 'head' || request.method === 'get') return request
+    if ('csrfToken' in document) {
+        request.headers['x-csrf-token'] = document.csrfToken
+        return request
+    }
+    return fetchToken().then(token => {
+        document.csrfToken = token
+        request.headers['x-csrf-token'] = document.csrfToken
+        return request
+    }).catch(_ => {
+        document.csrfToken = null // set mark to not try again
+        return request
+    })
+
+    function fetchToken() {
+        return axios.get('/', { headers: { 'x-csrf-token': 'fetch' } })
+        .then(res => res.headers['x-csrf-token'])
+    }
+}

bookshop/app/vue/index.html

@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title> Capire Books </title>
+    <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+    <style>
+        .hovering tr:hover td { color:cyan; background: #123; cursor: pointer; }
+        .rating-stars { color:teal }
+        .succeeded { color:teal }
+        .failed { color:red }
+        .user {text-align: end; color: grey;}
+    </style>
+</head>
+
+<body class="small-container", style="margin-top: 70px;">
+<div id='app'>
+
+    <form class="user" @submit.prevent="login">
+        <div v-if="user">
+            <div v-if="user.tenant">Tenant: {{ user.tenant }}</div>
+            <div> User: {{ user.id }}</div>
+            <div>Locale: {{ user.locale }}</div>
+        </div>
+        <div v-else>
+            <input type="submit" value="Login" class="muted-button">
+            <!-- <a href="/user/login()">Login</a> -->
+        </div>
+    </form>
+
+    <h1> Capire Books </h1>
+
+    <input type="text" placeholder="Search..." @input="search">
+
+    <table id='books' class="hovering">
+        <thead>
+            <th> Book </th>
+            <th> Author </th>
+            <th> Genre </th>
+            <th> Rating </th>
+            <th> Price </th>
+        </thead>
+        <tr v-for="book in list" v-bind:id="book.ID" v-on:click="inspect">
+            <td>{{ book.title }}</td>
+            <td>{{ book.author }}</td>
+            <td>{{ book.genre.name }}</td>
+            <td class="rating-stars">
+                {{ ('★'.repeat(Math.round(book.rating))+'☆☆☆☆☆').slice(0,5) }} ({{ book.numberOfReviews }})
+            </td>
+            <td>{{ book.currency && book.currency.symbol }} {{ book.price }}</td>
+        </tr>
+    </table>
+
+    <div v-if="book">
+        <img v-bind:src="book.image" alt=""/>
+        <label style="text-align:right">
+            <span class="succeeded"> {{ order.succeeded }} </span>
+            <span class="failed"> {{ order.failed }} </span>
+            &nbsp;&nbsp; {{ book.stock }} in stock
+        </label>
+        <form @submit.prevent="submitOrder" style="float:right; display:flex; flex-direction:row-reverse">
+            <input type="number" v-model="order.quantity" v-bind:class="{ failed: order.failed }" style="width:5em">
+            <input type="submit" value="Order:" class="muted-button">
+        </form>
+        <h4> {{ book.title }} </h4>
+        <p> {{ book.descr }} </p>
+    </div>
+    <div v-else>
+        ( click on a row to see details... )
+    </div>
+
+</div>
+</body>
+
+<script src="app.js"></script>
+</html>

bookshop/db/data/sap.capire.bookshop-Authors.csv

@@ -0,0 +1,5 @@
+ID,name,dateOfBirth,placeOfBirth,dateOfDeath,placeOfDeath
+101,Emily Brontë,1818-07-30,"Thornton, Yorkshire",1848-12-19,"Haworth, Yorkshire"
+107,Charlotte Brontë,1818-04-21,"Thornton, Yorkshire",1855-03-31,"Haworth, Yorkshire"
+150,Edgar Allen Poe,1809-01-19,"Boston, Massachusetts",1849-10-07,"Baltimore, Maryland"
+170,Richard Carpenter,1929-08-14,"King’s Lynn, Norfolk",2012-02-26,"Hertfordshire, England"

bookshop/db/data/sap.capire.bookshop-Books.csv

@@ -1,6 +1,6 @@
-ID;title;descr;author_ID;stock;price;currency_code
-201;Wuthering Heights;"Wuthering Heights, Emily Brontë's only novel, was published in 1847 under the pseudonym ""Ellis Bell"". It was written between October 1845 and June 1846. Wuthering Heights and Anne Brontë's Agnes Grey were accepted by publisher Thomas Newby before the success of their sister Charlotte's novel Jane Eyre. After Emily's death, Charlotte edited the manuscript of Wuthering Heights and arranged for the edited version to be published as a posthumous second edition in 1850.";101;12;11.11;GBP
-207;Jane Eyre;"Jane Eyre /ɛər/ (originally published as Jane Eyre: An Autobiography) is a novel by English writer Charlotte Brontë, published under the pen name ""Currer Bell"", on 16 October 1847, by Smith, Elder & Co. of London. The first American edition was published the following year by Harper & Brothers of New York. Primarily a bildungsroman, Jane Eyre follows the experiences of its eponymous heroine, including her growth to adulthood and her love for Mr. Rochester, the brooding master of Thornfield Hall. The novel revolutionised prose fiction in that the focus on Jane's moral and spiritual development is told through an intimate, first-person narrative, where actions and events are coloured by a psychological intensity. The book contains elements of social criticism, with a strong sense of Christian morality at its core and is considered by many to be ahead of its time because of Jane's individualistic character and how the novel approaches the topics of class, sexuality, religion and feminism.";107;11;12.34;GBP
-251;The Raven;"""The Raven"" is a narrative poem by American writer Edgar Allan Poe. First published in January 1845, the poem is often noted for its musicality, stylized language, and supernatural atmosphere. It tells of a talking raven's mysterious visit to a distraught lover, tracing the man's slow fall into madness. The lover, often identified as being a student, is lamenting the loss of his love, Lenore. Sitting on a bust of Pallas, the raven seems to further distress the protagonist with its constant repetition of the word ""Nevermore"". The poem makes use of folk, mythological, religious, and classical references.";150;333;13.13;USD
-252;Eleonora;"""Eleonora"" is a short story by Edgar Allan Poe, first published in 1842 in Philadelphia in the literary annual The Gift. It is often regarded as somewhat autobiographical and has a relatively ""happy"" ending.";150;555;14;USD
-271;Catweazle;Catweazle is a British fantasy television series, starring Geoffrey Bayldon in the title role, and created by Richard Carpenter for London Weekend Television. The first series, produced and directed by Quentin Lawrence, was screened in the UK on ITV in 1970. The second series, directed by David Reid and David Lane, was shown in 1971. Each series had thirteen episodes, most but not all written by Carpenter, who also published two books based on the scripts.;170;22;15;EUR
+ID,title,descr,author_ID,stock,price,currency_code,genre_ID
+201,Wuthering Heights,"Wuthering Heights, Emily Brontë's only novel, was published in 1847 under the pseudonym ""Ellis Bell"". It was written between October 1845 and June 1846. Wuthering Heights and Anne Brontë's Agnes Grey were accepted by publisher Thomas Newby before the success of their sister Charlotte's novel Jane Eyre. After Emily's death, Charlotte edited the manuscript of Wuthering Heights and arranged for the edited version to be published as a posthumous second edition in 1850.",101,12,11.11,GBP,11
+207,Jane Eyre,"Jane Eyre /ɛər/ (originally published as Jane Eyre: An Autobiography) is a novel by English writer Charlotte Brontë, published under the pen name ""Currer Bell"", on 16 October 1847, by Smith, Elder & Co. of London. The first American edition was published the following year by Harper & Brothers of New York. Primarily a bildungsroman, Jane Eyre follows the experiences of its eponymous heroine, including her growth to adulthood and her love for Mr. Rochester, the brooding master of Thornfield Hall. The novel revolutionised prose fiction in that the focus on Jane's moral and spiritual development is told through an intimate, first-person narrative, where actions and events are coloured by a psychological intensity. The book contains elements of social criticism, with a strong sense of Christian morality at its core and is considered by many to be ahead of its time because of Jane's individualistic character and how the novel approaches the topics of class, sexuality, religion and feminism.",107,11,12.34,GBP,11
+251,The Raven,"""The Raven"" is a narrative poem by American writer Edgar Allan Poe. First published in January 1845, the poem is often noted for its musicality, stylized language, and supernatural atmosphere. It tells of a talking raven's mysterious visit to a distraught lover, tracing the man's slow fall into madness. The lover, often identified as being a student, is lamenting the loss of his love, Lenore. Sitting on a bust of Pallas, the raven seems to further distress the protagonist with its constant repetition of the word ""Nevermore"". The poem makes use of folk, mythological, religious, and classical references.",150,333,13.13,USD,16
+252,Eleonora,"""Eleonora"" is a short story by Edgar Allan Poe, first published in 1842 in Philadelphia in the literary annual The Gift. It is often regarded as somewhat autobiographical and has a relatively ""happy"" ending.",150,555,14,USD,15
+271,Catweazle,"Catweazle is a British fantasy television series, starring Geoffrey Bayldon in the title role, and created by Richard Carpenter for London Weekend Television. The first series, produced and directed by Quentin Lawrence, was screened in the UK on ITV in 1970. The second series, directed by David Reid and David Lane, was shown in 1971. Each series had thirteen episodes, most but not all written by Carpenter, who also published two books based on the scripts.",170,22,150,JPY,13

bookshop/db/data/sap.capire.bookshop-Books.texts.csv

@@ -0,0 +1,5 @@
+ID,locale,title,descr
+201,de,Sturmhöhe,"Sturmhöhe (Originaltitel: Wuthering Heights) ist der einzige Roman der englischen Schriftstellerin Emily Brontë (1818–1848). Der 1847 unter dem Pseudonym Ellis Bell veröffentlichte Roman wurde vom viktorianischen Publikum weitgehend abgelehnt, heute gilt er als ein Klassiker der britischen Romanliteratur des 19. Jahrhunderts."
+201,fr,Les Hauts de Hurlevent,"Les Hauts de Hurlevent (titre original : Wuthering Heights), parfois orthographié Les Hauts de Hurle-Vent, est l'unique roman d'Emily Brontë, publié pour la première fois en 1847 sous le pseudonyme d’Ellis Bell. Loin d'être un récit moralisateur, Emily Brontë achève néanmoins le roman dans une atmosphère sereine, suggérant le triomphe de la paix et du Bien sur la vengeance et le Mal."
+207,de,Jane Eyre,"Jane Eyre. Eine Autobiographie (Originaltitel: Jane Eyre. An Autobiography), erstmals erschienen im Jahr 1847 unter dem Pseudonym Currer Bell, ist der erste veröffentlichte Roman der britischen Autorin Charlotte Brontë und ein Klassiker der viktorianischen Romanliteratur des 19. Jahrhunderts. Der Roman erzählt in Form einer Ich-Erzählung die Lebensgeschichte von Jane Eyre (ausgesprochen /ˌdʒeɪn ˈɛə/), die nach einer schweren Kindheit eine Stelle als Gouvernante annimmt und sich in ihren Arbeitgeber verliebt, jedoch immer wieder um ihre Freiheit und Selbstbestimmung kämpfen muss. Als klein, dünn, blass, stets schlicht dunkel gekleidet und mit strengem Mittelscheitel beschrieben, gilt die Heldin des Romans Jane Eyre nicht zuletzt aufgrund der Kino- und Fernsehversionen der melodramatischen Romanvorlage als die bekannteste englische Gouvernante der Literaturgeschichte"
+252,de,Eleonora,"“Eleonora” ist eine Erzählung von Edgar Allan Poe. Sie wurde 1841 erstveröffentlicht. In ihr geht es um das Paradox der Treue in der Treulosigkeit."

bookshop/db/data/sap.capire.bookshop-Genres.csv

@@ -0,0 +1,16 @@
+ID,parent_ID,name
+10,,Fiction
+11,10,Drama
+12,10,Poetry
+13,10,Fantasy
+14,10,Science Fiction
+15,10,Romance
+16,10,Mystery
+17,10,Thriller
+18,10,Dystopia
+19,10,Fairy Tale
+20,,Non-Fiction
+21,20,Biography
+22,21,Autobiography
+23,20,Essay
+24,20,Speech

bookshop/db/init.js

@@ -0,0 +1,19 @@
+/**
+ * In order to keep basic bookshop sample as simple as possible, we don't add
+ * reuse dependencies. This db/init.js ensures we still have a minimum set of
+ * currencies, if not obtained through @capire/common.
+ */
+
+// NOTE: We use cds.on('served') to delay the UPSERTs after the db init
+// to run after all INSERTs from .csv files happened.
+module.exports = cds.on('served', ()=> cds.run(
+  UPSERT.into ('sap.common.Currencies') .columns (
+    [ 'code', 'symbol', 'name' ]
+  ) .rows (
+    [ 'EUR', '€', 'Euro' ],
+    [ 'USD', '$', 'US Dollar' ],
+    [ 'GBP', '£', 'British Pound' ],
+    [ 'ILS', '₪', 'Shekel' ],
+    [ 'JPY', '¥', 'Yen' ],
+  )
+))

bookshop/db/schema.cds

@@ -0,0 +1,31 @@
+using { Currency, managed, sap } from '@sap/cds/common';
+namespace sap.capire.bookshop;
+
+entity Books : managed {
+  key ID   : Integer;
+  title    : localized String(111)  @mandatory;
+  descr    : localized String(1111);
+  author   : Association to Authors @mandatory;
+  genre    : Association to Genres;
+  stock    : Integer;
+  price    : Decimal;
+  currency : Currency;
+  image    : LargeBinary @Core.MediaType: 'image/png';
+}
+
+entity Authors : managed {
+  key ID       : Integer;
+  name         : String(111) @mandatory;
+  dateOfBirth  : Date;
+  dateOfDeath  : Date;
+  placeOfBirth : String;
+  placeOfDeath : String;
+  books        : Association to many Books on books.author = $self;
+}
+
+/** Hierarchically organized Code List for Genres */
+entity Genres : sap.common.CodeList {
+  key ID   : Integer;
+  parent   : Association to Genres;
+  children : Composition of many Genres on children.parent = $self;
+}

bookshop/index.cds

@@ -0,0 +1,5 @@
+namespace sap.capire.bookshop; //> important for reflection
+using from './db/schema';
+using from './srv/cat-service';
+using from './srv/admin-service';
+using from './srv/user-service';

bookshop/index.js

@@ -0,0 +1,2 @@
+const { CatalogService } = require('./srv/cat-service')
+module.exports = { CatalogService }

bookshop/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@capire/bookshop",
+  "version": "1.0.0",
+  "description": "A simple self-contained bookshop service.",
+  "files": [
+    "app",
+    "srv",
+    "db",
+    "index.cds",
+    "index.js"
+  ],
+  "devDependencies": {
+    "@cap-js/sqlite": "*"
+  },
+  "dependencies": {
+    "@sap/cds": ">=7",
+    "express": "^4.17.1"
+  },
+  "scripts": {
+    "genres": "cds serve test/genres.cds",
+    "start": "cds-serve",
+    "watch": "cds watch"
+  }
+}

bookshop/readme.md

@@ -0,0 +1,31 @@
+# Bookshop Getting Started Sample
+
+This stand-alone sample introduces the essential tasks in the development of CAP-based services as also covered in the [Getting Started guide in capire](https://cap.cloud.sap/docs/get-started/in-a-nutshell).
+
+## Hypothetical Use Cases
+
+1. Build a service that allows to browse _Books_ and _Authors_.
+2. Books have assigned _Genres_, which are organized hierarchically.
+3. All users may browse books without login.
+4. All entries are maintained by Administrators.
+5. End users may order books (the actual order mgmt being out of scope).
+
+## Running the Sample
+
+```sh
+npm run watch
+```
+
+## Content & Best Practices
+
+| Links to capire                                                                                           | Sample files / folders               |
+| --------------------------------------------------------------------------------------------------------- | ------------------------------------ |
+| [Project Setup & Layouts](https://cap.cloud.sap/docs/get-started/jumpstart#project-structure)             | [`./`](./)                           |
+| [Domain Modeling with CDS](https://cap.cloud.sap/docs/guides/domain-modeling)                               | [`./db/schema.cds`](./db/schema.cds) |
+| [Defining Services](https://cap.cloud.sap/docs/guides/providing-services#modeling-services)               | [`./srv/*.cds`](./srv)               |
+| [Single-purposed Services](https://cap.cloud.sap/docs/guides/providing-services#single-purposed-services) | [`./srv/*.cds`](./srv)               |
+| [Providing & Consuming Providers](https://cap.cloud.sap/docs/guides/providing-services)                   | http://localhost:4004                |
+| [Using Databases](https://cap.cloud.sap/docs/guides/databases)                                            | [`./db/data/*.csv`](./db/data)       |
+| [Adding Custom Logic](https://cap.cloud.sap/docs/guides/providing-services#adding-custom-logic)           | [`./srv/*.js`](./srv)                |
+| Adding Tests                                                                                              | [`./test`](./test)                   |
+| [Sharing for Reuse](https://cap.cloud.sap/docs/guides/extensibility/composition)                          | [`./index.cds`](./index.cds)         |

bookshop/srv/admin-service.cds

@@ -0,0 +1,5 @@
+using { sap.capire.bookshop as my } from '../db/schema';
+service AdminService @(requires:'admin', path:'/admin') {
+  entity Books as projection on my.Books;
+  entity Authors as projection on my.Authors;
+}

bookshop/srv/admin-service.js

@@ -0,0 +1,13 @@
+const cds = require('@sap/cds/lib')
+
+module.exports = class AdminService extends cds.ApplicationService { init(){
+  this.before ('NEW','Authors', genid)
+  this.before ('NEW','Books', genid)
+  return super.init()
+}}
+
+/** Generate primary keys for target entity in request */
+async function genid (req) {
+  const {id} = await SELECT.one.from(req.target).columns('max(ID) as id')
+  req.data.ID = id - id % 100 + 100 + 1
+}

bookshop/srv/cat-service.cds

@@ -0,0 +1,16 @@
+using { sap.capire.bookshop as my } from '../db/schema';
+service CatalogService @(path:'/browse') {
+
+  /** For displaying lists of Books */
+  @readonly entity ListOfBooks as projection on Books
+  excluding { descr };
+
+  /** For display in details pages */
+  @readonly entity Books as projection on my.Books { *,
+    author.name as author
+  } excluding { createdBy, modifiedBy };
+
+  @requires: 'authenticated-user'
+  action submitOrder ( book: Books:ID, quantity: Integer ) returns { stock: Integer };
+  event OrderedBook : { book: Books:ID; quantity: Integer; buyer: String };
+}

bookshop/srv/cat-service.js

@@ -0,0 +1,34 @@
+module.exports = class CatalogService extends cds.ApplicationService { init() {
+
+  const { Books } = cds.entities('sap.capire.bookshop')
+  const { ListOfBooks } = this.entities
+
+  // Add some discount for overstocked books
+  this.after('each', ListOfBooks, book => {
+    if (book.stock > 111) book.title += ` -- 11% discount!`
+  })
+
+  // Reduce stock of ordered books if available stock suffices
+  this.on('submitOrder', async req => {
+    let { book:id, quantity } = req.data
+    let book = await SELECT.from (Books, id, b => b.stock)
+
+    // Validate input data
+    if (!book) return req.error (404, `Book #${id} doesn't exist`)
+    if (quantity < 1) return req.error (400, `quantity has to be 1 or more`)
+    if (quantity > book.stock) return req.error (409, `${quantity} exceeds stock for book #${id}`)
+
+    // Reduce stock in database and return updated stock value
+    await UPDATE (Books, id) .with ({ stock: book.stock -= quantity })
+    return book
+  })
+
+  // Emit event when an order has been submitted
+  this.after('submitOrder', async (_,req) => {
+    let { book, quantity } = req.data
+    await this.emit('OrderedBook', { book, quantity, buyer: req.user.id })
+  })
+
+  // Delegate requests to the underlying generic service
+  return super.init()
+}}

bookshop/srv/user-service.cds

@@ -0,0 +1,15 @@
+/**
+ * Exposes user information
+ */
+service UserService @(path: '/user') {
+  /**
+   * The current user
+   */
+  @odata.singleton entity me @cds.persistence.skip {
+    id     : String; // user id
+    locale : String;
+    tenant : String;
+  }
+
+  action login() returns me;
+}

bookshop/srv/user-service.js

@@ -0,0 +1,9 @@
+const cds = require('@sap/cds')
+module.exports = class UserService extends cds.Service { init(){
+  this.on('READ', 'me', ({ tenant, user, locale }) => ({ id: user.id, locale, tenant }))
+  this.on('login', (req) => {
+    if (req.user._is_anonymous)
+      req._.res.set('WWW-Authenticate','Basic realm="Users"').sendStatus(401)
+    else return this.read('me')
+  })
+}}

bookshop/test/genres.cds

@@ -0,0 +1,4 @@
+using { sap.capire.bookshop as my } from '../db/schema';
+service TestService {
+  entity Genres as projection on my.Genres;
+}

bookshop/test/genres.http

@@ -3,10 +3,15 @@
 #   Genres
 #
 
-GET http://localhost:4004/admin/Genres?
+GET http://localhost:4004/test/Genres?
 ###
 
-POST http://localhost:4004/admin/Genres?
+GET http://localhost:4004/test/Genres?
+&$filter=parent_ID eq null&$select=name
+&$expand=children($select=name)
+###
+
+POST http://localhost:4004/test/Genres?
 Content-Type: application/json
 
 { "ID":100, "name":"Some Sample Genres...", "children":[
@@ -21,13 +26,13 @@ Content-Type: application/json
 ]}
 ###
 
-GET http://localhost:4004/admin/Genres(100)?
+GET http://localhost:4004/test/Genres(100)?
 # &$expand=children
 # &$expand=children($expand=children($expand=children($expand=children)))
 ###
 
-DELETE http://localhost:4004/admin/Genres(103)
+DELETE http://localhost:4004/test/Genres(103)
 ###
 
-DELETE http://localhost:4004/admin/Genres(100)
+DELETE http://localhost:4004/test/Genres(100)
 ###

bookshop/test/requests.http

@@ -0,0 +1,95 @@
+@server = http://localhost:4004
+@me = Authorization: Basic {{$processEnv USER}}:
+
+
+### ------------------------------------------------------------------------
+# Get service info
+GET {{server}}/browse
+{{me}}
+
+
+### ------------------------------------------------------------------------
+# Get $metadata document
+GET {{server}}/browse/$metadata
+{{me}}
+
+
+### ------------------------------------------------------------------------
+# Browse Books as any user
+GET {{server}}/browse/ListOfBooks?
+  # &$select=title,stock
+  &$expand=genre
+  # &sap-language=de
+{{me}}
+
+
+### ------------------------------------------------------------------------
+# Fetch Authors as admin
+GET {{server}}/admin/Authors?
+  # &$select=name,dateOfBirth,placeOfBirth
+  # &$expand=books($select=title;$expand=currency)
+  # &$filter=ID eq 101
+  # &sap-language=de
+Authorization: Basic alice:
+
+### ------------------------------------------------------------------------
+# Create Author
+POST {{server}}/admin/Authors
+Content-Type: application/json;IEEE754Compatible=true
+Authorization: Basic alice:
+
+{
+  "ID": 112,
+  "name": "Shakespeeeeere",
+  "age": 22
+}
+
+
+### ------------------------------------------------------------------------
+# Create book
+POST {{server}}/admin/Books
+Content-Type: application/json;IEEE754Compatible=true
+Authorization: Basic alice:
+
+{
+  "ID": 2,
+  "title": "Poems : Pocket Poets",
+  "descr": "The Everyman's Library Pocket Poets hardcover series is popular for its compact size and reasonable price which does not compromise content. Poems: Bronte contains poems that demonstrate a sensibility elemental in its force with an imaginative discipline and flexibility of the highest order. Also included are an Editor's Note and an index of first lines.",
+  "author": { "ID": 101 },
+  "genre": { "ID": 12 },
+  "stock": 5,
+  "price": "12.05",
+  "currency": { "code": "USD" }
+}
+
+
+### ------------------------------------------------------------------------
+# Put image to books
+PUT {{server}}/admin/Books(2)/image
+Content-Type: image/png
+Authorization: Basic alice:
+
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANwAAADcCAYAAAAbWs+BAAAGwElEQVR4Ae3cwZFbNxBFUY5rkrDTmKAUk5QT03Aa44U22KC7NHptw+DRikVAXf8fzC3u8Hj4R4AAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAgZzAW26USQT+e4HPx+Mz+RRvj0e0kT+SD2cWAQK1gOBqH6sEogKCi3IaRqAWEFztY5VAVEBwUU7DCNQCgqt9rBKICgguymkYgVpAcLWPVQJRAcFFOQ0jUAsIrvaxSiAqILgop2EEagHB1T5WCUQFBBflNIxALSC42scqgaiA4KKchhGoBQRX+1glEBUQXJTTMAK1gOBqH6sEogKCi3IaRqAWeK+Xb1z9iN558fHxcSPS9p2ezx/ROz4e4TtIHt+3j/61hW9f+2+7/+UXbifjewIDAoIbQDWSwE5AcDsZ3xMYEBDcAKqRBHYCgtvJ+J7AgIDgBlCNJLATENxOxvcEBgQEN4BqJIGdgOB2Mr4nMCAguAFUIwnsBAS3k/E9gQEBwQ2gGklgJyC4nYzvCQwICG4A1UgCOwHB7WR8T2BAQHADqEYS2AkIbifjewIDAoIbQDWSwE5AcDsZ3xMYEEjfTzHwiK91B8npd6Q8n8/oGQ/ckRJ9vvQwv3BpUfMIFAKCK3AsEUgLCC4tah6BQkBwBY4lAmkBwaVFzSNQCAiuwLFEIC0guLSoeQQKAcEVOJYIpAUElxY1j0AhILgCxxKBtIDg0qLmESgEBFfgWCKQFhBcWtQ8AoWA4AocSwTSAoJLi5pHoBAQXIFjiUBaQHBpUfMIFAKCK3AsEUgLCC4tah6BQmDgTpPsHSTFs39p6fQ7Q770UsV/Ov19X+2OFL9wxR+rJQJpAcGlRc0jUAgIrsCxRCAtILi0qHkECgHBFTiWCKQFBJcWNY9AISC4AscSgbSA4NKi5hEoBARX4FgikBYQXFrUPAKFgOAKHEsE0gKCS4uaR6AQEFyBY4lAWkBwaVHzCBQCgitwLBFICwguLWoegUJAcAWOJQJpAcGlRc0jUAgIrsCxRCAt8J4eePq89B0ar3ZnyOnve/rfn1+400/I810lILirjtPLnC4guNNPyPNdJSC4q47Ty5wuILjTT8jzXSUguKuO08ucLiC400/I810lILirjtPLnC4guNNPyPNdJSC4q47Ty5wuILjTT8jzXSUguKuO08ucLiC400/I810lILirjtPLnC4guNNPyPNdJSC4q47Ty5wuILjTT8jzXSUguKuO08ucLiC400/I810l8JZ/m78+szP/zI47fJo7Q37vgJ7PHwN/07/3TOv/9gu3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhAcMPAxhNYBQS3avhMYFhg4P6H9J0maYHXuiMlrXf+vOfA33Turf3C5SxNItAKCK4lsoFATkBwOUuTCLQCgmuJbCCQExBcztIkAq2A4FoiGwjkBASXszSJQCsguJbIBgI5AcHlLE0i0AoIriWygUBOQHA5S5MItAKCa4lsIJATEFzO0iQCrYDgWiIbCOQEBJezNIlAKyC4lsgGAjkBweUsTSLQCgiuJbKBQE5AcDlLkwi0Akff//Dz6U+/I6U1/sUNr3bnytl3kPzi4bXb/cK1RDYQyAkILmdpEoFWQHAtkQ0EcgKCy1maRKAVEFxLZAOBnIDgcpYmEWgFBNcS2UAgJyC4nKVJBFoBwbVENhDICQguZ2kSgVZAcC2RDQRyAoLLWZpEoBUQXEtkA4GcgOByliYRaAUE1xLZQCAnILicpUkEWgHBtUQ2EMgJCC5naRKBVkBwLZENBHIC/4M7TXIv+3PS22d24qvdQfL3C/7N5P5i/MLlLE0i0AoIriWygUBOQHA5S5MItAKCa4lsIJATEFzO0iQCrYDgWiIbCOQEBJezNIlAKyC4lsgGAjkBweUsTSLQCgiuJbKBQE5AcDlLkwi0AoJriWwgkBMQXM7SJAKtgOBaIhsI5AQEl7M0iUArILiWyAYCOQHB5SxNItAKCK4lsoFATkBwOUuTCBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIDAvyrwDySEJ2VQgUSoAAAAAElFTkSuQmCC
+
+
+### ------------------------------------------------------------------------
+# Reading image from from the server directly
+GET {{server}}/browse/Books(2)/image
+
+
+### ------------------------------------------------------------------------
+# Submit Order as authenticated user
+# (send that three times to get out-of-stock message)
+POST {{server}}/browse/submitOrder
+Content-Type: application/json
+{{me}}
+
+{ "book":201, "quantity":5 }
+
+
+### ------------------------------------------------------------------------
+# Browse Genres
+GET {{server}}/browse/Genres?
+# &$filter=parent_ID eq null&$select=name
+# &$expand=children($select=name)
+{{me}}

bookstore/index.cds

@@ -0,0 +1,2 @@
+namespace sap.capire.bookshop; //> important for reflection
+using from './srv/mashup';

bookstore/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@capire/bookstore",
+  "version": "1.0.0",
+  "dependencies": {
+    "@capire/bookshop": "*",
+    "@capire/reviews": "*",
+    "@capire/orders": "*",
+    "@capire/common": "*",
+    "@capire/data-viewer": "*",
+    "@sap/cds": ">=5",
+    "express": "^4.17.1"
+  },
+  "cds": {
+    "requires": {
+      "ReviewsService": {
+        "kind": "odata",
+        "model": "@capire/reviews"
+      },
+      "OrdersService": {
+        "kind": "odata",
+        "model": "@capire/orders"
+      },
+      "messaging": {
+        "[development]": { "kind": "file-based-messaging" },
+        "[hybrid]": { "kind": "enterprise-messaging-shared" },
+        "[production]": { "kind": "enterprise-messaging" }
+      },
+      "db": {
+        "kind": "sql"
+      }
+    },
+    "log": { "service": true }
+  }
+}

bookstore/server.js

@@ -0,0 +1,15 @@
+const cds = require ('@sap/cds')
+
+// Add mashup logic
+cds.once('served', require('./srv/mashup'))
+
+// Add routes to UIs from imported packages
+cds.once('bootstrap',(app)=>{
+  app.serve ('/bookshop') .from ('@capire/bookshop','app/vue')
+  app.serve ('/reviews') .from ('@capire/reviews','app/vue')
+  app.serve ('/orders') .from('@capire/orders','app/orders')
+  app.serve ('/data') .from('@capire/data-viewer','app/viewer')
+})
+
+// Add Swagger UI
+require('./srv/swagger-ui')

bookstore/srv/mashup.cds

@@ -0,0 +1,31 @@
+////////////////////////////////////////////////////////////////////////////
+//
+//    Enhancing bookshop with Reviews and Orders provided through
+//    respective reuse packages and services
+//
+
+
+//
+//  Extend Books with access to Reviews and average ratings
+//
+using { sap.capire.bookshop.Books } from '@capire/bookshop';
+using { ReviewsService.Reviews } from '@capire/reviews';
+extend Books with {
+  reviews : Composition of many Reviews on reviews.subject = $self.ID;
+  rating  : type of Reviews:rating; // average rating
+  numberOfReviews : Integer @title : '{i18n>NumberOfReviews}';
+}
+
+
+//
+//  Extend Orders with Books as Products
+//
+using { sap.capire.orders.Orders } from '@capire/orders';
+extend Orders:Items with {
+  book : Association to Books on product.ID = book.ID
+}
+
+// Ensure models from all imported packages are loaded
+using from '@capire/orders/app/fiori';
+using from '@capire/data-viewer';
+using from '@capire/common';

bookstore/srv/mashup.js

@@ -0,0 +1,58 @@
+////////////////////////////////////////////////////////////////////////////
+//
+//    Mashing up bookshop services with required services...
+//
+module.exports = async()=>{ // called by server.js
+
+  const cds = require('@sap/cds')
+  const CatalogService = await cds.connect.to ('CatalogService')
+  const ReviewsService = await cds.connect.to ('ReviewsService')
+  const OrdersService = await cds.connect.to ('OrdersService')
+  const db = await cds.connect.to ('db')
+
+  // reflect entity definitions used below...
+  const { Books } = db.entities ('sap.capire.bookshop')
+
+  //
+  // Delegate requests to read reviews to the ReviewsService
+  // Note: prepend is neccessary to intercept generic default handler
+  //
+  CatalogService.prepend (srv => srv.on ('READ', 'Books/reviews', (req) => {
+    console.debug ('> delegating request to ReviewsService')
+    const [id] = req.params, { columns, limit } = req.query.SELECT
+    return ReviewsService.read ('Reviews',columns).limit(limit).where({subject:String(id)})
+  }))
+
+  //
+  // Create an order with the OrdersService when CatalogService signals a new order
+  //
+  CatalogService.on ('OrderedBook', async (msg) => {
+    const { book, quantity, buyer } = msg.data
+    const { title, price } = await db.tx(msg).read (Books, book, b => { b.title, b.price })
+    return OrdersService.tx(msg).create ('Orders').entries({
+      OrderNo: 'Order at '+ (new Date).toLocaleString(),
+      Items: [{ product:{ID:`${book}`}, title, price, quantity }],
+      buyer, createdBy: buyer
+    })
+  })
+
+  //
+  // Update Books' average ratings when ReviewsService signals updated reviews
+  //
+  ReviewsService.on ('reviewed', (msg) => {
+    console.debug ('> received:', msg.event, msg.data)
+    const { subject, count, rating } = msg.data
+    return UPDATE(Books,subject).with({ numberOfReviews:count, rating })
+  })
+
+  //
+  // Reduce stock of ordered books for orders are created from Orders admin UI
+  //
+  OrdersService.on ('OrderChanged', (msg) => {
+    console.debug ('> received:', msg.event, msg.data)
+    const { product, deltaQuantity } = msg.data
+    return UPDATE (Books) .where ('ID =', product)
+    .and ('stock >=', deltaQuantity)
+    .set ('stock -=', deltaQuantity)
+  })
+}

bookstore/srv/swagger-ui.js

@@ -0,0 +1,10 @@
+
+// -----------------------------------------------------------------------
+// Adding Swagger UI - see https://cap.cloud.sap/docs/advanced/openapi
+const cds = require ('@sap/cds')
+try {
+  const cds_swagger = require ('cds-swagger-ui-express')
+  cds.once ('bootstrap', app => app.use (cds_swagger()) )
+} catch (err) {
+  if (err.code !== 'MODULE_NOT_FOUND')  throw err
+}

bookstore/test/requests.http

@@ -0,0 +1,81 @@
+
+@bookshop = http://localhost:4004
+@reviews-service = {{bookshop}}/reviews
+# Uncomment this when running a separate reviews service
+# @reviews-service = http://localhost:4005/reviews
+
+
+
+#################################################
+#
+#   Reviews Service
+#
+
+GET {{reviews-service}}/Reviews
+
+###
+
+POST {{reviews-service}}/Reviews
+Authorization: Basic {{$processEnv USER}}:
+Content-Type: application/json
+
+{"subject":"201", "title":"boo", "rating":3 }
+
+
+
+#################################################
+#
+#   Bookshop Services
+#
+
+GET {{bookshop}}/browse/Books/201/reviews?
+&$select=rating,date,title
+&$top=3
+
+###
+
+GET {{bookshop}}/browse/Books(201)?
+&$select=ID,title,rating
+&$expand=reviews
+
+###
+
+GET {{bookshop}}/browse/Books?
+  &$select=title,author&$expand=currency
+Accept-Language: de
+
+#################################################
+#
+#   Orders Service, incl. draft choreography
+#
+@newOrderID = e939604c-ab83-4d4f-bdb6-95fe30b3773e
+
+GET {{bookshop}}/orders/Orders
+
+### Create order, still inactive
+POST {{bookshop}}/orders/Orders
+Content-Type: application/json
+
+{"ID": "{{newOrderID}}"}
+
+### Get inactive order.  We have to specify `IsActiveEntity`.
+GET {{bookshop}}/orders/Orders(ID={{newOrderID}},IsActiveEntity=false)
+
+### Activate order using `.../<servicename>.draftActivate`
+POST {{bookshop}}/orders/Orders(ID={{newOrderID}},IsActiveEntity=false)/OrdersService.draftActivate
+Content-Type: application/json
+
+### Get active order
+GET {{bookshop}}/orders/Orders(ID={{newOrderID}},IsActiveEntity=true)
+
+### Create author
+POST {{bookshop}}/admin/Authors
+Content-Type: application/json
+Authorization: Basic alice:
+
+{
+  "ID": 200,
+  "name": "William Shakespeare",
+  "dateOfBirth": "1564-04-26",
+  "dateOfDeath": "1616-04-23"
+}

common/data/sap.common-Currencies.csv

@@ -2,7 +2,7 @@ code;symbol;name;descr;numcode;minor;exponent
 EUR;€;Euro;European Euro;978;Cent;2
 USD;$;US Dollar;United States Dollar;840;Cent;2
 CAD;$;Canadian Dollar;Canadian Dollar;124;Cent;2
-AUD;$;Australian Dollar;Canadian Dollar;036;Cent;2
+AUD;$;Australian Dollar;Australian Dollar;036;Cent;2
 GBP;£;British Pound;Great Britain Pound;826;Penny;2
 ILS;₪;Shekel;Israeli New Shekel;376;Agorat;2
 INR;₹;Rupee;Indian Rupee;356;Paise;2

common/data/sap.common-Currencies_texts.csv

@@ -5,9 +5,11 @@ CAD;de;Kanadischer Dollar;Kanadischer Dollar
 AUD;de;Australischer Dollar;Australischer Dollar
 GBP;de;Pfund;Britische Pfund
 ILS;de;Schekel;Israelische Schekel
+JPY;de;Yen;Japanische Yen
 EUR;fr;euro;de la Zone euro
 USD;fr;dollar;dollar des États-Unis
 CAD;fr;dollar canadien;dollar canadien
 AUD;fr;dollar australien;dollar australien
 GBP;fr;livre sterling;pound sterling
-ILS;fr;Shekel;shekel israelien
+ILS;fr;Shekel;shekel israelien
+JPY;fr;Yen;Yen japonais

common/data/sap.common-Languages.csv

@@ -0,0 +1,5 @@
+code;name
+de;German
+fr;French
+en;English
+en_GB;British English

common/data/sap.common-Languages_texts.csv

@@ -0,0 +1,10 @@
+code;locale;name
+de;en;German
+de;de;Deutsch
+de;fr;Allemande
+fr;en;French
+fr;de;Französisch
+fr;fr;Francais
+en;en;English
+en;de;Englisch
+en;fr;Anglais

common/index.cds

@@ -0,0 +1,45 @@
+using { sap } from '@sap/cds/common';
+
+extend sap.common.Currencies with {
+  // Currencies.code = ISO 4217 alphabetic three-letter code
+  // with the first two letters being equal to ISO 3166 alphabetic country codes
+  // See also:
+  // [1] https://www.iso.org/iso-4217-currency-codes.html
+  // [2] https://www.currency-iso.org/en/home/tables/table-a1.html
+  // [3] https://www.ibm.com/support/knowledgecenter/en/SSZLC2_7.0.0/com.ibm.commerce.payments.developer.doc/refs/rpylerl2mst97.htm
+  numcode  : Integer;
+  exponent : Integer; //> e.g. 2 --> 1 Dollar = 10^2 Cent
+  minor    : String; //> e.g. 'Cent'
+}
+
+
+/**
+ * The Code Lists below are designed as optional extensions to
+ * the base schema. Switch them on by adding an Association to
+ * one of the code list entities in your models or by:
+ * annotate sap.common.Countries with @cds.persistence.skip:false;
+ */
+
+context sap.common.countries {
+
+  extend sap.common.Countries {
+    regions   : Composition of many Regions on regions._parent = $self.code;
+  }
+
+  entity Regions : sap.common.CodeList {
+    key code : String(5); // ISO 3166-2 alpha5 codes, e.g. DE-BW
+    children  : Composition of many Regions on children._parent = $self.code;
+    cities    : Composition of many Cities on cities.region = $self;
+    _parent   : String(11);
+  }
+  entity Cities : sap.common.CodeList {
+    key code  : String(11);
+    region    : Association to Regions;
+    districts : Composition of many Districts on districts.city = $self;
+  }
+  entity Districts : sap.common.CodeList {
+    key code  : String(11);
+    city      : Association to Cities;
+  }
+
+}

common/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@capire/common",
+  "description": "Provides a pre-built extension package for std @sap/cds/common",
+  "version": "1.0.0",
+  "dependencies": {
+    "@sap/cds": "*"
+  }
+}

data-viewer/app/viewer/app.js

@@ -0,0 +1,119 @@
+/* global Vue axios */ //> from vue.html
+const GET = (url) => axios.get('/odata/v4/-data'+url)
+const storageGet = (key, def) => localStorage.getItem('data-viewer:'+key) || def
+const storageSet = (key, val) => localStorage.setItem('data-viewer:'+key, val)
+const columnKeysFirst = (c1, c2) => {
+  if (c1.isKey  && !c2.isKey) return -1
+  if (!c1.isKey && c2.isKey) return 1
+  if (c1.isKey && c2.isKey) return c1.name.localeCompare(c2.name)
+  return 0 // retain natural order of normal columns
+}
+
+const vue = Vue.createApp ({
+
+  data() { return {
+    error: undefined,
+    dataSource: storageGet('data-source', 'db'),
+    skip: storageGet('skip', 0),
+    top: storageGet('top', 20),
+    entity: storageGet('entity') ? JSON.parse(storageGet('entity')) : undefined,
+    entities: [],
+    columns: [],
+    data: [],
+    rowDetails: {},
+    rowKey: storageGet('rowKey')
+  }},
+
+  watch: {
+    dataSource: (v) => { storageSet('data-source', v);  vue.fetchEntities() },
+    skip: (v) => { storageSet('skip', v); if (vue.entity)  vue.fetchData() },
+    top:  (v) => { storageSet('top',  v); if (vue.entity)  vue.fetchData() },
+  },
+
+  methods: {
+
+    async fetchEntities () {
+      let url = `/Entities`
+      if (vue.dataSource === 'db')  url += `?dataSource=db`
+      const {data} = await GET(url)
+      vue.entities = data.value
+      vue.entities.forEach(entity => entity.columns.sort(columnKeysFirst))
+      const entity = vue.entity && vue.entities.find(e => e.name === vue.entity.name)
+      if (entity) { // restore selection from previous fetch
+        vue.columns = entity.columns
+        await vue.fetchData(entity)
+      } else {
+        vue.entity = undefined
+        vue.columns = []
+        vue.data = []
+        vue.rowDetails = {}
+      }
+    },
+
+    async inspectEntity (eve) {
+      const entity = vue.entity = vue.entities [eve.currentTarget.rowIndex-1]
+      storageSet('entity', JSON.stringify(entity))
+      vue.columns = vue.entities.find(e => e.name === entity.name).columns
+      return await this.fetchData()
+    },
+
+    async fetchData () {
+      let url = `/Data?entity=${vue.entity.name}&$skip=${vue.skip}&$top=${vue.top}`
+      if (vue.dataSource === 'db')  url += `&dataSource=db`
+
+      try {
+        const {data} = await GET(url)
+        // sort data along column order
+        const columnIndexes = {}
+        vue.columns.forEach((col, i) => columnIndexes[col.name] = i)
+        vue.data = data.value.map(d => d.record
+          .sort((r1, r2) => columnIndexes[r1.column] - columnIndexes[r2.column])
+          .map(r => r.data)
+        )
+        const row = vue.data.find(data => vue._makeRowKey(data) === vue.rowKey)
+        if (row)  vue._setRowDetails(row)
+        else vue.rowDetails = {}
+        vue.error = undefined
+      } catch (err) {
+        vue.data = []
+        vue.rowDetails = {}
+        if (err.response?.data?.error) {
+          vue.error = err.response.data.error
+        } else {
+          vue.error = { code:err.code, message:err.message }
+        }
+      }
+
+    },
+
+    inspectRow (eve) {
+      vue.rowDetails = {}
+      const selectedRow = eve.currentTarget.rowIndex-1
+      vue.rowKey = vue._makeRowKey(vue.data[selectedRow])
+      storageSet('rowKey', vue.rowKey)
+      vue._setRowDetails(vue.data[selectedRow])
+    },
+
+    _setRowDetails(row) {
+      vue.rowDetails = {}
+      row.forEach((line, colIndex) => {
+        vue.rowDetails[vue.columns[colIndex].name] = line
+      })
+    },
+
+    _makeRowKey(row) {
+      // to identify a row, build a key string out of all key columns' values
+      return row
+        .filter((_, colIndex) => vue.columns[colIndex] && vue.columns[colIndex].isKey)
+        .reduce(((prev, next) => prev += next), '')
+    },
+
+    isActiveRow(row) {
+      return vue._makeRowKey(row) === vue.rowKey
+    }
+
+  }
+})
+.mount('#app')
+
+vue.fetchEntities()

data-viewer/app/viewer/index.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Data Browser</title>
+  <link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css">
+  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
+  <script src="app.js" defer></script>
+
+  <style>
+    th { position: sticky; top:0; z-index: 2; background-color: white; }
+    .noscroll { overflow: hidden; }
+    .hovering tr:hover td { background: #ebeefc; cursor: pointer; }
+    .highlight { background: #ebeefc !important; }
+    .rating-stars { color:teal }
+    .succeeded { color:teal }
+    .failed { color:red }
+    .condensed { max-width: 100px; text-overflow: ellipsis; white-space: nowrap; }
+    .key { font-weight: bold }
+    .not-key { font-weight: lighter;}
+    .with-sidebar { display: flex; flex-wrap: wrap; gap: 1rem; }
+    .sidebar    { flex-basis: 20rem; flex-grow: 1; }
+    .sidebar-main { height: 100vh; overflow-y: scroll; }
+    .not-sidebar  { flex-basis: 0; flex-grow: 999; min-inline-size: 50%; align-items: stretch;}
+    .not-sidebar-main { max-height: 40vh; overflow-y: scroll; }
+    .not-sidebar-sub {  max-height: 40vh; overflow-y: scroll; }
+    .horizontal label { display: inline; }
+    .horizontal input { width: initial; display: inline; }
+    .error { color: red; }
+  </style>
+</head>
+
+<body class="noscroll">
+<div id='app' class="full-container">
+
+  <h1>Data Browser &ndash; {{ entity ? entity.name : '' }}</h1>
+
+  <div class="with-sidebar">
+    <div class="sidebar">
+      <div class="horizontal" style="padding: 0.75rem 0;">
+        <label>Datasource:</label>
+        <input type="radio" id="dataSource-db" value="db" v-model="dataSource">
+        <label for="dataSource-db">Database</label>
+        <input type="radio" id="dataSource-srv" value="service" v-model="dataSource">
+        <label for="dataSource-srv">Service</label>
+      </div>
+      <div class="sidebar-main">
+        <table id='entities' class="hovering">
+          <thead>
+            <th>Entity Name</th>
+          </thead>
+          <tr v-for="e in entities" :key="e.name" @click="inspectEntity" :class="{'highlight': (entity && e.name === entity.name)}">
+            <td>{{ e.name }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+
+    <div class="not-sidebar">
+      <div class="horizontal">
+        <label for="skip">Skip:</label>
+        <input id="skip" v-model.lazy="skip" title="No. of entries to skip" type="number" min="0">
+        <label for="top">Top:</label>
+        <input id="top" v-model.lazy="top" title="No. of entries to read" type="number" min="0">
+      </div>
+      <div v-if="data" class="not-sidebar-main">
+        <table id='data' class="hovering striped-table condensed">
+          <thead>
+            <th v-for="col in columns" :title="col.type" :class="[col.isKey ? 'key' : 'not-key']">{{ col.name }} </th>
+          </thead>
+          <tr v-for="row in data" @click="inspectRow" :class="{'highlight': isActiveRow(row)}">
+            <td v-for="d in row" :title="d">{{ d }}</td>
+          </tr>
+        </table>
+      </div>
+      <div v-if="error" class="not-sidebar-main error">
+        Error: {{ error.code ? error.code + ' &ndash; ' + error.message : error.message }}
+      </div>
+      <p></p>
+      <div v-if="rowDetails"  class="not-sidebar-sub">
+        <table id='rowDetails'>
+          <tr v-for="(key, value) in rowDetails" >
+            <td class="key">{{ value }}</td>
+            <td>{{ key }}</td>
+          </tr>
+        </table>
+      </div>
+    </div>
+  </div>
+
+</div>
+</body>
+
+</html>

data-viewer/index.cds

@@ -0,0 +1 @@
+using from './srv/data-service';

data-viewer/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@capire/data-viewer",
+  "version": "0.1.0",
+  "description": "A generic browser for data",
+  "dependencies": {
+    "@sap/cds": ">=5.0.4"
+  },
+  "files": [
+    "app",
+    "srv",
+    "index.cds"
+  ]
+}

data-viewer/srv/data-service.cds

@@ -0,0 +1,30 @@
+/**
+ * Exposes data + entity metadata
+ */
+@requires:'authenticated-user'
+@odata service DataService @( path:'-data' ) {
+
+  /**
+   * Metadata like name and columns/elements
+   */
+  entity Entities @cds.persistence.skip {
+    key name : String;
+    columns: Composition of many {
+      name :  String;
+      type :  String;
+      isKey:  Boolean;
+    }
+  }
+
+  /**
+   * The actual data, organized by column name
+   */
+  entity Data @cds.persistence.skip {
+    key ID   : String;   // to be OData-compliant
+    record   : array of {
+      column : String;
+      data   : String;
+    }
+  }
+
+}

data-viewer/srv/data-service.js

@@ -0,0 +1,61 @@
+const cds = require('@sap/cds')
+const log = cds.log('data')
+
+class DataService extends cds.ApplicationService { init(){
+
+  this.on ('READ', 'Entities', req => {
+    const { dataSource } = req.req.query
+    const srvPrefixes = cds.db.model.all('service').map(srv => srv.name+'.')
+    const dataSourceFilter = dataSource === 'db'
+      ? e => e['@cds.persistence.skip'] !== true // for DB, excl. entities w/o persistence
+      : e => !!srvPrefixes.find(srvName => e.name.startsWith(srvName)) // only entities reachable from a service
+
+    return cds.db.model.all('entity')
+      .filter (e => req.data && req.data.name ? e.name === req.data.name : true)  // honor name filter from request, if any
+      .filter (e => !e.name.startsWith('DRAFT.'))  // exclude synthetic stuff
+      .filter (e => !e.name.startsWith('DataService.'))  // exclude this service
+      .filter (dataSourceFilter)
+      .sort((e1, e2) => e1.name.localeCompare(e2.name))
+      .map(e => {
+        const columns = Object.entries(e.elements)
+          .filter(([_, el]) => !(el instanceof cds.Association)) // exclude assocs+compositions
+          .map(([name, el]) => { return { name, type: el.type, isKey:!!el.key }})
+        return { name: e.name, columns }
+      })
+    })
+
+  this.on ('READ', 'Data', async req => {
+    const { entity: entityName, dataSource: dataSourceName } = req.req.query
+    if (!entityName)  return req.reject(400, `Must provide 'entity' query`)
+    const entity = cds.db.model.definitions[entityName]
+    if (!entity)  return req.reject(404, 'No such entity: ' + entityName)
+
+    const query = SELECT.from(entity)
+    query.SELECT.limit = req.query.SELECT.limit  // forward $skip / $top
+
+    const dataSource = findDataSource(dataSourceName, entityName)
+    const res = await dataSource.run(query)
+    return res.map((line) => {
+      const record = Object.entries(line).map(([column, data]) => ({ column, data }))
+      return {
+        record,
+        ID: cds.utils.uuid() // just to be OData-compliant
+      }
+    })
+  })
+
+  return super.init()
+}}
+
+module.exports = { DataService }
+
+function findDataSource(dataSourceName, entityName) {
+  for (let srv of Object.values(cds.services)) { // all connected services
+    if (!srv.name)  continue // FIXME intermediate/pending in cds.services ?
+    if (dataSourceName === srv.name || entityName.startsWith(srv.name+'.')) {
+      log._debug && log.debug(`using ${srv.name} as data source`)
+      return srv
+    }
+  }
+  return cds.services.db // fallback
+}

eslint.config.js

@@ -0,0 +1,27 @@
+const eslintCds = require('@sap/eslint-plugin-cds')
+const eslintJs = require('@eslint/js')
+const globals = require('globals')
+
+module.exports = [
+  eslintJs.configs.recommended,
+  eslintCds.configs.recommended,
+  {
+    languageOptions: {
+      globals: {
+        sap: true,
+        ...globals.es2022,
+        ...globals.browser,
+        ...globals.node,
+        ...globals.jest,
+        ...globals.mocha,
+        ...eslintCds.configs.recommended.languageOptions.globals
+      }
+    },
+    rules: {
+      'no-console': 'off',
+      'no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      'require-atomic-updates': 'off',
+      'require-await': 'warn'
+    }
+  }
+]

etc/dark.drawio.svg

@@ -0,0 +1,195 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="357px" height="283px" viewBox="-0.5 -0.5 357 283" content="&lt;mxfile&gt;&lt;diagram id=&quot;QQJxv4aCTC7ZgE7HHOvM&quot; name=&quot;Page-1&quot;&gt;7VrZcqM4FP0av7q0L4+T9DIvU9VVeZhnFtlQwRYly7HTX98XgzBgOpNJG7eZGlKVwNECuudwdSSyoI+b41cXldlfNjXFgqD0uKCfFoQIIuF3BbzWACO6BtYuT2sInYGn/LupQRzQfZ6aXYPVkLe28HnZBxO73ZrE97DIOXvoV1vZIu0BZbQ2vceogKckKsxFtb/z1Gc1qsKwKvxPk6+zcGcsmvHFUfK8dna/be63IBQxXpdtotBRc9NdFqX20IHo5wV9dNb6+mxzfDRFFdd+zL78pLR9aGe2/j0NSN3gJSr2zbgXDCVRmTtTNSIi2pQL+rCNd9UfuC6g24fYwdnad5EAxNY+7zJbhgLoJT5XPg3Zv4YYw+jL6jQzx2htt1ClNC7fGG/cGf0WIAjOwyHLvXkqo6RqdgDhAZb5TQFXGE5X+dEELVXXu2fjkyri6FRYFI+2sO50c7paGZEkVSXv7LPplKRSxwi1JYF+0g6hG98m5C/GeXPsQE28vxoLD+9eoUpTSiSrm4QXQ9L6+nCWmW7kkXUUphosaoS9bns+8wsnDcXjdNNJ6Pa2an73fKvEjPMdK874zfimktyMb3Ztvp15yQ2k1rtnO+VGpWyMbUViKsRUbFOB+2xjfTO2+bXZTuxmA8TdPdkrXv1UuN36Dl4fYyIQp+NWImDhRbyBCMS1RWBdatwc3vjIqNVofheJMvFqKrKxEr+NbHlJ9pATs03/qOwwXCVFtNvlST/EvZBeBgiaN/GXp/LI+d71INRfTsdbgd3ZvUtML2FBp2vjew7FpMGd/yT4neDykeAGzJki8vlL39OPRby5wzebw/OeuSW4P3lzRPp91MNpmnWN9kVPYmD7+KCnOgoXPZ0k0A78XapQ81aFuHdVwKu75Iq2B+knAKrJslNKqfyYZIhmS4ZFewzXDQgvO6VC0Kn0pOetJzJzPTH+NtHX0hN7W7bX01PY4pmroNjMBcWHgppET3ygJzaZnIJlu5rl3e3Lssj/d73/wvXecp2LyUj+GFD4BJ2A4tD9M2hwys1oVtJC0miyRaoeEHjDbSk8sg85pwkgCLA7A4QsNI8pYOgp5CA7T+QpyGCqueIkMLLVOXdJibtSFAaqJVKcICw1ZIuw+dAuRzQoQSKGKFeSsY+aVIyXRGMmtSJIEBk+jrRrKw2yJpprwTAYmek86shm6qz0FL6Z3q1JxVpAClKnL8MaCc4HmUMuYaUDVhXWuUroD267EFClolhKLhHSlA1uwtmSUsGY4lphitRkarr6ruwqty7/T5ubCyczovl3f3Qjt3Q3974rO0gA/5hL6IjbEb/V3Ei9FFIpyBuKcKF0f5KozA3lEqYQLDimUvyCuaGQSSFzYMkoHtwFvI1gkGGwokwJWHBdKXvA5fkfQOrq5/+woZ9/AA==&lt;/diagram&gt;&lt;/mxfile&gt;" style="background-color: rgb(0, 68, 85);">
+    <defs/>
+    <g>
+        <path d="M 199 202 L 249 202 L 269 242 L 249 282 L 199 282 L 179 242 Z" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 242px; margin-left: 180px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                @capire/
+                                <br/>
+                                <b>
+                                    bookshop
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="224" y="246" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 199 101 L 249 101 L 269 141 L 249 181 L 199 181 L 179 141 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 141px; margin-left: 180px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                @capire/
+                                <br/>
+                                <b>
+                                    bookstore
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="224" y="145" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 286 48 L 336 48 L 356 88 L 336 128 L 286 128 L 266 88 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 88px; margin-left: 267px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                @capire/
+                                <br/>
+                                <b>
+                                    reviews
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="311" y="92" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 286 153 L 336 153 L 356 193 L 336 233 L 286 233 L 266 193 Z" fill="#f5f5f5" stroke="#666666" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 193px; margin-left: 267px;">
+                        <div data-drawio-colors="color: #333333; " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(51, 51, 51); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                @capire/
+                                <br/>
+                                <b>
+                                    common
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="311" y="197" fill="#333333" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 111 153 L 161 153 L 181 193 L 161 233 L 111 233 L 91 193 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 193px; margin-left: 92px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                @capire/
+                                <br/>
+                                <b>
+                                    orders
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="136" y="197" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 276.35 172.29 L 266.36 166.32" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 260.57 162.86 L 270.6 163.61 L 266.36 166.32 L 265.98 171.34 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 170.74 172.47 L 181.53 166.1" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 187.34 162.66 L 181.88 171.12 L 181.53 166.1 L 177.3 163.37 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 224 202 L 224 189.99" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 224 183.24 L 228.5 192.24 L 224 189.99 L 219.5 192.24 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 276.51 109.01 L 266.17 115.31" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 260.4 118.82 L 265.75 110.3 L 266.17 115.31 L 270.43 117.98 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 111 48 L 161 48 L 181 88 L 161 128 L 111 128 L 91 88 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 88px; margin-left: 92px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                @capire/
+                                <br/>
+                                <b>
+                                    suppliers
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="136" y="92" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 21 101 L 71 101 L 91 141 L 71 181 L 21 181 L 1 141 Z" fill="#e1d5e7" stroke="#9673a6" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 141px; margin-left: 2px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                <b>
+                                    S/4
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="46" y="145" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    S/4
+                </text>
+            </switch>
+        </g>
+        <path d="M 80.76 120.53 L 93.49 113.03" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 99.31 109.61 L 93.84 118.05 L 93.49 113.03 L 89.27 110.3 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 80.91 161.17 L 93.31 168.33" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 99.15 171.71 L 89.11 171.1 L 93.31 168.33 L 93.61 163.31 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 170.59 108.83 L 181.72 115.53" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 187.5 119.02 L 177.47 118.23 L 181.72 115.53 L 182.11 110.52 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 199 1 L 249 1 L 269 41 L 249 81 L 199 81 L 179 41 Z" fill="#e1d5e7" stroke="#9673a6" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 41px; margin-left: 180px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                @capire/
+                                <br/>
+                                <b>
+                                    fiori
+                                </b>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="224" y="45" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    @capire/...
+                </text>
+            </switch>
+        </g>
+        <path d="M 224 101 L 224 89.99" fill="none" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 224 83.24 L 228.5 92.24 L 224 89.99 L 219.5 92.24 Z" fill="#ffffff" stroke="#ffffff" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>

etc/incidents.drawio.svg

@@ -0,0 +1,281 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="569px" height="428px" viewBox="-0.5 -0.5 569 428" content="&lt;mxfile&gt;&lt;diagram id=&quot;QQJxv4aCTC7ZgE7HHOvM&quot; name=&quot;Page-1&quot;&gt;7Vpbc9soFP41fqxHCF0f7VyanWl2O3W3fcYSltkg4UH41l+/EIEtGdl1HTlRM508RBzDMfB9h/NxrAG8yTcfOVrMH1mK6cB10s0A3g5cFwAQy3/Ksq0sgQcrQ8ZJWpmcvWFCfmA90liXJMWltlUmwRgVZNE0JqwocCIaNsQ5Wze7zRhNG4YFynBjGsowSRDFVrfvJBXzyhq54d7+gEk2N98MAr3gHJnO2nE5Rylb10zwbgBvOGOieso3N5iqzWvuy/2RT3cT47gQ5wxwqwErRJd6bRPZ2ZOmh9HfIz1HsTUL52xZpFiNdQZwvJ4TgScLlKhP1xJqaZuLnMoWkI8Jy0miu5ZPWCRz3fiPZNmzR082ZqwQ9ygnVHHhAdMVFiRBaojg7Gm3v3JnxoiSrJDPvNra8Qpz1ZeOtF0wNYNSTogUmWz7Oy83jDL+vAQYuepPzZRx8kN+OaJmjtXALxq4UE9uopcPdLvmy7tVf9Jub7tGQk0Rb2omDcNHzHIs+FZ20Z9+AIHmhA4KYDiy3lMMxH5lm9fpZVBEmtbZzvkeefmgwW8nArSIMF6WpMBlOVDzCKja8CmXT5l6+oy4KDA/QRDwSgSpwTGNfM93WqkzI5TWes6iBCdJV8CBaOg3ofNjGzoDZx0633k5cp6F3A4ug9ZfRSIPTLlC13nMclFDVDrf9bJRvtsIXJSEFXLEaLHo6XFA8eyc0yA+eRpcMbLPiGvohTY5oBe/nB2+xQ5DhrJfwRskEZ7OzgneFOFo1lHwun7YBCd27cgFLYduF5EbtETuASS4SEdKsMhWSlDOivTrnEh2j+UH94QaMGRLqyQQNGG6KgClkGnAzO/uS46KrbHqyTmmracXn4KtZEueGIml90KOzbDZ88qEU6POjmBbx84EH8cUCbJqCrg28LS7z4w8n5cmhr0GTTzgmyPf+Kgmr4fVFdeBp92BfdxVtWbL1TOddss8i2GhxbCbZSmkB96z6E/DeOqcl7pnOOgqdcdNKFqD/1ppO7KgmSyTROqte5QIdhKf3197t0htS46/pfZ2g8BmQhwMWxKB63SgvmOLDN8Zf5oxdRy2ym8ZwEqV9SmEe6O+oQNfL4xNSaIG3V2+oGyL25H7SnJczjEWf8BrBy9qibyrgQcs8E4psCllyZNceYokggaovRBzmkLMvVSIdZkL65IK2ooqfENF1RTePggv1VM/cdSdmjKatEaXR5mwUYZ7pqb6cZeCDrBD+Vp3KWAXsE6Fcl8vU7Vr0nmXq7Mi3+9V5LshbPIEwgtD3/yOcMxRh6FvV9kmmK/IEX2m1FvfqqO9uGK9rjazi1/vOL3HdpAb1r5FlINDYQeDSxN8fOAq8A9m02Gc/1pNrmAFPkWS3uQPtsDFpdnDsKgnpTgQuEMnigNVlAO+E0O3QQ43iC/jGQjg0AMODEPoR17sBFHTL7hecrHLdCaBtOSW0QoRiqaEErH9k2HsDPOqF0i7iveOM4ypdTRSzBsKSWDlGO/CHAMc77SjDoPdrvWNUfIkcZdGrSnt66Qpt35CU0w/s5II9ausZBQTguUKavMiiVPnl1Or3CYSWnmkNDh1pIpr0UZ6X6iZ5JtMvdEzzCWPl4thjrj6lyw53Y758zFzorT0wuOGM4H0qp0TZakZJYtvenkdnC4fwMHvNb7Tcr5AYJ8vbgfni2tXF/9V9QZp+kbw+l3xZHdqXZcn5sTrmCfRYSHzdXliFzLr727cIoHeE1V26viqVNkp646p4nrxGzLFrmFazDDQJFtKpJrk8OdSclrpzk/TnUHmtOxZjf6zFNIN1vayEjfuMIaxH4cQ+B4MXAgOATx+yzn/ptQBViBqYgXi0MYqtqEC/i9DJZv79z4rYbF/exbe/Q8=&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <rect x="1" y="1" width="195" height="122" fill="rgb(255, 255, 255)" stroke="#828282" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)rotate(-90 11 13)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-end; width: 107px; height: 1px; padding-top: 13px; margin-left: -96px;">
+                        <div data-drawio-colors="color: #4D4D4D; " style="box-sizing: border-box; font-size: 0px; text-align: right;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(77, 77, 77); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">
+                                S/4 HANA
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="11" y="25" fill="#4D4D4D" font-family="Helvetica" font-size="12px" text-anchor="end" font-weight="bold">
+                    S/4 HANA
+                </text>
+            </switch>
+        </g>
+        <rect x="42.5" y="40" width="120" height="50" rx="7.5" ry="7.5" fill="#f8cecc" stroke="#b85450" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 65px; margin-left: 44px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Business
+                                <br/>
+                                Partner
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="103" y="69" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Business...
+                </text>
+            </switch>
+        </g>
+        <rect x="221" y="1" width="347" height="349" fill="rgb(255, 255, 255)" stroke="#828282" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-start; width: 331px; height: 1px; padding-top: 15px; margin-left: 230px;">
+                        <div data-drawio-colors="color: #4D4D4D; " style="box-sizing: border-box; font-size: 0px; text-align: left;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(77, 77, 77); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                <b>
+                                    Incident Mgmt
+                                </b>
+                                <br/>
+                                Extension App
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="230" y="27" fill="#4D4D4D" font-family="Helvetica" font-size="12px">
+                    Incident Mgmt...
+                </text>
+            </switch>
+        </g>
+        <rect x="418" y="73" width="115" height="50" rx="7.5" ry="7.5" fill="#dae8fc" stroke="#6c8ebf" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 113px; height: 1px; padding-top: 98px; margin-left: 419px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Incidents
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="476" y="102" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Incidents
+                </text>
+            </switch>
+        </g>
+        <path d="M 475.5 182 L 475.5 142.97" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 481.5 182 L 475.5 170 L 469.5 182" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 475.5 124.97 L 480.79 133.97 L 475.5 142.97 L 470.21 133.97 Z" fill="#6c8ebf" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="255" y="73" width="120" height="50" rx="7.5" ry="7.5" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 98px; margin-left: 256px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Customers
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="315" y="102" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Customers
+                </text>
+            </switch>
+        </g>
+        <rect x="1" y="147" width="196.5" height="202" fill="rgb(255, 255, 255)" stroke="#828282" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)rotate(-90 11 159)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe flex-end; width: 187px; height: 1px; padding-top: 159px; margin-left: -176px;">
+                        <div data-drawio-colors="color: #4D4D4D; " style="box-sizing: border-box; font-size: 0px; text-align: right;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(77, 77, 77); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">
+                                SuccessFactors
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="11" y="171" fill="#4D4D4D" font-family="Helvetica" font-size="12px" text-anchor="end" font-weight="bold">
+                    SuccessFactors
+                </text>
+            </switch>
+        </g>
+        <rect x="42.5" y="184" width="120" height="50" rx="7.5" ry="7.5" fill="#f8cecc" stroke="#b85450" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 209px; margin-left: 44px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Workforce
+                                <br/>
+                                Person
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="103" y="213" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Workforce...
+                </text>
+            </switch>
+        </g>
+        <rect x="42.5" y="267" width="120" height="50" rx="7.5" ry="7.5" fill="#f8cecc" stroke="#b85450" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 292px; margin-left: 44px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Employee
+                                <br/>
+                                Timesheet
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="103" y="296" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Employee...
+                </text>
+            </switch>
+        </g>
+        <path d="M 162.5 74.32 L 238.96 86.19" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="6 6" pointer-events="stroke"/>
+        <path d="M 252.79 88.34 L 237.88 93.11 L 240.03 79.27 Z" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="418" y="182" width="115" height="50" rx="7.5" ry="7.5" fill="#dae8fc" stroke="#6c8ebf" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 113px; height: 1px; padding-top: 207px; margin-left: 419px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Messages
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="476" y="211" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Messages
+                </text>
+            </switch>
+        </g>
+        <path d="M 418 98 L 394.97 98" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 418 92 L 406 98 L 418 104" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 376.97 98 L 385.97 92.71 L 394.97 98 L 385.97 103.29 Z" fill="#6c8ebf" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="255" y="184" width="120" height="50" rx="7.5" ry="7.5" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 209px; margin-left: 256px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Service
+                                <br/>
+                                Worker
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="315" y="213" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Service...
+                </text>
+            </switch>
+        </g>
+        <path d="M 162.5 209 L 238.76 209" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="6 6" pointer-events="stroke"/>
+        <path d="M 252.76 209 L 238.76 216 L 238.76 202 Z" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 354.83 181.46 L 439.35 123" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 358.91 171.95 L 352.99 182.73 L 365.16 180.99" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <rect x="255" y="267" width="120" height="50" rx="7.5" ry="7.5" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 292px; margin-left: 256px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                Worker
+                                <br/>
+                                Availability
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="315" y="296" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Worker...
+                </text>
+            </switch>
+        </g>
+        <path d="M 162.5 292 L 238.76 292" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" stroke-dasharray="6 6" pointer-events="stroke"/>
+        <path d="M 252.76 292 L 238.76 299 L 238.76 285 Z" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 37 407 C 37 401.48 41.48 397 47 397 L 92.5 397 C 98.02 397 102.5 392.52 102.5 387 C 102.5 392.52 106.98 397 112.5 397 L 158 397 C 163.52 397 168 401.48 168 407" fill="none" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" transform="translate(0,397)scale(1,-1)translate(0,-397)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 414px; margin-left: 103px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
+                                Backend Services
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="103" y="426" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Backend Services
+                </text>
+            </switch>
+        </g>
+        <path d="M 249.5 407 C 249.5 401.48 253.98 397 259.5 397 L 305 397 C 310.52 397 315 392.52 315 387 C 315 392.52 319.48 397 325 397 L 370.5 397 C 376.02 397 380.5 401.48 380.5 407" fill="none" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" transform="translate(0,397)scale(1,-1)translate(0,-397)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 414px; margin-left: 315px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
+                                Usage Views
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="315" y="426" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Usage Views
+                </text>
+            </switch>
+        </g>
+        <path d="M 410 407 C 410 401.48 414.48 397 420 397 L 465.5 397 C 471.02 397 475.5 392.52 475.5 387 C 475.5 392.52 479.98 397 485.5 397 L 531 397 C 536.52 397 541 401.48 541 407" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" transform="translate(0,397)scale(1,-1)translate(0,-397)" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe flex-start; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 414px; margin-left: 476px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: nowrap;">
+                                Extension Data
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="476" y="426" fill="rgb(0, 0, 0)" font-family="Helvetica" font-size="12px" text-anchor="middle">
+                    Extension Data
+                </text>
+            </switch>
+        </g>
+        <path d="M 350 80.94 C 350 79.32 354.25 78 359.5 78 C 362.02 78 364.44 78.31 366.22 78.86 C 368 79.41 369 80.16 369 80.94 L 369 90.06 C 369 91.68 364.75 93 359.5 93 C 354.25 93 350 91.68 350 90.06 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 369 80.94 C 369 82.56 364.75 83.88 359.5 83.88 C 354.25 83.88 350 82.56 350 80.94" fill="none" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>

etc/samples.drawio.svg

@@ -0,0 +1,212 @@
+<svg host="65bd71144e" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="368px" height="282px" viewBox="-0.5 -0.5 368 282" content="&lt;mxfile&gt;&lt;diagram id=&quot;QQJxv4aCTC7ZgE7HHOvM&quot; name=&quot;Page-1&quot;&gt;7Zpbc9o4FIB/DY9hdL88JqRJH9ppd9mZndk3YwvwxCBXmIT01+9xLNvYMaEl4ZIUeLB1JOt2viMdXXp0MFvduiCdfrWRSXoERaseve4RgpnU8Mglj4VEIF4IJi6OChGqBcP4p/FfltJlHJmFlxWizNoki9OmMLTzuQmzhixwzj40k41tEjUEaTAxzwTDMEieS/+No2xaSBWRtfyziSfTsmQsfINnQZnYt2QxDSL7sCain3p04KzNirfZamCSvPOa/XKzIbaqmDPz7Fc+mJDb2+X19NuX/778vEB/LX+gO3vhc7kPkqVvcI+IBPK7GuVVzh59P4gfy7yeV2M7zy4WT1q6hAQYp6Dpqzoe3ib588rau8XUpmVuUK1RGVeV4F5VxGWa+o6tsiDQx2n+OjWrYGLnkCo1Lp6ZzLha+r0UgQquHqZxZoZpEOafPQDDIJtmswRCOK9MvDIllUU4SQY2se6pPDoeGxGGIF9kzt6ZtZhI6hFCVUzJDvENvAlmcZKbxMDO4hAaMQzmC3h8HfoEZZm4DPtGoqceaGu+VKNxmVmtiTwJt8ZCg90jJPGxhPtPvFlSLYrwQw259uBO1/hWXhZ4s5pUOdfkwYuH7zdAJBtBXKTB/FWgvHlGowblmXVmHelm2i7wQVbUZQ3kNzGJDQUc30xUaLrNZKQ443syE+iCMJ5P/oFRiF7z/dgN0fK4dkP3bzevmwn+NvexgVl4fxPB0Lj7ODQf3IYiblTEumxIkREVYh829Hp7oaxlL0wd117YSw5PoWrop5nNTWcbs4XkOsiCo9NhMPAhu+jQQtLgndBBGT8uHfzUR9NvLjLuPJj+mYMpFidmLqLDXFqaNfPoMl+GQyhMgsUiDpuKanZzLoEvfCcW41ngska4pTA+yP/7U8/CLl1ots8oUM+JybavcEzU2HB4ruw1ZfIOZZYyZ5Igi++b2xRdGvYlfLcxtKxmCesmTKzc0ijzKBruP1vfV2jnRNqjuGzlVHTNs5yekKsavjuF8kxhNXO9MwoJl32uaPUjokkSlv21WEp3RJRI3GdYVD/JmsUQ0V+LFYIelF915rfaiPxg/MqXwXorfsXLZrJnfvWZ32of5mPxyw7DLzsuv+VR0+mu+obLNE3i88LvvPDrncYuGt58bvhqkxlCjdjJ8hMYNe48yRChMqPxRn7aeGznyTey45z3t/kRvOkvIHxkfMjZZaiNaKvPUE5Q78NpaDu95WS/Z6e3rMWhnIaug7czwpsS8pMiGANaEikOs5DUVJJy66tEizIgTyKGKFeSsR29XqxUn+j8CpQiSBApabMUwsCMiOZaMEw4P7DT23UQ9ufxi36R39NatmFJYYhV+aat1kjw1vQuSR+WapxjhrASmuyKr4ABFkvJJUK6OmuoCtF9SgVjimuFKVKHpffkD+puYuvifd9++9BLtfF4TDbcrRMjwfeyVDvMpSF87Mt2+HxwV4/p293v03JeCBd9wmE8Fk+neKp1+IZ1n2kYjyV4FAIcmJ237FBfMsEZlVIphHXLd4ElABIaE8byKyak5ePvPPxDsL4RXSSv75XTT/8D&lt;/diagram&gt;&lt;/mxfile&gt;">
+    <defs/>
+    <g>
+        <path d="M 207 201 L 257 201 L 277 241 L 257 281 L 207 281 L 187 241 Z" fill="#ffe6cc" stroke="#d79b00" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 241px; margin-left: 188px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: &quot;Comic Sans MS&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                <b style="font-size: 11px;">
+                                    Bookshop
+                                </b>
+                                <br style="font-size: 11px;"/>
+                                App
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="232" y="244" fill="rgb(0, 0, 0)" font-family="Comic Sans MS" font-size="11px" text-anchor="middle">
+                    Bookshop...
+                </text>
+            </switch>
+        </g>
+        <path d="M 207 102 L 257 102 L 277 142 L 257 182 L 207 182 L 187 142 Z" fill="#f8cecc" stroke="#b85450" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 145px; margin-left: 188px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: &quot;Comic Sans MS&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                <span style="font-size: 11px;">
+                                    <span style="font-size: 11px;">
+                                        <b>
+                                            Bookstore
+                                            <br/>
+                                        </b>
+                                    </span>
+                                    App
+                                    <br style="font-size: 11px;"/>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="232" y="148" fill="rgb(0, 0, 0)" font-family="Comic Sans MS" font-size="11px" text-anchor="middle">
+                    Bookstore...
+                </text>
+            </switch>
+        </g>
+        <path d="M 297 53 L 347 53 L 367 93 L 347 133 L 297 133 L 277 93 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 93px; margin-left: 278px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: &quot;Comic Sans MS&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                <span style="font-size: 11px;">
+                                    <b style="font-size: 11px;">
+                                        Reviews
+                                    </b>
+                                    <br style="font-size: 11px;"/>
+                                    Service
+                                    <br style="font-size: 11px;"/>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="322" y="96" fill="rgb(0, 0, 0)" font-family="Comic Sans MS" font-size="11px" text-anchor="middle">
+                    Reviews...
+                </text>
+            </switch>
+        </g>
+        <path d="M 297 150 L 347 150 L 367 190 L 347 230 L 297 230 L 277 190 Z" fill="#e1d5e7" stroke="#9673a6" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 190px; margin-left: 278px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: &quot;Comic Sans MS&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                <b>
+                                    Common
+                                </b>
+                                <br/>
+                                Data
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="322" y="193" fill="rgb(0, 0, 0)" font-family="Comic Sans MS" font-size="11px" text-anchor="middle">
+                    Common...
+                </text>
+            </switch>
+        </g>
+        <path d="M 117 150 L 167 150 L 187 190 L 167 230 L 117 230 L 97 190 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 190px; margin-left: 98px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: &quot;Comic Sans MS&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                <span style="font-size: 11px;">
+                                    <b style="font-size: 11px;">
+                                        Orders
+                                    </b>
+                                    <br style="font-size: 11px;"/>
+                                    Service
+                                    <br style="font-size: 11px;"/>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="142" y="193" fill="rgb(0, 0, 0)" font-family="Comic Sans MS" font-size="11px" text-anchor="middle">
+                    Orders...
+                </text>
+            </switch>
+        </g>
+        <path d="M 286.47 171.05 L 273.81 164.3" fill="none" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 268.51 161.47 L 277.45 161.71 L 273.81 164.3 L 273.69 168.77 Z" fill="#5c5c5c" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 177.53 171.05 L 190.19 164.3" fill="none" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 195.49 161.47 L 190.31 168.77 L 190.19 164.3 L 186.55 161.71 Z" fill="#5c5c5c" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 232 201 L 232 189.12" fill="none" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 232 183.12 L 236 191.12 L 232 189.12 L 228 191.12 Z" fill="#5c5c5c" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 286.63 112.26 L 273.62 119.34" fill="none" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 268.35 122.21 L 273.47 114.87 L 273.62 119.34 L 277.29 121.9 Z" fill="#5c5c5c" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 117 53 L 167 53 L 187 93 L 167 133 L 117 133 L 97 93 Z" fill="#d5e8d4" stroke="#82b366" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 93px; margin-left: 98px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: &quot;Comic Sans MS&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                <span style="font-size: 11px;">
+                                    <b style="font-size: 11px;">
+                                        Suppliers
+                                    </b>
+                                    <br style="font-size: 11px;"/>
+                                    Service
+                                    <br style="font-size: 11px;"/>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="142" y="96" fill="rgb(0, 0, 0)" font-family="Comic Sans MS" font-size="11px" text-anchor="middle">
+                    Suppliers...
+                </text>
+            </switch>
+        </g>
+        <path d="M 21 106 L 71 106 L 91 146 L 71 186 L 21 186 L 1 146 Z" fill="#dae8fc" stroke="#6c8ebf" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 146px; margin-left: 2px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: &quot;Comic Sans MS&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; font-weight: bold; white-space: normal; overflow-wrap: normal;">
+                                <span style="font-size: 11px;">
+                                    S/4
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="46" y="149" fill="rgb(0, 0, 0)" font-family="Comic Sans MS" font-size="11px" text-anchor="middle" font-weight="bold">
+                    S/4
+                </text>
+            </switch>
+        </g>
+        <path d="M 81.27 126.53 L 100.5 115.91" fill="none" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 105.76 113.01 L 100.69 120.38 L 100.5 115.91 L 96.82 113.37 Z" fill="#5c5c5c" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 82.61 162.78 L 98.92 170.25" fill="none" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 104.37 172.75 L 95.43 173.06 L 98.92 170.25 L 98.77 165.79 Z" fill="#5c5c5c" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 177.37 112.26 L 190.38 119.34" fill="none" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 195.65 122.21 L 186.71 121.9 L 190.38 119.34 L 190.53 114.87 Z" fill="#5c5c5c" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="all"/>
+        <path d="M 207 1 L 257 1 L 277 41 L 257 81 L 207 81 L 187 41 Z" fill="#fff2cc" stroke="#d6b656" stroke-width="2" stroke-miterlimit="10" pointer-events="all"/>
+        <g transform="translate(-0.5 -0.5)">
+            <switch>
+                <foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;">
+                    <div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 88px; height: 1px; padding-top: 44px; margin-left: 188px;">
+                        <div data-drawio-colors="color: rgb(0, 0, 0); " style="box-sizing: border-box; font-size: 0px; text-align: center;">
+                            <div style="display: inline-block; font-size: 11px; font-family: &quot;Comic Sans MS&quot;; color: rgb(0, 0, 0); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">
+                                <span style="font-size: 11px;">
+                                    <b style="font-size: 11px;">
+                                        Fiori
+                                    </b>
+                                    <br style="font-size: 11px;"/>
+                                    App
+                                    <br style="font-size: 11px;"/>
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </foreignObject>
+                <text x="232" y="47" fill="rgb(0, 0, 0)" font-family="Comic Sans MS" font-size="11px" text-anchor="middle">
+                    Fiori...
+                </text>
+            </switch>
+        </g>
+        <path d="M 232 102 L 232 88.12" fill="none" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="stroke"/>
+        <path d="M 232 82.12 L 236 90.12 L 232 88.12 L 228 90.12 Z" fill="#5c5c5c" stroke="#5c5c5c" stroke-miterlimit="10" pointer-events="all"/>
+    </g>
+    <switch>
+        <g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/>
+        <a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank">
+            <text text-anchor="middle" font-size="10px" x="50%" y="100%">
+                Text is not SVG - cannot display
+            </text>
+        </a>
+    </switch>
+</svg>

fiori/app/_i18n/i18n.properties

@@ -0,0 +1,43 @@
+Books = Books
+Book = Book
+ID = ID
+Title = Title
+Author = Author
+AuthorID = Author ID
+Stock = Stock
+Name = Name
+Description = Description
+Image = Image
+AuthorName = Author's Name
+DateOfBirth = Date of Birth
+DateOfDeath = Date of Death
+PlaceOfBirth = Place of Birth
+PlaceOfDeath = Place of Death
+Age = Age
+Lifetime = Lifetime
+Authors = Authors
+
+Order = Order
+Orders = Orders
+OrderNo = Order Number
+OrderItems = Order Items
+Customer = Customer
+Product = Product
+ProductID = Product ID
+ProductTitle = Product Title
+UnitPrice = Unit Price
+Quantity = Quantity
+
+Price = Price
+Currency = Currency
+Date = Date
+Rating = Rating
+NumberOfReviews = Number of Reviews
+
+Genre = Genre
+Genres = Genres
+SubGenres = Sub Genres
+
+NumCode = Numeric Code
+MinorUnit = Minor Unit
+Exponent = Exponent

fiori/app/_i18n/i18n_de.properties

@@ -6,6 +6,7 @@ Authors = Autoren
 Author = Autor
 AuthorID = ID des Autors
 AuthorName = Name des Autors
+Age = Alter
 Name = Name
 Stock = Bestand
 Order = Bestellung

fiori/app/admin-authors/fiori-service.cds

@@ -0,0 +1,52 @@
+using {AdminService} from '@capire/bookshop';
+
+annotate AdminService.Authors with @odata.draft.enabled;
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Authors Object Page
+//
+annotate AdminService.Authors with @(UI : {
+  HeaderInfo : {
+    TypeName : 'Author',
+    TypeNamePlural : 'Authors',
+    Description : {Value : lifetime}
+  },
+  Facets : [
+    {
+      $Type : 'UI.ReferenceFacet',
+      Label : '{i18n>Details}',
+      Target : '@UI.FieldGroup#Details'
+    },
+    {
+      $Type : 'UI.ReferenceFacet',
+      Label : '{i18n>Books}',
+      Target : 'books/@UI.LineItem'
+    },
+  ],
+  FieldGroup #Details : {Data : [
+    {Value : placeOfBirth},
+    {Value : placeOfDeath},
+    {Value : dateOfBirth},
+    {Value : dateOfDeath},
+    {
+      Value : age,
+      Label : '{i18n>Age}'
+    },
+  ]},
+});
+
+
+// Workaround to avoid errors for unknown db-specific calculated fields above
+extend sap.capire.bookshop.Authors with {
+  virtual age      : Integer;
+  virtual lifetime : String;
+}
+
+annotate AdminService.Authors with {
+  age      @Common.Label : '{i18n>Age}';
+  lifetime @Common.Label : '{i18n>Lifetime}'
+}
+
+// Workaround for Fiori popup for asking user to enter a new UUID on Create
+annotate AdminService.Authors with { ID @Core.Computed; }

fiori/app/admin-authors/webapp/Component.js

@@ -0,0 +1,7 @@
+sap.ui.define(["sap/fe/core/AppComponent"], function (AppComponent) {
+  "use strict";
+  return AppComponent.extend("authors.Component", {
+    metadata: { manifest: "json" },
+  });
+});
+/* eslint no-undef:0 */

fiori/app/admin-authors/webapp/i18n/i18n.properties

@@ -0,0 +1,11 @@
+# This is the resource bundle of itelo
+# __ldi.translation.uuid=c3431418-9caf-11e8-98d0-529269fb1459
+
+# JCI app descriptor contains lower case TITLE
+appTitle=Manage Authors
+
+# JCI app descriptor contains lower case DESCRIPTION
+appSubTitle=CAP Sample Application
+
+# JCI app descriptor contains lower case DESCRIPTION
+appDescription=Bookshop Authors

fiori/app/admin-authors/webapp/manifest.json

@@ -0,0 +1,141 @@
+{
+  "_version": "1.28.0",
+  "sap.app": {
+    "id": "authors",
+    "type": "application",
+    "title": "Manage Authors",
+    "description": "Sample Application",
+    "i18n": "i18n/i18n.properties",
+    "applicationVersion": {
+      "version": "1.0.0"
+    },
+    "dataSources": {
+      "AdminService": {
+        "uri": "admin/",
+        "type": "OData",
+        "settings": {
+          "odataVersion": "4.0"
+        }
+      }
+    },
+    "sourceTemplate": {
+      "id": "ui5template.basicSAPUI5ApplicationProject",
+      "-id": "ui5template.smartTemplate",
+      "version": "1.40.12"
+    },
+    "crossNavigation": {
+      "inbounds": {
+        "intent1": {
+          "signature": {
+            "parameters": {
+              "Books.author.ID":{
+                "renameTo": "ID"
+              }
+            },
+            "additionalParameters": "ignored"
+          },
+          "semanticObject": "Authors",
+          "action": "manage",
+          "title": "{{appTitle}}",
+          "info": "{{appInfo}}",
+          "subTitle": "{{appSubTitle}}",
+          "icon": "sap-icon://SAP-icons-TNT/user",
+          "indicatorDataSource": {
+            "dataSource": "AdminService",
+            "path": "Authors/$count",
+            "refresh": 1800
+          }
+        }
+      }
+    }
+  },
+  "sap.ui5": {
+    "dependencies": {
+      "minUI5Version": "1.81.0",
+      "libs": {
+        "sap.fe.templates": {}
+      }
+    },
+    "models": {
+      "i18n": {
+        "type": "sap.ui.model.resource.ResourceModel",
+        "uri": "i18n/i18n.properties"
+      },
+      "": {
+        "dataSource": "AdminService",
+        "settings": {
+          "synchronizationMode": "None",
+          "operationMode": "Server",
+          "autoExpandSelect": true,
+          "earlyRequests": true,
+          "groupProperties": {
+            "default": {
+              "submit": "Auto"
+            }
+          }
+        }
+      }
+    },
+    "routing": {
+      "routes": [
+        {
+          "pattern": ":?query:",
+          "name": "AuthorsList",
+          "target": "AuthorsList"
+        },
+        {
+          "pattern": "Authors({key}):?query:",
+          "name": "AuthorsDetails",
+          "target": "AuthorsDetails"
+        }
+      ],
+      "targets": {
+        "AuthorsList": {
+          "type": "Component",
+          "id": "AuthorsList",
+          "name": "sap.fe.templates.ListReport",
+          "options": {
+            "settings": {
+              "entitySet": "Authors",
+              "initialLoad": true,
+              "navigation": {
+                "Authors": {
+                  "detail": {
+                    "route": "AuthorsDetails"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "AuthorsDetails": {
+          "type": "Component",
+          "id": "AuthorsDetailsList",
+          "name": "sap.fe.templates.ObjectPage",
+          "options": {
+            "settings": {
+              "entitySet": "Authors"
+            }
+          }
+        }
+      }
+    },
+    "contentDensities": {
+      "compact": true,
+      "cozy": true
+    }
+  },
+  "sap.ui": {
+    "technology": "UI5",
+    "fullWidth": false,
+    "deviceTypes":{
+      "desktop": true,
+      "tablet": true,
+      "phone": true
+    }
+  },
+  "sap.fiori": {
+    "registrationIds": [],
+    "archeType": "transactional"
+  }
+}

fiori/app/admin-books/fiori-service.cds

@@ -0,0 +1,86 @@
+using { AdminService } from '@capire/bookstore';
+using from '../common'; // to help UI linter get the complete annotations
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Books Object Page
+//
+
+annotate AdminService.Books with @(
+	UI: {
+		Facets: [
+			{$Type: 'UI.ReferenceFacet', Label: '{i18n>General}', Target: '@UI.FieldGroup#General'},
+			{$Type: 'UI.ReferenceFacet', Label: '{i18n>Translations}', Target:  'texts/@UI.LineItem'},
+			{$Type: 'UI.ReferenceFacet', Label: '{i18n>Details}', Target: '@UI.FieldGroup#Details'},
+			{$Type: 'UI.ReferenceFacet', Label: '{i18n>Admin}', Target: '@UI.FieldGroup#Admin'},
+		],
+		FieldGroup#General: {
+			Data: [
+				{Value: title},
+				{Value: author_ID},
+				{Value: genre_ID},
+				{Value: descr},
+			]
+		},
+		FieldGroup#Details: {
+			Data: [
+				{Value: stock},
+				{Value: price},
+				{Value: currency_code, Label: '{i18n>Currency}'},
+			]
+		},
+		FieldGroup#Admin: {
+			Data: [
+				{Value: createdBy},
+				{Value: createdAt},
+				{Value: modifiedBy},
+				{Value: modifiedAt}
+			]
+		}
+	}
+);
+
+
+
+////////////////////////////////////////////////////////////
+//
+//  Draft for Localized Data
+//
+
+annotate sap.capire.bookshop.Books with @fiori.draft.enabled;
+annotate AdminService.Books with @odata.draft.enabled;
+
+annotate AdminService.Books.texts with @(
+	UI: {
+		Identification: [{Value:title}],
+		SelectionFields: [ locale, title ],
+		LineItem: [
+			{Value: locale, Label: 'Locale'},
+			{Value: title, Label: 'Title'},
+			{Value: descr, Label: 'Description'},
+		]
+	}
+);
+
+annotate AdminService.Books.texts with {
+    ID       @UI.Hidden;
+    ID_texts @UI.Hidden;
+};
+
+// Add Value Help for Locales
+annotate AdminService.Books.texts {
+	locale @(
+		ValueList.entity:'Languages', Common.ValueListWithFixedValues, //show as drop down, not a dialog
+	)
+}
+// In addition we need to expose Languages through AdminService as a target for ValueList
+using { sap } from '@sap/cds/common';
+extend service AdminService {
+	@readonly entity Languages as projection on sap.common.Languages;
+}
+
+// Workaround for Fiori popup for asking user to enter a new UUID on Create
+annotate AdminService.Books with { ID @Core.Computed; }
+
+// Show Genre as drop down, not a dialog
+annotate AdminService.Books with { genre @Common.ValueListWithFixedValues; }

fiori/app/admin-books/webapp/Component.js

@@ -0,0 +1,8 @@
+sap.ui.define(["sap/fe/core/AppComponent"], function(AppComponent) {
+	"use strict";
+	return AppComponent.extend("books.Component", {
+		metadata: { manifest: "json" }
+	});
+});
+
+/* eslint no-undef:0 */

fiori/app/admin-books/webapp/i18n/i18n.properties

@@ -2,7 +2,7 @@
 # __ldi.translation.uuid=c3431418-9caf-11e8-98d0-529269fb1459
 
 # JCI app descriptor contains lower case TITLE
-appTitle=Bookshop Sample
+appTitle=Manage Books
 
 # JCI app descriptor contains lower case DESCRIPTION
 appSubTitle=CAP Sample Application

fiori/app/admin-books/webapp/manifest.json

@@ -1,14 +1,14 @@
 {
     "_version": "1.8.0",
     "sap.app": {
-        "id": "admin",
+        "id": "books",
         "type": "application",
         "title": "Manage Books",
         "description": "Sample Application",
         "i18n": "i18n/i18n.properties",
         "dataSources": {
             "AdminService": {
-                "uri": "/admin/",
+                "uri": "admin/",
                 "type": "OData",
                 "settings": {
                     "odataVersion": "4.0"
@@ -19,12 +19,28 @@
             "id": "ui5template.basicSAPUI5ApplicationProject",
             "-id": "ui5template.smartTemplate",
             "-version": "1.40.12"
+        },
+        "crossNavigation": {
+            "inbounds": {
+                "intent1": {
+                        "signature": {
+                        "parameters": {},
+                        "additionalParameters": "allowed"
+                    },
+                    "semanticObject": "Books",
+                    "action": "manage",
+                    "title": "{{appTitle}}",
+                    "info": "{{appInfo}}",
+                    "subTitle": "{{appSubTitle}}",
+                    "icon": "sap-icon://course-book"
+                }
+            }
         }
     },
     "sap.ui5": {
         "dependencies": {
             "libs": {
-                "sap.fe": {}
+                "sap.fe.templates": {}
             }
         },
         "models": {
@@ -73,6 +89,7 @@
                     "options": {
                         "settings" : {
                             "entitySet" : "Books",
+                            "initialLoad": true,
                             "navigation" : {
                                 "Books" : {
                                     "detail" : {

fiori/app/appconfig/fioriSandboxConfig.json

@@ -0,0 +1,168 @@
+{
+  "services": {
+    "LaunchPage": {
+      "adapter": {
+        "config": {
+          "catalogs": [],
+          "groups": [
+            {
+              "id": "Bookshop",
+              "title": "Bookshop",
+              "isPreset": true,
+              "isVisible": true,
+              "isGroupLocked": false,
+              "tiles": [
+                {
+                  "id": "BrowseBooks",
+                  "tileType": "sap.ushell.ui.tile.StaticTile",
+                  "properties": {
+                    "title": "Browse Books",
+                    "targetURL": "#Books-display"
+                  }
+                },
+                {
+                  "id": "BrowseGenres",
+                  "tileType": "sap.ushell.ui.tile.StaticTile",
+                  "properties": {
+                    "title": "Browse Genres (OData v2)",
+                    "targetURL": "#Genres-display"
+                  }
+                }
+              ]
+            },
+            {
+              "id": "Administration",
+              "title": "Administration",
+              "isPreset": true,
+              "isVisible": true,
+              "isGroupLocked": false,
+              "tiles": [
+                {
+                  "id": "ManageBooks",
+                  "tileType": "sap.ushell.ui.tile.StaticTile",
+                  "properties": {
+                    "title": "Manage Books",
+                    "targetURL": "#Books-manage"
+                  }
+                },
+                {
+                  "id": "ManageAuthors",
+                  "tileType": "sap.ushell.ui.tile.StaticTile",
+                  "properties": {
+                    "title": "Manage Authors",
+                    "targetURL": "#Authors-manage"
+                  }
+                },
+                {
+                  "id": "ManageOrders",
+                  "tileType": "sap.ushell.ui.tile.StaticTile",
+                  "properties": {
+                    "title": "Manage Orders",
+                    "targetURL": "#Orders-manage"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      }
+    },
+    "NavTargetResolution": {
+      "config": {
+        "enableClientSideTargetResolution": true
+      }
+    },
+    "ClientSideTargetResolution": {
+      "adapter": {
+        "config": {
+          "inbounds": {
+            "BrowseBooks": {
+              "semanticObject": "Books",
+              "action": "display",
+              "title": "Browse Books",
+              "signature": {
+                "parameters": {
+                  "Books.ID": {
+                    "renameTo": "ID"
+                  },
+                  "Authors.books.ID": {
+                    "renameTo": "ID"
+                  }
+                },
+                "additionalParameters": "ignored"
+              },
+              "resolutionResult": {
+                "applicationType": "SAPUI5",
+                "additionalInformation": "SAPUI5.Component=bookshop",
+                "url": "/browse/webapp"
+              }
+            },
+            "BrowseAuthors": {
+              "semanticObject": "Authors",
+              "action": "manage",
+              "title": "Browse Authors",
+              "signature": {
+                "parameters": {
+                  "Books.author.ID":{
+                    "renameTo": "ID"
+                  }
+                },
+                "additionalParameters": "ignored"
+              },
+              "resolutionResult": {
+                "applicationType": "SAPUI5",
+                "additionalInformation": "SAPUI5.Component=authors",
+                "url": "/admin-authors/webapp"
+              }
+            },
+            "BrowseGenres": {
+              "semanticObject": "Genres",
+              "action": "display",
+              "title": "Browse Genres",
+              "signature": {
+                "parameters": {
+                  "Genre.ID": {
+                    "renameTo": "ID"
+                  }
+                },
+                "additionalParameters": "ignored"
+              },
+              "resolutionResult": {
+                "applicationType": "SAPUI5",
+                "additionalInformation": "SAPUI5.Component=genres",
+                "url": "/genres/webapp"
+              }
+            },
+            "ManageBooks": {
+              "semanticObject": "Books",
+              "action": "manage",
+              "title": "Manage Books",
+              "signature": {
+                "parameters": {},
+                "additionalParameters": "allowed"
+              },
+              "resolutionResult": {
+                "applicationType": "SAPUI5",
+                "additionalInformation": "SAPUI5.Component=books",
+                "url": "/admin-books/webapp"
+              }
+            },
+            "ManageOrders": {
+              "semanticObject": "Orders",
+              "action": "manage",
+              "signature": {
+                "parameters": {},
+                "additionalParameters": "allowed"
+              },
+              "resolutionResult": {
+                "applicationType": "SAPUI5",
+                "additionalInformation": "SAPUI5.Component=orders",
+                "url": "/orders/webapp"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

fiori/app/browse/fiori-service.cds

@@ -0,0 +1,57 @@
+using CatalogService from '@capire/bookstore';
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Books Object Page
+//
+annotate CatalogService.Books with @(UI : {
+    HeaderInfo        : {
+        TypeName       : 'Book',
+        TypeNamePlural : 'Books',
+        Description    : {Value : author}
+    },
+    HeaderFacets      : [{
+        $Type  : 'UI.ReferenceFacet',
+        Label  : '{i18n>Description}',
+        Target : '@UI.FieldGroup#Descr'
+    }, ],
+    Facets            : [{
+        $Type  : 'UI.ReferenceFacet',
+        Label  : '{i18n>Details}',
+        Target : '@UI.FieldGroup#Price'
+    }, ],
+    FieldGroup #Descr : {Data : [{Value : descr}, ]},
+    FieldGroup #Price : {Data : [
+        {Value : price},
+        {
+            Value : currency.symbol,
+            Label : '{i18n>Currency}'
+        },
+    ]},
+});
+
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Books List Page
+//
+annotate CatalogService.Books with @(UI : {
+    SelectionFields : [
+        ID,
+        price,
+        currency_code
+    ],
+    LineItem        : [
+        {
+            Value : ID,
+            Label : '{i18n>Title}'
+        },
+        {
+            Value : author,
+            Label : '{i18n>Author}'
+        },
+        {Value : genre.name},
+        {Value : price},
+        {Value : currency.symbol},
+    ]
+}, );

fiori/app/browse/webapp/Component.js

@@ -0,0 +1,7 @@
+sap.ui.define(["sap/fe/core/AppComponent"], function(AppComponent) {
+	"use strict";
+	return AppComponent.extend("bookshop.Component", {
+		metadata: { manifest: "json" }
+	});
+});
+/* eslint no-undef:0 */

fiori/app/browse/webapp/i18n/i18n.properties

@@ -2,7 +2,7 @@
 # __ldi.translation.uuid=c3431418-9caf-11e8-98d0-529269fb1459
 
 # JCI app descriptor contains lower case TITLE
-appTitle=Bookshop Sample
+appTitle=Browse Books
 
 # JCI app descriptor contains lower case DESCRIPTION
 appSubTitle=CAP Sample Application

fiori/app/browse/webapp/manifest.json

@@ -1,30 +1,62 @@
 {
-  "_version": "1.8.0",
+  "_version": "1.28.0",
   "sap.app": {
     "id": "bookshop",
     "type": "application",
     "title": "Browse Books",
     "description": "Sample Application",
     "i18n": "i18n/i18n.properties",
+    "applicationVersion": {
+      "version": "1.0.0"
+    },
     "dataSources": {
       "CatalogService": {
-        "uri": "/browse/",
+        "uri": "browse/",
         "type": "OData",
         "settings": {
           "odataVersion": "4.0"
         }
       }
     },
-    "-sourceTemplate": {
+    "sourceTemplate": {
       "id": "ui5template.basicSAPUI5ApplicationProject",
       "-id": "ui5template.smartTemplate",
-      "-version": "1.40.12"
+      "version": "1.40.12"
+    },
+    "crossNavigation": {
+      "inbounds": {
+        "intent1": {
+          "signature": {
+            "parameters": {
+              "Books.ID":{
+                "renameTo": "ID"
+              },
+              "Authors.books.ID": {
+                "renameTo": "ID"
+              }
+            },
+            "additionalParameters": "ignored"
+          },
+          "semanticObject": "Books",
+          "action": "display",
+          "title": "{{appTitle}}",
+          "info": "{{appInfo}}",
+          "subTitle": "{{appSubTitle}}",
+          "icon": "sap-icon://course-book",
+          "indicatorDataSource": {
+            "dataSource": "CatalogService",
+            "path": "Books/$count",
+            "refresh": 1800
+          }
+        }
+      }
     }
   },
   "sap.ui5": {
     "dependencies": {
+      "minUI5Version": "1.81.0",
       "libs": {
-        "sap.fe": {}
+        "sap.fe.templates": {}
       }
     },
     "models": {
@@ -68,6 +100,7 @@
           "options": {
             "settings": {
               "entitySet": "Books",
+              "initialLoad": true,
               "navigation": {
                 "Books": {
                   "detail": {
@@ -97,7 +130,12 @@
   },
   "sap.ui": {
     "technology": "UI5",
-    "fullWidth": false
+    "fullWidth": false,
+    "deviceTypes":{
+      "desktop": true,
+      "tablet": true,
+      "phone": true
+    }
   },
   "sap.fiori": {
     "registrationIds": [],

fiori/app/common.cds

@@ -0,0 +1,284 @@
+/*
+ Common Annotations shared by all apps
+*/
+
+using { sap.capire.bookshop as my } from '@capire/bookstore';
+using { sap.common } from '@capire/common';
+using { sap.common.Currencies } from '@sap/cds/common';
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Books Lists
+//
+annotate my.Books with @(
+  Common.SemanticKey : [ID],
+  UI                 : {
+    Identification  : [{ Value: title }],
+    SelectionFields : [
+      ID,
+      author_ID,
+      price,
+      currency_code
+    ],
+    LineItem        : [
+      { Value: ID, Label: '{i18n>Title}' },
+      { Value: author.ID, Label: '{i18n>Author}' },
+      { Value: genre.name },
+      { Value: stock },
+      { Value: price },
+      { Value: currency.symbol },
+    ]
+  }
+) {
+  ID  @Common: {
+    SemanticObject : 'Books',
+    Text: title,
+    TextArrangement : #TextOnly
+  };
+  author @ValueList.entity      : 'Authors';
+};
+
+annotate Currencies with {
+  symbol @Common.Label : '{i18n>Currency}';
+}
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Books Details
+//
+annotate my.Books with @(UI : {HeaderInfo : {
+  TypeName       : '{i18n>Book}',
+  TypeNamePlural : '{i18n>Books}',
+  Title          : { Value: title },
+  Description    : { Value: author.name }
+}, });
+
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Books Elements
+//
+annotate my.Books with {
+  ID     @title: '{i18n>ID}';
+  title  @title: '{i18n>Title}';
+  genre  @title: '{i18n>Genre}'   @Common: { Text: genre.name, TextArrangement: #TextOnly };
+  author @title: '{i18n>Author}'  @Common: { Text: author.name, TextArrangement: #TextOnly };
+  price  @title: '{i18n>Price}'   @Measures.ISOCurrency : currency_code;
+  stock  @title: '{i18n>Stock}';
+  descr  @title: '{i18n>Description}'  @UI.MultiLineText;
+  image  @title: '{i18n>Image}';
+}
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Genres List
+//
+annotate my.Genres with @(
+  Common.SemanticKey : [name],
+  UI                 : {
+    SelectionFields : [name],
+    LineItem        : [
+      { Value: name },
+      {
+        Value : parent.name,
+        Label: 'Main Genre'
+      },
+    ],
+  }
+);
+
+annotate my.Genres with {
+  ID  @Common.Text : name  @Common.TextArrangement : #TextOnly;
+}
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Genre Details
+//
+annotate my.Genres with @(UI : {
+  Identification : [{ Value: name}],
+  HeaderInfo     : {
+    TypeName       : '{i18n>Genre}',
+    TypeNamePlural : '{i18n>Genres}',
+    Title          : { Value: name },
+    Description    : { Value: ID }
+  },
+  Facets         : [{
+    $Type  : 'UI.ReferenceFacet',
+    Label  : '{i18n>SubGenres}',
+    Target : 'children/@UI.LineItem'
+  }, ],
+});
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Genres Elements
+//
+annotate my.Genres with {
+  ID   @title: '{i18n>ID}';
+  name @title: '{i18n>Genre}';
+}
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Authors List
+//
+annotate my.Authors with @(
+  Common.SemanticKey : [ID],
+  UI                 : {
+    Identification  : [{ Value: name}],
+    SelectionFields : [name],
+    LineItem        : [
+      { Value: ID },
+      { Value: dateOfBirth },
+      { Value: dateOfDeath },
+      { Value: placeOfBirth },
+      { Value: placeOfDeath },
+    ],
+  }
+) {
+  ID  @Common: {
+    SemanticObject : 'Authors',
+    Text: name,
+    TextArrangement : #TextOnly,
+  };
+};
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Author Details
+//
+annotate my.Authors with @(UI : {
+  HeaderInfo : {
+    TypeName       : '{i18n>Author}',
+    TypeNamePlural : '{i18n>Authors}',
+    Title          : { Value: name },
+    Description    : { Value: dateOfBirth }
+  },
+  Facets     : [{
+    $Type  : 'UI.ReferenceFacet',
+    Target : 'books/@UI.LineItem'
+  }, ],
+});
+
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Authors Elements
+//
+annotate my.Authors with {
+  ID           @title: '{i18n>ID}';
+  name         @title: '{i18n>Name}';
+  dateOfBirth  @title: '{i18n>DateOfBirth}';
+  dateOfDeath  @title: '{i18n>DateOfDeath}';
+  placeOfBirth @title: '{i18n>PlaceOfBirth}';
+  placeOfDeath @title: '{i18n>PlaceOfDeath}';
+}
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Languages List
+//
+annotate common.Languages with @(
+  Common.SemanticKey : [code],
+  Identification     : [{ Value: code}],
+  UI                 : {
+    SelectionFields : [
+      name,
+      descr
+    ],
+    LineItem        : [
+      { Value: code },
+      { Value: name },
+    ],
+  }
+);
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Language Details
+//
+annotate common.Languages with @(UI : {
+  HeaderInfo          : {
+    TypeName       : '{i18n>Language}',
+    TypeNamePlural : '{i18n>Languages}',
+    Title          : { Value: name },
+    Description    : { Value: descr }
+  },
+  Facets              : [{
+    $Type  : 'UI.ReferenceFacet',
+    Label  : '{i18n>Details}',
+    Target : '@UI.FieldGroup#Details'
+  }, ],
+  FieldGroup #Details : {Data : [
+    { Value: code },
+    { Value: name },
+    { Value: descr }
+  ]},
+});
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Currencies List
+//
+annotate common.Currencies with @(
+  Common.SemanticKey : [code],
+  Identification     : [{ Value: code}],
+  UI                 : {
+    SelectionFields : [
+      name,
+      descr
+    ],
+    LineItem        : [
+      { Value: descr },
+      { Value: symbol },
+      { Value: code },
+    ],
+  }
+);
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Currency Details
+//
+annotate common.Currencies with @(UI : {
+  HeaderInfo           : {
+    TypeName       : '{i18n>Currency}',
+    TypeNamePlural : '{i18n>Currencies}',
+    Title          : { Value: descr },
+    Description    : { Value: code }
+  },
+  Facets               : [
+    {
+      $Type  : 'UI.ReferenceFacet',
+      Label  : '{i18n>Details}',
+      Target : '@UI.FieldGroup#Details'
+    },
+    {
+      $Type  : 'UI.ReferenceFacet',
+      Label  : '{i18n>Extended}',
+      Target : '@UI.FieldGroup#Extended'
+    },
+  ],
+  FieldGroup #Details  : {Data : [
+    { Value: name },
+    { Value: symbol },
+    { Value: code },
+    { Value: descr }
+  ]},
+  FieldGroup #Extended : {Data : [
+    { Value: numcode },
+    { Value: minor },
+    { Value: exponent }
+  ]},
+});
+
+////////////////////////////////////////////////////////////////////////////
+//
+//	Currencies Elements
+//
+annotate common.Currencies with {
+  numcode  @title: '{i18n>NumCode}';
+  minor    @title: '{i18n>MinorUnit}';
+  exponent @title: '{i18n>Exponent}';
+}

fiori/app/fiori-apps.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<title>Bookshop</title>
+
+	<script>
+		window["sap-ushell-config"] = {
+			defaultRenderer: "fiori2",
+			applications: {}
+		};
+	</script>
+
+	<script id="sap-ushell-bootstrap" src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"></script>
+	<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
+			data-sap-ui-libs="sap.m, sap.ushell, sap.collaboration, sap.ui.layout"
+			data-sap-ui-compatVersion="edge"
+			data-sap-ui-theme="sap_horizon"
+			data-sap-ui-frameOptions="allow"
+	></script>
+	<script>
+		sap.ui.getCore().attachInit(()=> sap.ushell.Container.createRenderer().placeAt("content"))
+	</script>
+
+</head>
+<body class="sapUiBody" id="content"></body>
+</html>

fiori/app/genres/fiori-service.cds

@@ -0,0 +1,8 @@
+using { sap.capire.bookshop } from '../../db/common';
+
+annotate bookshop.GenreHierarchy {
+  ID             @sap.hierarchy.node.for;
+  parent         @sap.hierarchy.parent.node.for;
+  hierarchyLevel @sap.hierarchy.level.for;
+  drillState     @sap.hierarchy.drill.state.for;
+}

fiori/app/genres/webapp/Component.js

@@ -0,0 +1,7 @@
+sap.ui.define(["sap/suite/ui/generic/template/lib/AppComponent"], (AppComponent) =>
+  AppComponent.extend("genres.Component", {
+    metadata: {
+      manifest: "json",
+    },
+  })
+);

fiori/app/genres/webapp/i18n/i18n.properties

@@ -0,0 +1,4 @@
+#XTIT
+appTitle=Genres
+#XTXT
+appDescription=Browse Genres

fiori/app/genres/webapp/manifest.json

@@ -0,0 +1,155 @@
+{
+  "_version": "1.8.0",
+  "sap.app": {
+    "id": "genres",
+    "type": "application",
+    "i18n": "i18n/i18n.properties",
+    "applicationVersion": {
+      "version": "1.0.0"
+    },
+    "title": "Browse Genres Hierarchy (OData v2)",
+    "description": "{{appDescription}}",
+    "tags": {
+      "keywords": []
+    },
+    "crossNavigation": {
+      "inbounds": {
+        "appShow": {
+          "title": "{{appTitle}}",
+          "semanticObject": "GenreHierarchy",
+          "action": "display",
+          "deviceTypes": {
+            "desktop": true,
+            "tablet": true,
+            "phone": true
+          },
+          "icon": "sap-icon://settings",
+          "size": "1x1"
+        }
+      },
+      "outbounds": {}
+    },
+    "ach": "",
+    "resources": "resources.json",
+    "dataSources": {
+      "main": {
+        "uri": "/odata/v2/browse",
+        "type": "OData",
+        "settings": {
+          "annotations": ["localAnnotations"],
+          "localUri": "localService/metadata.xml"
+        }
+      },
+      "localAnnotations": {
+        "type": "ODataAnnotation",
+        "uri": "annotations/localAnnotations.xml",
+        "settings": {
+          "localUri": "annotations/localAnnotations.xml"
+        }
+      }
+    },
+    "offline": false,
+    "sourceTemplate": {
+      "id": "ui5template.smartTemplate",
+      "version": "1.40.12"
+    }
+  },
+  "sap.ui": {
+    "technology": "UI5",
+    "icons": {
+      "icon": "",
+      "favIcon": "",
+      "phone": "",
+      "phone@2": "",
+      "tablet": "",
+      "tablet@2": ""
+    },
+    "deviceTypes": {
+      "desktop": true,
+      "tablet": true,
+      "phone": true
+    },
+    "supportedThemes": ["sap_hcb", "sap_belize", "sap_belize_deep", "sap_fiori_3"]
+  },
+  "sap.ui5": {
+    "resources": {
+      "js": [],
+      "css": []
+    },
+    "dependencies": {
+      "minUI5Version": "1.65.6",
+      "libs": {},
+      "components": {}
+    },
+    "models": {
+      "i18n": {
+        "type": "sap.ui.model.resource.ResourceModel",
+        "uri": "i18n/i18n.properties"
+      },
+      "@i18n": {
+        "type": "sap.ui.model.resource.ResourceModel",
+        "uri": "i18n/i18n.properties"
+      },
+      "json": {
+        "type": "sap.ui.model.json.JSONModel"
+      },
+      "i18n|sap.suite.ui.generic.template.ListReport|Genres": {
+        "type": "sap.ui.model.resource.ResourceModel",
+        "uri": "i18n/ListReport/Genres/i18n.properties"
+      },
+      "": {
+        "dataSource": "main",
+        "preload": true,
+        "settings": {
+          "useBatch": true,
+          "defaultBindingMode": "TwoWay",
+          "defaultCountMode": "Inline",
+          "refreshAfterChange": true,
+          "metadataUrlParams": {
+            "sap-value-list": "none"
+          }
+        }
+      }
+    },
+    "contentDensities": {
+      "compact": true,
+      "cozy": true
+    }
+  },
+  "sap.ui.generic.app": {
+    "_version": "1.3.0",
+    "settings": {
+      "forceGlobalRefresh": false,
+      "useColumnLayoutForSmartForm": false,
+      "showBasicSearch": false
+    },
+    "pages": {
+      "ListReport|Genres": {
+        "entitySet": "GenreHierarchy",
+        "component": {
+          "name": "sap.suite.ui.generic.template.ListReport",
+          "list": true,
+          "settings": {
+            "condensedTableLayout": true,
+            "smartVariantManagement": true,
+            "tableType": "TreeTable",
+            "enableTableFilterInPageVariant": true,
+            "dataLoadSettings": {
+              "loadDataOnAppLaunch": "always"
+            }
+          }
+        }
+      }
+    }
+  },
+  "sap.fiori": {
+    "registrationIds": [],
+    "archeType": "transactional"
+  },
+  "sap.platform.hcp": {
+    "uri": ""
+  },
+  "sap.platform.cf": {
+    "oAuthScopes": []
+  }
+}

fiori/app/services.cds

@@ -0,0 +1,10 @@
+/*
+  This model controls what gets served to Fiori frontends...
+*/
+
+using from './admin-authors/fiori-service';
+using from './admin-books/fiori-service';
+using from './browse/fiori-service';
+using from './genres/fiori-service';
+using from './common';
+using from '@capire/bookstore/srv/mashup';

fiori/db/common.cds

@@ -0,0 +1,14 @@
+namespace sap.capire.bookshop;
+
+using { sap.capire.bookshop } from '@capire/bookstore/srv/mashup';
+
+entity GenreHierarchy : bookshop.Genres {
+  hierarchyLevel : Integer default 0;
+  drillState     : String default 'leaf';
+  parent         : Association to GenreHierarchy;
+  children       : Composition of many GenreHierarchy on children.parent = $self;
+}
+
+extend service CatalogService with {
+  @readonly entity GenreHierarchy as projection on bookshop.GenreHierarchy;
+}

fiori/db/data/sap.capire.bookshop-GenreHierarchy.csv

@@ -0,0 +1,16 @@
+ID;parent_ID;name;hierarchyLevel;drillState
+10;;Fiction;0;expanded
+11;10;Drama;1;leaf
+12;10;Poetry;1;leaf
+13;10;Fantasy;1;leaf
+14;10;Science Fiction;1;leaf
+15;10;Romance;1;leaf
+16;10;Mystery;1;leaf
+17;10;Thriller;1;leaf
+18;10;Dystopia;1;leaf
+20;;Non-Fiction;0;expanded
+19;10;Fairy Tale;1;leaf
+21;20;Biography;1;expanded
+22;21;Autobiography;2;leaf
+23;20;Essay;1;leaf
+24;20;Speech;1;leaf

fiori/db/hana/index.cds

@@ -0,0 +1,10 @@
+//
+//  Add Author.age and .lifetime with a DB-specific function
+//
+
+using { AdminService } from '@capire/bookshop';
+
+extend projection AdminService.Authors with {
+  YEARS_BETWEEN(dateOfBirth, dateOfDeath)         as age: Integer,
+  YEAR(dateOfBirth) || ' – ' || YEAR(dateOfDeath) as lifetime : String
+}

fiori/db/sqlite/index.cds

@@ -0,0 +1,10 @@
+//
+//  Add Author.age and .lifetime with a DB-specific function
+//
+
+using { AdminService } from '@capire/bookshop';
+
+extend projection AdminService.Authors with {
+  strftime('%Y',dateOfDeath)-strftime('%Y',dateOfBirth)              as age: Integer,
+  strftime('%Y',dateOfBirth) || ' – ' || strftime('%Y',dateOfDeath)  as lifetime : String
+}

fiori/index.cds

@@ -0,0 +1 @@
+using from './db/common';

fiori/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@capire/fiori",
+  "version": "1.0.0",
+  "dependencies": {
+    "@capire/bookstore": "*",
+    "@sap/cds": ">=5",
+    "@cap-js-community/odata-v2-adapter": "^1",
+    "express": "^4.17.1"
+  },
+  "devDependencies": {
+    "@cap-js/sqlite": "^1"
+  },
+  "scripts": {
+    "start": "cds-serve",
+    "watch": "cds watch"
+  },
+  "cds": {
+    "requires": {
+      "ReviewsService": {
+        "kind": "odata",
+        "model": "@capire/reviews"
+      },
+      "OrdersService": {
+        "kind": "odata",
+        "model": "@capire/orders"
+      },
+      "messaging": {
+        "[production]": {
+          "kind": "enterprise-messaging"
+        },
+        "[development]": {
+          "kind": "file-based-messaging"
+        },
+        "[hybrid]": {
+          "kind": "enterprise-messaging-shared"
+        }
+      },
+      "db": {
+        "kind": "sql"
+      },
+      "db-ext": {
+        "[development]": {
+          "model": "db/sqlite"
+        },
+        "[production]": {
+          "model": "db/hana"
+        }
+      }
+    },
+    "hana": {
+      "deploy-format": "hdbtable"
+    }
+  },
+  "sapux": [
+    "app/admin-authors",
+    "app/admin-books",
+    "app/browse"
+  ]
+}

fiori/server.js

@@ -0,0 +1,8 @@
+// install OData v2 adapter
+const cds = require("@sap/cds")
+const proxy = require('@cap-js-community/odata-v2-adapter')
+const opts = global.it ? { target:'auto' } : {}   // for tests, set 'auto' to detect port dynamically
+cds.on('bootstrap', app => app.use(proxy(opts)))  // install proxy
+// cds.log('cov2ap','silent') // suppress anoying log outpout, e.g. for `npm run mocha -- --reporter nyan`
+
+module.exports = require('@capire/bookstore/server.js')

hello/README.md

@@ -0,0 +1,15 @@
+# Hello World Getting Started Sample
+
+## Next Steps
+
+- To run the JavaScript implementation, open a new terminal and run `cds watch`.
+- To run the TypeScript implementation, open a new terminal and run `cds-ts watch`.
+
+Then call the service at: http://localhost:4004/say/hello(to='world')
+
+## Learn More
+
+Learn more about:
+
+- [Hello World!](https://cap.cloud.sap/docs/get-started/hello-world)
+- [Using TypeScript](https://cap.cloud.sap/docs/node.js/typescript)

hello/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@capire/hello-world",
+  "version": "1.0.0",
+  "scripts": {
+    "test": "npx jest --silent",
+    "start": "cds serve srv/world.cds",
+    "start:ts": "cds-ts serve srv/world.cds"
+  },
+  "dependencies": {
+    "@sap/cds": ">=5.0.4"
+  },
+  "devDependencies": {
+    "@types/jest": "*",
+    "@types/node": "*",
+    "typescript": ">=4.3.5"
+  },
+  "eslintConfig": {
+    "extends": "eslint:recommended",
+    "env": {
+      "es2020": true,
+      "node": true,
+      "jest": true,
+      "mocha": true
+    },
+    "globals": {
+      "SELECT": true,
+      "INSERT": true,
+      "UPDATE": true,
+      "DELETE": true,
+      "CREATE": true,
+      "DROP": true,
+      "CDL": true,
+      "CQL": true,
+      "CXL": true,
+      "cds": true
+    },
+    "rules": {
+      "no-console": "off",
+      "require-atomic-updates": "off"
+    }
+  }
+}

hello/srv/world.cds

@@ -0,0 +1,3 @@
+service say @(path: '/say') {
+  function hello (to:String) returns String;
+}

hello/srv/world.js

@@ -0,0 +1,7 @@
+module.exports = class say {
+  hello(req) {
+    let {to} = req.data
+    if (to === 'me') to = require('os').userInfo().username
+    return `Hello ${to}!`
+  }
+}

hello/srv/world.ts

@@ -0,0 +1,7 @@
+import { Request } from "@sap/cds"
+
+module.exports = class say {
+    hello(req: Request) {
+        return `Hello ${req.data.to} from a TypeScript file!`
+    }
+}

hello/test/hello-world-test.js

@@ -0,0 +1,13 @@
+const cds = require ('@sap/cds')
+describe('Hello world!', () => {
+
+    beforeAll (()=> process.env.CDS_TYPESCRIPT = true)
+    afterAll (()=> delete process.env.CDS_TYPESCRIPT)
+    const {GET} = cds.test.in(__dirname,'../srv').run('serve', 'world.cds')
+
+    it('should say hello with class impl', async () => {
+        const {data} = await GET`/say/hello(to='world')`
+        expect(data.value).toMatch(/Hello world.*typescript.*/i)
+    })
+
+})

hello/test/test.http

@@ -0,0 +1 @@
+GET http://localhost:4004/say/hello(to='world')