Typescript configuration for Fiori elements apps

_i18n/i18n.properties

@@ -22,6 +22,10 @@ ProductPrice=Product Price
 ProductID=Product
 OverallStatus=Overall Status
 GeneralInformation=General Information
+GoGreen=Trees-4-Tickets
+GreenFee=Green Flight Fee
+TreesPlanted=Trees Planted
+Sustainability=Sustainability
 
 Booking=Booking
 Bookings=Bookings

app/labels.cds

@@ -12,6 +12,9 @@ annotate schema.Travel with @title: '{i18n>Travel}' {
   Description  @title: '{i18n>Description}';
   BookingFee   @title: '{i18n>BookingFee}'    @Measures.ISOCurrency: CurrencyCode_code;
   TotalPrice   @title: '{i18n>TotalPrice}'    @Measures.ISOCurrency: CurrencyCode_code;
+  GoGreen      @title: '{i18n>GoGreen}';  
+  GreenFee     @title: '{i18n>GreenFee}'      @Measures.ISOCurrency: CurrencyCode_code;
+  TreesPlanted @title: '{i18n>TreesPlanted}'; 
   TravelStatus @title: '{i18n>TravelStatus}'  @Common.Text: TravelStatus.name     @Common.TextArrangement: #TextOnly;
   to_Customer  @title: '{i18n>CustomerID}'    @Common.Text: to_Customer.LastName;
   to_Agency    @title: '{i18n>AgencyID}'      @Common.Text: to_Agency.Name;

app/travel_analytics/package.json

@@ -12,20 +12,29 @@
     "start": "ui5 serve",
     "test": "npm run test:node && npm run test:java",
     "test:java": "karma start --server=java --single-run",
-    "test:node": "karma start --server=node --single-run"
+    "test:node": "karma start --server=node --single-run",
+    "ts-typecheck": "tsc --noEmit",
+    "prestart": "npm run ts-typecheck",
+    "prebuild": "npm run ts-typecheck"
   },
   "keywords": [
     "ui5",
     "openui5",
     "sapui5"
   ],
   "devDependencies": {
-    "@ui5/cli": "^4.0.0",
     "karma": "^6.4.3",
     "karma-chrome-launcher": "^3.2.0",
     "karma-ui5": "^4.0.1",
     "puppeteer": "^23.0.2",
     "ui5-middleware-simpleproxy": "^3.2.16",
-    "ui5-task-zipper": "^3.1.4"
+    "ui5-task-zipper": "^3.1.4",
+    "@sap/ux-ui5-tooling": "1",
+    "@sapui5/types": "~1.130.0",
+    "ui5-tooling-transpile": "^3.3.7",
+    "typescript": "^5.1.6",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@sap-ux/eslint-plugin-fiori-tools": "^0.4.0"
   }
 }

app/travel_analytics/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "es2022",
+        "module": "es2022",
+        "skipLibCheck": true,
+        "allowJs": true,
+        "strict": true,
+        "strictPropertyInitialization": false,
+        "moduleResolution": "node",
+        "rootDir": "./webapp",
+        "outDir": "./dist",
+        "baseUrl": "./",
+        "paths": {
+            "sap/fe/cap/travel_analytics/*": [
+                "./webapp/*"
+            ]
+        },
+        "typeRoots": [
+            "./node_modules/@types",
+            "./node_modules/@sapui5/types",
+            "../../node_modules/@types",
+            "../../node_modules/@sapui5/types"
+          ]
+    },
+    "include": [
+        "./webapp/**/*"
+    ]
+}

app/travel_analytics/ui5.yaml

@@ -20,6 +20,10 @@ builder:
         archiveName: travel-analytics
         additionalFiles:
           - xs-app.json
+    - name: ui5-tooling-transpile-task
+      afterTask: replaceVersion
+      configuration:
+        debug: true   
 
 server:
   customMiddleware:
