Hi, my name is Denys van Kempen, SAP HANA Academy.
You are watching a video tutorial that is part of a series about SAP Business Technology
Platform certifications, part of the playlist SAP Certified Development Associate - SAP
HANA Cloud
This tutorial covers the topic area Create and Integrate the UI
This video was recorded in September 2022.
For the latest tutorials on the topic, please check the playlist.
This is part two we covered Expose Data as OData Services in
a previous video Create and Integrate the UI is covered here.
As most of you will know, the user interface, the UI, of SAP business applications uses
SAPUI5, a JavaScript UI Framework rendering HTML5,
hence the name.
Here we have the demo kit, sapui5.hana.ondemand.com
key features
responsive, which means is adapts automatically to the device
enterprise-ready, used by all SAP products, easy to integrate into the SAP ecosystem
supports all modern standards,
and implements the SAP Fiori design language
a live editor, so you try it out
evolution
the scenarios: SAPUI5 on BTP, on-premises, or as open-source
with the different community resources
the documentation
samples
demo apps
and so on
This is the place to go to learn about SAPUI5
For the open-source implementation, there is openui5.org
make sure to also visit the SAP Community for SAPUI5
and SAP Fiori,
the design language
with design guidelines
hosted on experience.sap.com
with the principles: role-based, adaptive, coherent, simple, and, yes, delightful
Fiori
with a get started section
explaining all about Fiori
suggest to take a look at these resources, and familiarise yourself a bit with SAPUI5
and SAP Fiori, in case this is new to you
As with the other topics, you are not expected to be a pro, just the basics
Back to our sample app
As a reminder, we are running a dev space in SAP Business Application Studio for a Full
Stack Cloud Application
Make sure you are signed in to the Cloud Foundry environment of the SAP Business Technology
Platform, we are using the trial
and that the SAP HANA Cloud instance is running (in the trial it is stopped every night).
connect the development environment to the HDI Deployer with the cds bind command
and run cds watch
we are going to add a bit of middleware, a bit of plumbing, to our app,
provided, courtesy of SAP, free of charge, called the app router
you may recall we added support for MTA with command cds add mta
support for the HANA database with cds add hana
guess what? to add a app router to our project, we can use the command cds add approuter
and what this does, is adding three files, three JSON files
package.JSON which defines the properties of the app
with a dependency on @sap/approuter
and we can look this up
in the Node Package Manager library
with the documentation
when a business application consists of several different apps (microservcies), the application
router is used to provide a single entry point
and what it does is dispatch, send, requests to the back-end microservices
authenticate users serve static content
we can also find this documented in the SAP BTP development guide for the Cloud Foundry
environment,
recommended reading
here we have an illustration
with a business application,
consisting of multiple microservices, business logic apps,
and service instances, like SAP HANA Cloud for persistence, for example,
the approuter routes the requests, and authenticates,
a topic we will address in the next video on security
as before, install the dependencies with the npm install command.
This adds 231 packages,
which includes the approuter itself
and a JavaScript file
containing the logic
we configure the approuter using a file called xs-app JSON
for now, we are going to disable authentication,
changing route into none
and by removing the references to xsuaa
two routes are defined
root (slash) and app
for app, approuter serves static content from the current directory (dot)
for all other requests, the destination to be used is srv-api,
provided by
switching to MTA YAML
the service module
that’s the app router
now the UI
for this, we can use another template
Fiori: open application generator
Those familiar with SAP Fiori a bit,
will know about the different floorplans provided by SAP Fiori elements,
the alternative is to use SAPUI5 freestyle
which provides more choice in the layout, but is also a bit more work
again, you are not expected to have fully mastered SAPUI5 and SAP Fiori for this exam,
there are other certifications for that,
so, we are going to skip over the specifics
in this example, we are going to select SAP Fiori Worklist Application
as data source, select use a local CAP project
provide the path to the folder
this enables the wizard to parse the CDS files and find the catalog service
next, we need to configure the selected service,
and configure the main project attributes
no need to memorise all of this
just sit back and relax
and finish
and let the wizard generate a front-end, a user interface, a UI, called interactions_items
out-of-the-box SAPUI provides a lot of information
some actions, like open guided development
and links,
to the documentation
here we have the module
it is an entire web application
static content, so hosted by the approuter
let’s preview the app
we now have, besides the service endpoints, a web application
with a very basic Fiori interface, freestyle as configured,
displaying the interaction items persisted in HANA Cloud, only the ID,
we would need to do some more coding to get the other fields,
and freestyle also provides no navigation support for example, this we would also have
to add.
to access our business app via the approuter, we would first need to start the router (npm
start)
which runs the node approuter.js command
the approuter is now running locally and listening on port 5000
this all looks exactly the same at this stage,
we would need to make some changes to connect to freestyle UI directly
but so far, so good
we have a UI and an approuter,
next on the agenda is security
and that’s it
You can find the links to the resources mentioned in the description of this video below.
This video tutorial was recorded by Denys van Kempen, SAP HANA Academy.
Any good?
Give us a like, and for updates, don’t forget to subscribe.
Thanks for watching.