Skip to Content
Technical Articles

UI5ers Buzz #51: UI5 Tooling 2.0: How to develop and run SAP Fiori elements locally!

Introduction

On April 1st I talked about the UI5 Tooling – a modern CLI-based development experience” in a SAP Community call. A week later, on April 7th I published the blog post UI5 Tooling: a modern development experience for UI5! which demonstrates the capabilities of the UI5 Tooling how we can consume UI5 library dependencies locally and how we can use custom middlewares to improve the overall UI5 development experience. This time, I want to focus on the availability of SAPUI5 on NPM and how we can utilize this to develop and run an SAP Fiori elements application locally.

SAPUI5 from NPM!

The biggest benefit of the UI5 Tooling 2.0 is the consumption of the SAPUI5 library dependencies from NPM. Merlin Beutlberger explains the new features of the UI5 Tooling 2.0 in his blog post The UI5 Tooling and SAPUI5 – The Next Step. Thanks to the awesome work of the UI5 Tooling team, we can now develop SAPUI5 applications locally. We can consume the sap.suite.ui.generic.template library to build and develop SAP Fiori elements applications locally and also consume the sap.ushell library to make the application running in the SAP Fiori launchpad sandbox. Within this blog post, I will focus on creating an SAP Fiori elements application in SAP Web IDE and run it locally with the UI5 Tooling.

Prerequisites

As the UI5 Tooling is based on Node.js. We need to ensure that at least Node.js version 10 is installed and configured properly.

Step 1: Create an SAP Fiori elements application

In the first step, we create an SAP Fiori elements application based on the List Report Application template. This has to be done in SAP Web IDE by using the template wizard.

Follow these steps to create a List Report Application:

  1. Open SAP Web IDE
  2. “File” > “New” > “Project from template”
  3. Select environment “Neo” (as this affects the datasource URL relevant for the proxy)
  4. Select category “SAP Fiori Elements”
  5. Select template “List Report Application”
  6. Enter your project name, title and namespace
  7. In the data connection step (prerequisite: setup a destination to Northwind OData Services first), select the Northwind OData Services as “Service URL”, use the “Relative URL”: /V2/Northwind/Northwind.svc/) and press “Test”.
  8. Skip the annotation selection step, just press “Next”
  9. In the template customization step, select the Object Collection: Customers, OData Navigation: Orders, OData Sub Navigation: Order_Details.
  10. Finish

Step 2: Create the annotation file

As second step, we need to create a simple annotation file for our SAP Fiori elements application. Therefore, follow these steps:

  1. Create the folder annotations in the webapp folder
  2. Use the context menu on the annotations folder and select “New” > “Annotation File”
  3. Just keep the default settings for the annotation file and press “Next” and “Finish”
  4. Create a LineItem annotation with the DataFields: CustomerID, CompanyName and ContactName and the SelectionFields annotation with the Items: CustomerID, CompanyName and ContactName

Feel free to add more annotations. 🙂 Finally, the simple annotation file should look like this:We can test the annotations file by running the SAP Fiori elements application with the SAPUI5 Visual Editor. The application should look like this (select the project in the project explorer and use the context menu on the project folder to launch the SAPUI5 Visual Editor):

That’s all we need to do in the SAP Web IDE. Let’s go local…

Step 3: Download and prepare the SAP Fiori elements application

After the SAP Fiori elements application has been created, select it in the project explorer, export it from SAP Web IDE and unzip it locally in your file system. As a first step locally, we validate whether we need to update the project dependencies of the created UI5 application. To update the project dependencies, we can use the open-source tool npm-check-updates. This tool can be installed via:

npm install -g npm-check-updates

After the installation of the tool, we can run:

ncu -u

to upgrade the project dependencies in the package.json. Once the project dependencies are upgraded, run:

npm install

to prepare the project for a first run. The project can be started with the command:

npx ui5 serve -o test/flpSandbox.html

Although the development server starts technically, there are a few things missing to make the SAP Fiori elements application to run properly (e.g. the SAPUI5 resources).

Step 4: Consume SAPUI5 library dependencies from NPM

Now, we are configuring the application to consume the SAPUI5 library dependencies from NPM. Therefore, we modify the ui5.yaml to use the specVersion: 2.0:

specVersion: '2.0'
metadata:
  name: mylistreport
type: application
[…]

As next step, we add the framework dependency to SAPUI5 by running the following command:

npx ui5 use sapui5@latest

Once the framework dependency is added, we can include the required SAPUI5 libraries with the following command (make sure to grab the whole line => it’s long 😉 ):

npx ui5 add sap.ui.core sap.m sap.ushell sap.collaboration sap.ui.generic.app sap.suite.ui.generic.template themelib_sap_fiori_3

This will add the sap.ui.core, sap.m, sap.ushell, sap.collaboration, sap.ui.generic.app, sap.suite.ui.generic.template and the themelib_sap_fiori_3 as UI5 library dependencies to the project and the two commands above will create the following section in the ui5.yaml:

framework:
  name: SAPUI5
  version: "1.76.1"
  libraries:
    - name: sap.collaboration
    - name: sap.m
    - name: sap.suite.ui.generic.template
    - name: sap.ui.core
    - name: sap.ui.generic.app
    - name: sap.ushell
    - name: themelib_sap_fiori_3

After starting the development server with:

npx ui5 serve -o test/flpSandbox.html

the SAPUI5 resources are loaded from the framework dependencies configured in the ui5.yaml. We will see the following screen:

Now the SAP Fiori elements application is starting up and you can go ahead to configure the proxy to access the Northwind OData Service.

Step 5: Setting up a proxy to tunnel the Northwind OData Service

To access the Northwind OData Service in the SAP Fiori elements application, we can simply use the simple proxy middleware from the UI5 Ecosystem Showcase. It can be installed as a dev dependency by running the following command:

npm install ui5-middleware-simpleproxy --save-dev

Afterwards, we need to add the ui5-middleware-simpleproxy as ui5/dependencies in the package.json:

  "ui5": {
    "dependencies": [
      "@sap/ui5-builder-webide-extension",
      "ui5-middleware-simpleproxy"
    ]
  },

Now, we need to open the ui5.yaml and add the following configuration before the framework section:

[…]
server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    mountPath: /Northwind/V2/Northwind/Northwind.svc/
    afterMiddleware: compression
    configuration:
      baseUri: https://services.odata.org/V2/Northwind/Northwind.svc/
framework:
  name: SAPUI5
  version: "1.76.1"
[…]

This configuration ensures that requests to /Northwind/V2/Northwind/Northwind.svc/ are proxied to https://services.odata.org/V2/Northwind/Northwind.svc/.

Step 6: Validate that the SAP Fiori elements application runs locally

The next step is to validate that the SAP Fiori elements application runs locally. Therefore, we first ensure that all project dependencies are installed by running:

npm install

Afterwards, we can start the development server by executing:

npx ui5 serve -o test/flpSandbox.html

This will open our preferred browser and the SAP Fiori launchpad will come up with a tile for our SAP Fiori elements application. If we click on this tile, our application will start, and the data will be loaded from the Northwind OData Service.

Step 7: Add the livereload middleware

With the livereload middleware you can achieve a click and refresh behavior while developing. The middleware is watching the changes of the sources in the file system. Once a source file has been modified the livereload middleware refreshes the application in the browser.

Add the livereload middleware with the following command:

npm install ui5-middleware-livereload --save-dev

Afterwards in the package.json ensure to list the ui5-middleware-livereload in the ui5/dependencies:

  "ui5": {
    "dependencies": [
      "@sap/ui5-builder-webide-extension",
      "ui5-middleware-simpleproxy",
      "ui5-middleware-livereload"
    ]
  },

Afterwards, in the ui5.yaml just include the livereload middleware configuration next to the simpleproxy middleware configuration to the server/customMiddleware section:

[…]
server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    mountPath: /Northwind/V2/Northwind/Northwind.svc/
    afterMiddleware: compression
    configuration:
      baseUri: https://services.odata.org/V2/Northwind/Northwind.svc/
  - name: ui5-middleware-livereload
    afterMiddleware: compression
    configuration:
      ext: "xml,json,properties"
      path: "webapp"
framework:
  name: SAPUI5
  version: "1.76.1"
[…]

The next time when you start the development server by running the following command:

npx ui5 serve -o test/flpSandbox.html

the livereload middleware is watching your file system and in case of changes it will refresh your browser (remark: in case you face issues with livereload, maybe your html page was cached before, just ensure to reload the html page properly).

Conclusion

As we can see, we can develop an SAP Fiori elements application locally with the UI5 Tooling. The SAPUI5 library dependencies are available locally and can be consumed. However, local SAP Fiori elements application development still feels a bit bumpy! Within SAP Web IDE, due to the availability of the Annotation Modeler and the SAPUI5 Visual Editor we have quite nice visual tools which support us to develop SAP Fiori elements applications. For local development these visual tools really missing. But for the purists among us who like to develop directly in the annotation files with the angle brackets, this could be nonetheless an interesting alternative. Enjoy…

Related Links

 

Previous Post: UI5ers Buzz #50: The Loading Evolution: “Get the most out of your UI5 app!”

 

Peter is one of the initiators who started the Phoenix project (a.k.a. OpenUI5/SAPUI5) grown into the role of the UI5 Chief Architect mainly focusing on UI innovation in the area of the UI framework (UI5 Evolution), controls (UI5 Web Components), tooling (UI5 Tooling). 

 

 

 