@@ -30,3 +34,11 @@ server:
         baseUri: http://localhost:4004/analytics
         username: admin # dummy credentials for local testing
         password: admin # dummy credentials for local testing
+    - name: fiori-tools-appreload
+      afterMiddleware: compression
+    - name: ui5-tooling-transpile-middleware
+      afterMiddleware: compression
+      configuration:
+        debug: true
+        excludePatterns:
+          - /Component-preload.js            

app/travel_analytics/webapp/Component.ts

@@ -0,0 +1,20 @@
+import BaseComponent from "sap/fe/core/AppComponent";
+
+/**
+ * @namespace sap.fe.cap.managetravels
+ */
+export default class Component extends BaseComponent {
+
+  public static metadata = {
+    manifest: "json"
+  };
+
+  /**
+   * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
+   * @public
+   * @override
+   */
+  //public init() : void {
+  //    super.init();
+  //}
+}

app/travel_analytics/webapp/manifest.json

@@ -65,9 +65,9 @@
         }
     },
     "sap.ui5": {
-        "flexEnabled": true,
+        "flexEnabled": false,
         "dependencies": {
-            "minUI5Version": "1.128.0",
+            "minUI5Version": "1.130.0",
             "libs": {
                 "sap.m": {},
                 "sap.ui.core": {},

app/travel_processor/.eslintrc

@@ -0,0 +1,4 @@
+{
+    "extends": "plugin:@sap-ux/eslint-plugin-fiori-tools/defaultTS",
+    "root": true   
+}

app/travel_processor/field-control.cds

@@ -4,9 +4,15 @@ using TravelService from '../../srv/travel-service';
 // annotations that control the behavior of fields and actions
 //
 
-annotate TravelService.Travel with @(Common.SideEffects: {
-  SourceProperties: [BookingFee],
-  TargetProperties: ['TotalPrice']
+annotate TravelService.Travel with @(Common : {
+  SideEffects: {
+    SourceProperties: [BookingFee],
+    TargetProperties: ['TotalPrice', 'GreenFee', 'TreesPlanted']
+  },
+  SideEffects #GoGreen:{
+    SourceProperties: [GoGreen],
+    TargetProperties: ['TotalPrice', 'GreenFee', 'TreesPlanted']
+  }
 }){
   BookingFee  @Common.FieldControl  : TravelStatus.fieldControl;
   BeginDate   @Common.FieldControl  : TravelStatus.fieldControl;
@@ -33,8 +39,7 @@ annotate TravelService.Travel @(
         SourceEntities : [
             to_Booking
         ],
-       TargetProperties : [
-           'TotalPrice'
+       TargetProperties : ['TotalPrice'
        ]
     }
 );

app/travel_processor/layouts.cds

@@ -88,13 +88,14 @@ annotate TravelService.Travel with @UI : {
         ID     : 'DateData',
         Target : '@UI.FieldGroup#DateData',
         Label  : '{i18n>Dates}'
+      },
+      {
+        $Type : 'UI.ReferenceFacet',
+        Label : '{i18n>Sustainability}',
+        ID    : 'i18nSustainability',
+        Target: '@UI.FieldGroup#i18nSustainability',
       }
-      ]
-  }, {  // booking list
-    $Type  : 'UI.ReferenceFacet',
-    ID     : 'BookingList',
-    Target : 'to_Booking/@UI.PresentationVariant',
-    Label  : '{i18n>Bookings}'
+    ]
   }],
   FieldGroup#TravelData : { Data : [
     { Value : TravelID               },
@@ -117,7 +118,24 @@ annotate TravelService.Travel with @UI : {
     { $Type : 'UI.DataField', Value : BookingFee },
     { $Type : 'UI.DataField', Value : TotalPrice },
     { $Type : 'UI.DataField', Value : CurrencyCode_code }
-  ]}
+  ]},
+  FieldGroup #i18nSustainability: {
+    $Type: 'UI.FieldGroupType',
+    Data : [
+      {
+        $Type: 'UI.DataField',
+        Value: GoGreen,
+      },
+      {
+        $Type: 'UI.DataField',
+        Value: GreenFee,
+      },
+      {
+        $Type: 'UI.DataField',
+        Value: TreesPlanted,
+      },
+    ],
+  }
 };
 
 annotate TravelService.Booking with @UI : {

app/travel_processor/package.json

@@ -11,7 +11,10 @@
     "start": "ui5 serve",
     "test": "npm run test:node && npm run test:java",
     "test:java": "karma start --server=java --single-run",
-    "test:node": "karma start --server=node --single-run"
+    "test:node": "karma start --server=node --single-run",
+    "ts-typecheck": "tsc --noEmit",
+    "prestart": "npm run ts-typecheck",
+    "prebuild": "npm run ts-typecheck"
   },
   "keywords": [
     "ui5",
@@ -25,6 +28,13 @@
     "karma-ui5": "^4.0.1",
     "puppeteer": "^23.0.2",
     "ui5-middleware-simpleproxy": "^3.2.16",
-    "ui5-task-zipper": "^3.1.4"
+    "ui5-task-zipper": "^3.1.4",
+    "@sap/ux-ui5-tooling": "1",
+    "@sapui5/types": "~1.130.0",
+    "ui5-tooling-transpile": "^3.3.7",
+    "typescript": "^5.1.6",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
+    "@sap-ux/eslint-plugin-fiori-tools": "^0.4.0"
   }
 }

