This short blog post will explain how you can change the UI5 version of the fiori application which you are running locally. This is sometimes necessary to validate if there might be some issue or different behavior in some older SAPUI5 version.

How can you preview your application in BAS?

If you created your project using the Application Generator from SAP Fiori tools or you have migrated your app to BAS using the SAP Fiori tools, then the NodeJs module which provides you this functionality is already pre-installed. If you do not find yourself in one of the two described cases above, then you have to install the node module ux-ui5-tooling yourself. The ux-ui5-tooling is highly customizable and designed to support development tasks that need to be performed alongside of a running application. It’s important to know that this node module supports ABAP based projects, if you have a CAP project you can preview your app with help of the SAP Fiori tools by using the CDS tools.

How does the preview work of your application work in BAS?

When you run your applications locally in BAS two servers are started in a terminal. The first server is used for the actual preview and the second for the live reload function which automatically triggers a refresh of the browser where your application files are changed. You can preview your app in a different setup either with mocked data using that are coming from the mock server or live data fetched from a real S/4 system.

Let’s get our hands dirty and preview our app using an older UI5 version

So I am cloned a git project from the Manage Bank Statement fiori application into my BAS. You can see the run button on the top right corner:

Step 1: click on ‘Run and Debug’ button

Now we will get asked what configuration we want to run. Here we select the last option to configure a new one:

Step 2: create a new run configuration

Select on which project you want to create a new configuration:

Step 3 select the fiori project

Now you will see the run configuration wizard. Here you can give your new configuration a specific name, it would make sense to put the UI5 version in the name but this is up to you and how you organize yourself. You have to select the file name on which your application is running, usually the index.html is a good choice.

Step 4 (a): configure the preview

The rest we leave how it is, depending on what you want to achieve you can make further adjustments. If you scroll down you’ll see more options. Important for our goal is now to check the checkbox for “Use another UI5 version”. And select from the drop down list the version you want to use for the preview. Here we selected 1.110.0. Below you see the source destination which is configured in your project and can be found in the ui5.yaml file. I censored it here but it shouldn’t be empty.

Step 4 (b): configure the preview

Step 4 (c): configure destination

Now you click on save and you will see the new configuration which was created and is ready to be executed. You can either click on the arrow on the right side or hover over the configuration in the left panel, then a green icon (“run”) button will appear:

Step 5: execute the run configuration

Now a new tab should open and preview your fiori application.

You can check the version by using the following short cut:

Step 5: check UI5 version from your preview

As you can see we finally changed the UI5 version of our fiori application in the preview.

Limitations for the preview

Currently only the UI5 versions from 1.84 upwards are supported

Side comment

Of course this blog post is also valid for Microsoft Visual Studio Code (VSC) development environment. There might be though some minor differences in how you can achieve the preview.

Further information can be found on the technical documentation of the NodeJs module: ux-ui5-tooling.