26 Comments
You must be Logged on to comment or reply to a post.
      • Thanks.

        Yet, using non-local IDE for a local SAPUI5 application sounds a little paradoxical to me.
        Is there any pragmatic use case for it?

        • Basically, there are good arguments for both – having the IDE either local or remote. The main advantage of an online IDE is that your projects are available on any machine, there is no setup and configuration required to connect to your cloud systems and there is no hardware limitation since all resources are stored in your workspace in the cloud.

          • Yes,

            These are all valid points, of course.

            My question was if there is any use-case for creating an SAPUI5 application via the Web IDE and then run it locally?

          • A centrally managed IDE has some limitations on which tools can be used and in case of you want to extend this IDE with additional plugins to improve your development experience then this can only be done on your local IDE. There you have everything under control and you can plugin different tools as you want and as you need.

  • Cool! Thought about that when the 2.0 tooling was released, but a small caveat is that so far only the version 1.76 of the SAPUI5 libraries are released via the npm channel. A lot of customers run 1.71 due to the announced maintenance duration, but I guess older versions are not brought to npm?

    • Hi Aleksandr,

      when you have your own library, I would recommend to use the library type for the project in the ui5.yaml and put the source in the src folder – similar like we do it in OpenUI5, e.g. for the sap.ui.layout library: https://github.com/SAP/openui5/blob/master/src/sap.ui.layout/ui5.yaml

      ---
      specVersion: "1.1"
      type: library
      metadata:
        name: my.custom.lib
      

      In the package.json you just need a dependency to the sap.ui.core library:

      {
        "name": "my.custom.lib",
        "version": "1.0.0",
        "description": "My awesome custom library",
        "author": "Me",
        "license": "Apache-2.0",
        "dependencies": {
          "@openui5/sap.ui.core": "1.78.0"
        }
      }

      Now in your other project you can consume this library as normal dependency either by using npm link or the automatic linking of yarn workspaces in your monorepo (see the ui5-ecosystem-showcase repository setup).

      In your application you can consume the library as follows in the package.json:

      {
        "name": "my-app",
        "version": "1.0.0",
        "description": "My unbelievable app",
        "private": true,
        "author": "Me again",
        "license": "Apache-2.0",
        "dependencies": {
          "my.custom.lib": "^1.0.0"
        }
        "devDependencies": {
          "@ui5/cli": "^2.2.4"
        }
      }

      Compared to the UI5 framework dependencies such as OpenUI5 or SAPUI5 which will reside in the ui5.yaml, the custom libraries are included as dependencies in the package.json.

      Now your library is also considered for the self-contained build and it will also be properly served by the ui5 serve development server.

      HTH and BR,

      Peter

      • Hi, Peter.

        I tried to use npm link and dependencies section in package.json for library consuming and it is work fine for simple folder structure project/webapp, but i have more complicated path project/src/main/webapp(by history reason) and it doesn’t work. In resources folder i don’t see library files.

        Can i resolve my problem?

        And second question. Can i consume library in integration test in Jenkins, maybe there is some blogs with example?

        • Hi Aleksandr,

          in the ui5.yaml you can maintain the paths configuration and change it from webapp to src/main/webapp:

          specVersion: "2.0"
          metadata:
            name: my-app
          type: application
          resources:
            configuration:
              paths:
                webapp: src/main/webapp

          For the second question, this basically depends on the setup there and what is used. If you would start the server there using ui5 serve this should also work for integration tests. But it dependends on the infrastructure being used there. If it is not a node based build it might be more complicated and needs to be fully understood how it is setup right now.

          HTH and BR,

          Peter

          • Thanks, Peter.

            But I already configure paths section in ui5.yaml and when localhost  is started              i don’t see mylibrary in resource folder.

            I create project with standard path( project/webapp ) and i see library in resource folder.

            I think that the problem in the right folder structure of project.

          • Thanks, Peter. Thanks for help.

            I resolve my issue. It is strange for me that if in package.json i have a section

              “ui5”: {
                “dependencies”: [ .. ]
            }
            i must add “mylib” in this section and in other case(section “ui5” omitted)  i can add in dependencies section .
              “dependencies”: {
                “mylib”: “^1.0.0”
              }
            My solution is below:
              “devDependencies”: {
                “@ui5/cli”: “^2.2.5”,
                “eslint”: “^6.7.2”,
                “ui5-middleware-livereload”: “^0.1.10”,
                “ui5-middleware-proxy-basicauth”: “0.0.6”,
                “ui5-task-nwabap-deployer”: “^1.0.10”,
                “ui5-task-transpile”: “^0.1.5”,
                “mylib”:”^0.0.1″
              },
              “ui5”: {
                “dependencies”: [
                  “ui5-middleware-livereload”,
                  “ui5-middleware-proxy-basicauth”,
                  “ui5-task-transpile”,
                  “ui5-task-nwabap-deployer”,
                  “mylib”
                ]
              },
          • Ahh, yes – this is important. Once the “ui5” > “dependencies” are maintained the UI5 tooling only checks the dependencies listed here.

            Happy to hear that you solved the issue! 🙂

             

  • Cannot run the command “npx ui5 serve -o test/flpSandbox.html” I get a mistake “Unknown Middleware ui5-middleware-simpleproxy”. What can it be?

    • Hi Fedor,

      sorry for my late reply – either you missed to run:

      npm install ui5-middleware-livereload --save-dev

      Or you missed to add the entries to the ui5 > dependencies in the package.json:

        "ui5": {
          "dependencies": [
            "@sap/ui5-builder-webide-extension",
            "ui5-middleware-simpleproxy",
            "ui5-middleware-livereload"
          ]
        },

      Hope this helps and best regards,

      Peter