app/travel_processor/tsconfig.json

@@ -0,0 +1,28 @@
+{
+    "compilerOptions": {
+        "target": "es2022",
+        "module": "es2022",
+        "skipLibCheck": true,
+        "allowJs": true,
+        "strict": true,
+        "strictPropertyInitialization": false,
+        "moduleResolution": "node",
+        "rootDir": "./webapp",
+        "outDir": "./dist",
+        "baseUrl": "./",
+        "paths": {
+            "sap/fe/cap/travel_processor/*": [
+                "./webapp/*"
+            ]
+        },
+        "typeRoots": [
+            "./node_modules/@types",
+            "./node_modules/@sapui5/types",
+            "../../node_modules/@types",
+            "../../node_modules/@sapui5/types"
+          ]
+    },
+    "include": [
+        "./webapp/**/*"
+    ]
+}

app/travel_processor/ui5.yaml

@@ -20,6 +20,10 @@ builder:
         archiveName: travel-processor
         additionalFiles:
           - xs-app.json
+    - name: ui5-tooling-transpile-task
+      afterTask: replaceVersion
+      configuration:
+        debug: true          
 
 server:
   customMiddleware:
@@ -30,3 +34,11 @@ server:
         baseUri: http://localhost:4004/processor
         username: admin # dummy credentials for local testing
         password: admin # dummy credentials for local testing
+    - name: fiori-tools-appreload
+      afterMiddleware: compression
+    - name: ui5-tooling-transpile-middleware
+      afterMiddleware: compression
+      configuration:
+        debug: true
+        excludePatterns:
+          - /Component-preload.js        

app/travel_processor/webapp/Component.ts

@@ -0,0 +1,20 @@
+import BaseComponent from "sap/fe/core/AppComponent";
+
+/**
+ * @namespace sap.fe.cap.managetravels
+ */
+export default class Component extends BaseComponent {
+
+	public static metadata = {
+		manifest: "json"
+	};
+
+    /**
+     * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
+     * @public
+     * @override
+     */
+	//public init() : void {
+    //    super.init();
+	//}
+}

app/travel_processor/webapp/ext/controller/ControllerExtension.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Helper to be able to define how to get the page specific extension API when writing a controller extension.
+ */
+declare module 'sap/ui/core/mvc/ControllerExtension' {
+    export default class ControllerExtension<API> {
+        static overrides: unknown;
+        base: {
+            getExtensionAPI(): API;
+        }
+    }
+}