Introduction

WouterLemaire · ‎09-23-2021

Introduction

At the last UI5con 2021 on air, I presented the UI5 Component Loader. A solution that takes reusability of UI5 Components to the next level. In a series of blog posts, I want to share the details of my session with some more technical insights starting from the beginning:

A high-level overview of the UI5 Component Loader (current blog post)

All technical details of the UI5 Component Loader App

Run the component loader on your system or locally

The full session is available on YouTube: https://youtu.be/V6xOig4H-aA

Full playlist of UI5con ON AIR 2021: https://www.youtube.com/playlist?list=PLHUs_FUbq4dXRIbRPiXmzXmV2BAcA8zAR

In this first blog post, I will start with a high-level explanation on why I came up with the UI5 Component Loader, not yet too technical. In case you are interested in more technical details, you can also check the other blog posts of the UI5 Component Loader.

Challenge

I was part of a project where we had to build many new UI5 apps. All of those apps had a lot in common; most of them had to be master-detail where the detail and/or master page could be the same as the detail or master page from another app. The project had the need to reuse pages and combine them into new apps

For example, we would have to create 3 apps with each its own master and detail page. Next to that, we would also need to build apps with the same master or detail from the first 3 apps. Like in this overview:

It would be insane to develop and maintain this for each app separately. Which challenged me to provide a solution that would allow us to reuse many of these apps/components.

Easy option could be to use Cross navigation in Fiori. This would be an option in case the master and detail view should be together on the same screen.

Solution

As a solution, I came up with the UI5 Component Loader. The UI5 Component Loader is a simple app that allows you to combine multiple pages from different UI5 apps / components and make them work together.

In the next demo, you will see 5 different applications which are all using the UI5 Component Loader as a starting point with different configuration. Behind the scene, the UI5 Component Loader will load different pages from different components based on the tile configuration.

In this demo, 5 pages from 5 different components are used:

List components: 2
- Flights list
- Business partners list

Detail components: 3
- Flights detail
- Business partner detail
- Generic detail

With those 5 components, I managed to created 5 different apps that exists out of 3 pages.

Demo – video

How it works

What just happened? Let me explain you how it all works starting with UI5 Components. UI5 Components (in case of UI5 Component Loader) are nothing special, it is just super important that I am not confusing you.

A UI5 App === UI5 Component, it is the same. The only difference is terminology and how it is being loaded/handled.

You could say that a standalone UI5 App using the index.html page as starting point è is a UI5 app

A UI5 app loaded inside the Fiori Launchpad using the component.js as a starting point è it is being treated as a UI5 Component

Therefore, it is one and the same 😊

Just like any other UI5 app/component, it can be used as a standalone UI5 app containing its own logic and actions. For integration with the UI5 Component Loader, it can use events (defined in the library of the UI5 Component Loader) to trigger actions in the UI5 Component Loader. The Component can also receive events by implementing a hook function that is defined in the library as well. (Library will come back later). Off course, those events will not triggered when the app used outside the UI5 Component Loader.

The UI5 Component Loader can simply load any UI5 Component just like the Fiori Launchpad does but it has to follow some “rules”/guidelines. At the moment, only UI5 Components with a single view and Fiori Elements are supported. Every component will have to add its own footer bar with actions, it won’t be added by the UI5 Component Loader like the My Inbox does. Otherwise, it wouldn’t be possible for the component to run standalone.

The UI5 Component Loader only contains the UI Element “Flexible Column Layout” and will, in first place, load the configured component into the right place. The flexible column layout comes with 3 possible places, master, detail and detaildetail. Depending on the config, it will load a component into one of those aggregations

In case the UI5 component loader has loaded a master and detail, it will update the detail page every time the navigation is triggered in the master. First time it will load and create the detail component, second time it will update the component to optimize performance.

For opening the detail page or detail detail page, the component loader has to handle the navigation. Based on the event triggered in the UI5 component, the component loader will navigate from the master to the detail page and/or even to the detail detail page. During this navigation it will also handle the data transmission, like the selected item of a list in the master or in the detail page. Everything from the previous components will be forwarded to the next ones.

Together with the data transmission, this will also forward the configuration parameters for each component.

The UI5 Component Loader can be fully configured by a few backend tables, the configuration is stored in following tables:

ZCL_SCENARIO: scenario id + name. A scenario is the configuration of one app. The name is being used as title for the app by the component loader.

ZCL_TYPE: besides a scenario, the type is being used to enrich the configuration id with a type.

ZCL_CONFIG: this table contains the configuration of the UI5 components for a specific scenario and type. The configuration in this table is similar to the configuration of a Fiori Target Mapping. On top of the component configuration it also contains:
- Viewed: place for loading the component (Master, Detail or DetailDetail)
- Fiori elements: I had to implement some hacks for Fiori Elements, the component loader needs to know if it is a Fiori Element to execute those hacks
- Layout: the component loader defines default layouts for the Flexible Column Layout control. In case it is required, those defaults can be overwritten by setting another layout type in this field. All values defined here are possible: https://ui5.sap.com/#/api/sap.f.LayoutType

ZCL_PARAM: a param table for UI5 Components to make them configurable. This allows to reuse components in other scenario’s with different parameters.

ZCL_CONFIG (demo)

ZCL_PARAM (demo – flight details editable or read-only)

For making this all work end-to-end, it starts with the tile configuration. Every tile that uses this UI5 Component Loader will point to the app of the UI5 Component Loader but with a scenario id and type as parameters. Those parameters will make sure that the component loader loads the right configuration. Based on this configuration the UI5 Component Loader will load the configured UI5 Components into the correct places.

Extra

A feature that came out-of-the-box with the UI5 Component Loader is the reusability of UI5 Components in the Fiori launchpad of the Busines Technology Platform NEO. One of the scenario’s needed to run in the Fiori Launchpad on BTP NEO. With the UI5 Component Loader we were able to load the UI5 components from our on-premise system. We only had to deploy the UI5 Component Loader to BTP NEO. This saved us a lot of time deploying all components two to environments.