Acorel
Gratis demo

Getting started with UI5 Tooling

Wilco Menge, 17 juni 2020
Over the last few years I have done some work on SAPUI5 apps, and although I don’t consider myself an expert in the field, I do like to stay informed regarding recent developments. That’s why I have looked at the state of SAPUI5 in 2020. I will dive in some history, but also show how recent developments allow us to create nice applications quickly.

History of SAPUI5

In 2009, a team within SAP started developing new UI technologies, based on the (then) cutting edge web development technologies, under the name of “Phoenix”. The main objectives were to:
From the beginning, it supported – now commonplace – features such as:
These features aid developers to quickly build applications with a consistent look and feel. Because of the decoupling with the backend, it is possible to have more frequent iterations on UI level, while the backend release cycles can be much more stable and predictable.

SAPUI5 vs OpenUI5

Around 2013, SAP decided to open source the SAPUI5 library as a separate version. This move allows non SAP customers to use the same frameworks and tooling and even to contribute to it. OpenUI5 didn’t replace the SAPUI5, both frameworks are still available and in active development. SAPUI5 is richer in controls and features, while OpenUI5 is free and can be extended by everyone.
(The term Fiori is also used in conjunction with SAPUI5. Fiori isn’t a technology, but a design language, or set of design guidelines. Fiori apps are – typically – SAPUI5 apps that confirm to the Fiori guidelines and principles, centered around a pleasant and consistent user experience.)

Current state of affairs

With releasing OpenUI5, SAP is trying to attract web developers who are not so familiar with the SAP environment and tooling. There are a few recent developments that show thap SAP is continuing in this direction:

UI5 Evolution

In the previous years, efforts of SAP have focussed on expanding the SAPUI5 framework. With UI5 Evolution SAP is restructuring the framework in smaller, more manageable units.
This has the following advantages:
Also jQuery is now being completely removed (Yay!), favoring more modern dependency management.

UI5 Tooling

Traditionally, there were two favoured ways of setting up your development environment. Either you would:
However, non-native SAP web developers expect a javascript framework to:
SAP has heard these complaints and has developed UI5 Tooling, a cli toolset that allows developers to build applications locally with ease. It has been in development since 2018, and recently they’ve launched version 2.0
You get:

You bring:

Getting started

So, how do you start a new project with UI5 Evolution/UI5 tooling? There is some good documentation available, but let’s walk through an example.
Prerequisites:

Installing ui5 tooling:

$ npm install --global @ui5/cli
$ ui5 help # verifies installation, lists available commands

Creating your first app:

Setup a npm project:
$ mkdir sapui5test
$ cd sapuit5test
$ npm init # creates package.json
Setup a ui5 project:
$ mkdir webapp
$ sapui5 init # creates ui5.yaml
Manually create /webapp/manifest.json. This file is needed by ui5 tooling:
{
    "_version": "1.1.0",
    "sap.app": {
        "id": "nl.acorel.ui5demo",
        "type": "application"
    }
}
Target a specific sapui5 or openui5 version and load the core of the ui5 framework:
$ ui5 use sapui5@latest
$ ui5 add sap.ui.core
The ui5 tooling has now created an empty app and has loaded the most recent sapui5 core modules. You can add additional dependencies as needed. Let’s add support for theming and sap.m, the main UI control library:
$ ui5 add sap.m themelib_sap_fiori_3
Let’s setup our application with a rootview and a model tied to an odata webservice. See the github repo for a complete list of files.
webapp/controller/App.controller.js
https://github.com/wmenge/sapui5test/blob/master/webapp/controller/App.controller.js
webapp/manifest.json:
{
    "_version": "1.1.0",
    "sap.app": {
        "id": "nl.acorel.ui5demo",
        "type": "application",
        "dataSources": {
            "c4cDataSource": {
                "uri": "https://myxxxxxx.crm.ondemand.com/sap/c4c/odata/v1/c4codataapi",
                "type": "OData"
            }
        }
    },
    "sap.ui5": {
        "rootView": {
            "viewName": "Ui5Test.view.App",
            "type": "XML",
            "async": true,
            "id": "app"
         },
        "models": {
            "c4c": {
                "dataSource": "c4cDataSource",
                "settings": {
                    "useBatch" : false
                }
            }
        }
    }
}
Here, we define a datasource and bind it to our view.
webapp/Component.js:

https://github.com/wmenge/sapui5test/blob/master/webapp/Component.js

webapp/view/App.view.xml:
<mvc:View controllerName="Ui5Test.controller.App" displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns:smartTable="sap.ui.comp.smarttable" xmlns:tnt="sap.tnt">
    <App id="app">
        <Page title="Wilco's Appje">
            <Table items="{c4c&gt;/ActivityCollection}">
                <headerToolbar>
                    <OverflowToolbar>
                        <Title level="H2" text="Activities"/>
                    </OverflowToolbar>
                </headerToolbar>
                <columns>
                    <Column>
                        <Text text="Activity"/>
                    </Column>
                    <Column>
                        <Text text="Reported"/>
                    </Column>
                </columns>
                <items>
                    <ColumnListItem type="Navigation" vAlign="Middle">
                        <cells>
                            <Text text="{c4c&gt;SubjectName}" wrapping="false"/>
                            <Text text="{c4c&gt;ReportedDate}" wrapping="false"/>
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </Page>
    </App>
</mvc:View>
Here, we define a view with a simple table that will be loaded with Activity data.
You can start the server with:
$ ui5 serve
Navigate to http://localhost:8080/index.html. This should yield a nice list of activities from your C4C system. However, something is wrong:
A quick inspection in your browser developer toolbar shows the problem:
The web application is not allowed to be served from localhost and make a direct connection to the external system. A proxy server is used often to bypass the issue. As said earlier, UI5 tooling brings a proxy server. Install it like this:
$ npm install ui5-middleware-simpleproxy --save-dev
Configure it like this:
ui5.yaml:
server:
  customMiddleware:
  - name: ui5-middleware-simpleproxy
    mountPath: /sap/c4c/odata/v1/c4codataapi
    afterMiddleware: compression
    configuration:
      baseUri: https://myxxxxxx.crm.ondemand.com/sap/c4c/odata/v1/c4codataapi
Modify the datasource in webapp/manifest.json to point to the proxy:
"dataSources": {
    "c4cDataSource": {
        "uri": "/sap/c4c/odata/v1/c4codataapi",
        "type": "OData"
    }
}
Now the data from the backend system is automatically loaded and automatically binded to the view:
You can view the complete project in the github repo and all the discrete setup steps in the commit history.
I hope this has gotten you interested in UI5 development. If you have any questions or remarks, feel free to contact us.

Receive our weekly blog by email?
Subscribe here:

More blogs