Acorel
Gratis demo
, Getting started with UI5 Tooling, AcorelOver 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:
  • Create an extensible framework
  • Develop a consistent UI
  • Have less coupling with the backend technology, as was very much the case with their legacy UI
From the beginning, it supported – now commonplace – features such as:
  • Automatic databinding,
  • A rich set of UI controls
  • Support for theming.
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.
, Getting started with UI5 Tooling, Acorel
This has the following advantages:
  • It is easier for SAP to add new functionality or develop some components faster than others
  • The smaller modules can be individually consumed instead of the whole framework. This leads to smaller, faster applications.
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:
  • Run your app on an on premise Netweaver Stack where you would develop the application either in SAP Gui or in Eclipse for ABAP
  • Run your app on SAP Cloud Platform and develop the application in the Web IDE
However, non-native SAP web developers expect a javascript framework to:
  • Follow modern conventions (command line tooling, modern dependency management)
  • Allow you to bring the tools of your choice (for example Visual Stodio Code)
  • Be able to run locally or on a server transparantly
  • Not have to download and manage your libraries manually
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:

, Getting started with UI5 Tooling, Acorel

  • A build system
  • A local server/runtime
  • Dependency management of sapui5 dependencies and external dependencies. No more manual downloads/versionings of sapui5 components. (Yay!)
  • Yeoman: A code/app generator to generate a skeleton to get up to speed quickly
  • Additional functionality, such as a reverse proxy
You bring:
  • Your own editor
  • Your own source control

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:
  • You have installed npm
  • You have some familiarity with the command line
  • You are familiar with openui5 or with general javascript frontend development

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:
, Getting started with UI5 Tooling, Acorel
A quick inspection in your browser developer toolbar shows the problem:
, Getting started with UI5 Tooling, Acorel
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:
, Getting started with UI5 Tooling, Acorel
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.

Wilco Menge