This package takes the metadata.xml of an OData service and converts it to TypeScript interfaces. It also creates a wrapper class for all the CRUD operations.

Features

🎉 Automatically create TypeScript interfaces for

• Entity types
  • Navigation properties
  • Complex properties
• Complex types
• Function imports
  • Importing parameters
  • Return types

🎉 Automatically create TypeScript classes to access the backend

Installation

Global installation is recommended

npm i -g @ottogroup/ui5-odata-generator

Local installation as a dev dependency is also possible

npm i -D @ottogroup/ui5-odata-generator

Usage

Package

Create a local copy of one or more metadata.xml files and store them in a service folder in your app. This is the tree of a sample UI5 app:

src
│   Component.ts
│   index.html
│   manifest.json
├───controller
├───fragment
├───i18n
├───service
|   |
│   ├───sflight
│   │   metadata.xml
│   │
│   └───northwind
│       metadata.xml
│
├───model
├───style
├───util
└───view

Then run the following command in the top level directory of your app

ui5-odata-generator

With a local installation do

npx @ottogroup/ui5-odata-generator

or add a script to your package.json

"scripts": {
  ...
  "generate": "ui5-odata-generator"
},

and run

npm generate

Generated code

You can simply import the interfaces and use them like

import { Product } from "../service/northwind/NorthwindModelService";

const product: Product = {
    ProductID: 1,
    ProductName: "Cheese cake",
}

To read (or create, update, delete) entities and entity sets import the service class, create an instance and use the provided methods

import NorthwindModelService, { Product } from "../service/northwind/NorthwindModelService";

...

const service = new NorthwindModelService(this.getModel() as ODataModel);
const products: Product[] = await service.getProducts(); // type assertion is not necessary, just for documentation

Limitations

A directory structure is required. The package will (recursively) look for metadata.xml files inside of the src/service/ or webapp/service/ directory.

Only one metadata.xml per directory is supported. If you have multiple OData services put them in different directories.

Only OData V2 is supported.

The first document in your ui5.yaml has to contain the property metadata.name.