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

All technical details of the UI5 Component Loader App

Run the component loader on your system or locally (current blog post)

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 third and last blog post, I will share how to deploy the UI5 Component Loader and its library to your own SAP system. Besides running it on your system, I will also show how you can run it locally. This will be helpful when developing new components.

Deploy to SAP

For my UI5con demo and developing the very first version of the UI5 Component Loader, I used my own ABAP Trial 1909 running on a VPS: https://blogs.sap.com/2021/02/15/sap-abap-platform-1909-developer-edition-available-soon/

The UI5 Component Loader requires some tables to store the configuration with a few CDS views to expose it as OData in the ABAP backend system. Those backend objects have to be deployed before you can start using the UI5 Component Loader.

I used ABAPGit to export everything to GitHub. You can find the GitHub repository to the backend part here:

https://github.com/lemaiwo/UI5ComponentLoaderBackend

This can help to install and use ABAPGit to import this repository into your system: https://docs.abapgit.org/guide-install.html

In the end, you should have a package with all the following objects:

The backend repository already contains a first version of the frontend as well. This is NOT the latest version. You will still have to deploy the frontend separated by following the next steps.

The app and project contain a “ui5-deploy.yaml” file that contains all configuration for deploying. The system and user properties are stored in a “.env” file which is not shared on GitHub for security reasons 😊 :

UI5 Component Loader:

UI5 Component Loader Library:

The configuration in the .env files contains the following entries:

TARGET=http://xxx.xx.xxx.xx:50000/

SAPUSERID=USER

SAPPWD=PWD

CLIENT=001

TRANSPORT=Transport

PACKAGE=Package

After you completed the configuration with your own system configuration, you should be able to deploy both with the following command:

npm run deploy

Do this for the UI5 Component Loader and library. Before you can start using the Component Loader you have to deploy your components and complete the configuration tables.

As an example, you can start by deploying the example components from:

List Component: https://github.com/lemaiwo/listcomponent

Detail Component: https://github.com/lemaiwo/detailcomponent

Generic Component: https://github.com/lemaiwo/generic-detail-component

You can deploy them all the same way as the Component Loader and the library.

Once deploy you can complete the configuration:

Define a scenario with an ID and description
- The scenario id bundles all the configuration for one app and will be used in the tile and/or target mapping
- The description will be used as title for the app by the UI5 Component Loader

Define a type
- Only used to have more configuration combination

Component configuration
- Uses the type and scenario as key
- level is the sequence of component in the app configuration
- viewid defines the aggregation of the flexible column layout
- ComponentID and url are the same as for a target mapping configruration
- componentcds is not in use anymore
- Fiori_elements is flag to know if the component is a fiori elements
- layout allows you to overwrite the default layout type of the flexible column layout

Parameter configuration
- enables you to set a parameter for a component for a specific scenario and type

Next, you can use this configuration to create a target mapping. You have two options:

One generic target mapping and a tile for each scenario with the id as a parameter in the tile
- parameter will be visible in url => user can change the scenario id

A target mapping and tile for each scenario with the id as a default parameter in the target mapping
- multiple target mappings but the id is not visible in the url

In this example, I will use the first option. The target mapping:

The tile:

Now you are ready to give it a first try on your system.

Run locally

Always deploying for testing new components while developing would be time consuming. Therefor it is of course possible to run the Component Loader and the newly developed component locally.

Running locally means you have to start from the Component Loader locally. The Library can be loaded locally or from your SAP system, as this will not change it is fine to load it from the SAP server. You also have this option for the components. It would make sense to only load the components that you are currently developing from your local setup. The others can be loaded from your SAP system.

Just as an example, I will run the Component Loader and Component X on my local system and load the library from the server.

I configured the UI5 server for Component X to always use port 8081:

By default it contains a start script “ui5 serve”:

In the UI5 server middleware proxy configuration of the Component Loader, I configured to load the library and the OData service (in yellow) from the SAP system and the new Components from localhost using the defined port (in blue). The path of the components needs to be the path of the app on the SAP server. The proxy will forward it to the localhost and change the path to the pathPrefix:

I created a start script demo to run all the components and the Component Loader together. This script assumes that the Component Loader and the Components are located in the same folder.

Use “npm run start:demo” to run it all together:

You need to let the component loader know which scenario you want to test. This is needed to load the correct components, the once that you are developing. Therefor I added a Launchpad sandbox to the project where you can create tiles for a specific scenario.

Open the launchpad.html:

It contains a tile to the Component Loader with a specific scenario in the url property. You can change this in case you want to test a different scenario or create multiple tiles for it:

This should help you developing components!