Reusable Components in UI5

Introduction

Typically when creating Fiori applications, developers tend to overlook reusability.

Concepts as custom controls and control libraries are well-known in the UI5

community, but the notion of reusable components is more a hidden gem. It is

only in the last couple of years that this topic got a little more traction by posts of

well-known community members and the UI5 core developers. At UI5Con 2020 in

Brussels I gave a session about this topic and in March I gave a session at the

Erasmus hogeschool Brussels. Also internally at CANGURU the same session is

given. In this post we will provide you a summary of what reusable components

are and why you should care.

What is a reusable component?

To answer this question we first need to ask ourselves what is a Component? Actually

each UI5 application is a component, we always have a file named Component.js

which extends the the sap.ui.core.UIComponent. The component is the entry-point of the application, it consist of 2 main parts:

1. The metadata section contains the link to the application descriptor (manifest.json)

2. The init function in which models/router/etc can be instantiated

Typically when we create a UI5 application we define a rootView in the application descriptor, the Component then instantiates this rootView in the init-function. However this is not the only way we can work with components in UI5. In other frameworks, like react for example, components are independent and reusable bits of code. They work in isolation and return HTML. We can apply the same concept in UI5, we can return a control as the entry-point for a component, unlike the views that we use when developing our applications. This root control can be each UI5 control from the framework as long as it extends from sap.ui.core.Control, think about a button or table for example.

Thus, we can create actual small pieces of functionality that can be reused by multiple applications. Reusable Components can be seen as building blocks which we can use to create our application. Typical use-cases for them:

1. Search help functionality: for example a popup in which we can search materials. This functionality can be reused in multiple applications, like a sales order or purchase order application for example

2. Lists and Tables: we can for example create a component which returns a list of employees in a table, we can use this same table in multiple applications in favor of each time implementing it in our application

3. Other cases can be possible, you can use your imagination

Why should you care?

Each component can have its own dedicated models, such as an OData model, therefore you can build it in a way that it can completely stand on its own. By creating small, dedicated components that solve a specific problem you can truly create building blocks that you can reuse in different applications.

The reusable component can communicate with the parent component via events, so the reusable component is (when well implemented) completely unaware of his parent component.

In the example above you can find a really simple example of a reusable component which is integrated in a Fiori application. The entry point of the component is the button, when the user clicks on the button the popup is shown. When the user selects an entry in the popup we raise an event on which the parent application can react. This is a really simple example, you can envision more advanced cases and we at Canguru Solutions can help you with the implementation of these components or your Fiori applications