- SAP Managed Tags:
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.
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.
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.
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:
Now a new tab should open and preview your fiori application.
You can check the version by using the following short cut:
Best,
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:
| Shortcut (Microsoft Windows) | Shortcut (macOS) |
|---|---|
| Ctrl + Shift + Alt + P | Ctrl + Shift + Alt/Option + P |
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.
Best,
Edrilan Berisha
SAP S/4HANA Financials Development
1 Comment
