My first experience with TypeScript in UI5 – Final

[WouterLemaire]

Around April SAP announced for the first time TypeScript Support for UI5. Since then, I’ve tried to use this in every new UI5 project where possible. Now it is time to share my experience with TypeScript in UI5 in this blog post series:

• Introduction


• Project setup


• Adding a BaseController


• OData Model Service wrapper


• Using Classes and State/Model Manager


• Final part (current)

After reading the previous blog post, you might think this setup comes with a lot of overhead on creating files, classes, states, … . In this blog post I will try to extend the example app to show the added value of this UI5 project setup. I will implement a save functionality that updates the supplier. For this I will adapt small changes in every layer, starting from the service to end in the view.

Follow the video or continue reading:

NorthwindService

In the NorthwindService class I added the function “updateSupplier”. This function will create the path using the supplier ID followed by the “put” function in the service wrapper.

public updateSupplier(supplier:SuppliersEntity){

    const supplierPath = this.model.createKey("/Suppliers", {

        ID: supplier.ID

    });

    return this.odata(supplierPath).put<SuppliersEntity>(supplier);

}

https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/service/NorthwindService.ts

Supplier class

In the Supplier class I added an “isValid” function where I validate if the name of the supplier is filled in. It will also keep the valuestate for the name of the supplier. This keeps the logic, like the validation in this case, together with the related class:

https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/model/Supplier.ts

State/Model manager

The state/model manager will use this “isValid” function to validate the supplier input fields. If valid, it will save the supplier by using the “updateSupplier” function of the NorthwindService instance. Watch carefully to the object that’s being passed. I’m passing the result of the “getJSON” function, which will be in the format of the supplier entity together with the address. With this I’m making use of the classes to its fullest and implementing separation by concerns.

If all went well it will reload the supplier again from the API. This might be optional but confirms everything was successful.

public async saveSupplier() {

    const supplier = this.getData().supplier;

    if(!supplier.isValid()){

        this.updateModel();

        throw Error("Name is not valid!");

    }

    await this.getService().updateSupplier(supplier.getJSON());



    return this.getSupplier(supplier.getId());

}

https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/state/NorthwindState.ts

Controller

In the end the controller will call the save function and only handle the UI parts like showing a busy indicator and showing errors.

public async onSaveSupplier(){

	BusyIndicator.show(0);

	try {

		await this.northwindState.saveSupplier();

	} catch (error) {

		MessageBox.show(error?.message);

		console.error(error);

	}finally{

		BusyIndicator.hide();

	}

}

https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/controller/App.controller.ts

View

Off course I need to bind “nameValueState” to the valueState property of the Input field for the name:

https://github.com/lemaiwo/UI5TypeScriptDemoApp/blob/main/src/view/App.view.xml

Result