SAP Community - Nicolai Schoenteich

Re: Can we deploy sapui5 web components app onto S/4 HANA...

2024-11-11T15:31:21.385000+01:00

Is this what you are looking for?

https://www.npmjs.com/package/@sap/abap-deploy

On what makes a great frontend framework and why UI5 is one

2024-11-12T17:32:10.336000+01:00

On what makes a great frontend framework and why UI5 is one

This blog post is about the qualities of an effective frontend framework and highlights UI5 as the best choice for modern, scalable, and future-proof web applications in the enterprise context. The purpose of this post is not to help you decide which frontend framework to choose for your next project, be it UI5, React, Vue.js, Svelte, or any combination of these (Astro). It's purpose is more to highlight the strengths of UI5 based on my personal experience. Therefore, any examples, details or explanations I present are not (meant to be) exhaustive and are presented from my personal point of view.

I originally presented the content of this blog post at the Flexso Tech Day 2024.

Qualities of a great frontend framework

When we think about what makes a great frontend framework (or any programming framework for that matter), we usually think along the lines of the following criteria:

performance
scalability
flexibility
stability
libraries
documentation
community
dev experience

These are all very important and valid aspects. In fact, a lot of frameworks have already checked those boxes. A few shine more in certain areas than others, but there is wide range frameworks that are great in these regards. However, there is one central aspect, that is by far the most important one (in my humble opinion):

Getting things done.

Even more importantly:

Getting things done, fast. And make them last.

In that regard, no other frameworks comes close to UI5. Let me explain.

(1) The controls libraries vs. (2) the framework

I like to categorize UI5's capabilities and features in two main areas. One the one hand, there is the (1) control libraries. With more than 1000 controls available out-of-the-box, it is incredibly easy to build complex applications containing different layouts, tables, forms, charts, and more with little to no custom coding. Because of these controls, theming (SAP Fiori) and accessibility are also a breeze. Controls are well designed and simply enterprise ready. On the other hand, there is the (2) framework itself, with all its integrations, service connections, tooling, i18n features, and (closeness to the) core technology. See this quick list of built-in framework features (not exhaustive and in no particular order):

integration into Fiori Launchpad
service connections: OData(!), REST, you name it
i18n
p13n
routing
grow-as-you-go
custom controls
close to the core technologies: HTML, CSS, JavaScript

I will focus on this second area in this blog post and will now go into detail.

The framework

Grow-as-you-go

Unlike many other frontend frameworks, UI5 makes it very easy to get started. Essentially you only need two files: an index.html and one JavaScript file. An application like this doesn't even require a web server to work, because it is that simple (we will cover the aspect "closeness to core technologies" later). Of course, this kind of application doesn't make use of all the UI5 goodies available, nor does it follow its best practices, but it works - and that shows UI5's great design. Let's take a look at this simple example:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>UI5 Walkthrough</title>
        <script
            id="sap-ui-bootstrap"
            src="https://ui5.sap.com/resources/sap-ui-core.js"
            data-sap-ui-async="true"
            data-sap-ui-on-init="module:ui5/walkthrough/index"
            data-sap-ui-resource-roots='{ "ui5.walkthrough": "./" }'>
        </script>
    </head>
    <body class="sapUiBody" id="content">
    </body>
</html>

index.js

sap.ui.define([
    "sap/m/IllustratedMessage",
], (IllustratedMessage) => {
    "use strict"

    new IllustratedMessage({
        title: "Welcome to Flexso Tech Day 2024!",
        illustrationType: "sapIllus-SuccessHighFive"
    }).placeAt("content")
})

As you can see in the screen shot above, I simply opened the index.html file in my browser and the UI5 application was up and running. This is of course not how you would build "real" applications, but it does demonstrate how easy it is to get started. And I personally love starting with simple project setups like this and following a grow-as-you-go approach. It's just a nice feeling to actually know what each individual file is doing, instead of having 100 files and not knowing what half of them are for. And let's admit it, we've all been there.

Custom controls

One of the great things about UI5 is that you can build your own custom controls. This sounds trivial, but it's actually a big deal, since you can operate within the UI5 framework and get all of its great features for free (see list above), while still being able to build anything you (or your customers) ever dreamed of. There is zero lock-in and you get the expensive part (in terms of coding effort) for free, like communicating with the backend. Fantastic, isn't it? Possibilities are endless. This is also due to the fact that UI5 itself is very close to its core technologies, namely HTML, CSS, and JavaScript. It means you can build your custom controls the same way, with technology you already know. Technically speaking, custom controls extend the sap.ui.core.Control class (or any higher level class that itself extends the base class), which is how they become part of the framework and its lifecycle. Let's create a simple custom control to really show how flexible and powerful at the same time UI5 is.

I generated a little starter project using the easy-ui5 project generator, which support a monorepo approach. This way, we can keep our whole project (frontend, backend, and everything in between) in one well-managed (thanks to npm workspaces) project. I ran the following commands and selected all default options. For the custom controls I created one "BasicList" and one "BasicListItem":

yo easy-ui5 project project
cd com.myorg.myui5project/
yo easy-ui5 project cap
yo easy-ui5 project customcontrol
yo easy-ui5 project customcontrol

The generated project structure looks like this (some artifacts omitted for brevity):

- myui5app/
  - webapp/
    - control/
      - BasicList.js
      - BasicListItem.js
    - controller/
    - css/
    - i18n/
    - model/
    - test/
    - view/
    - Component.js
    - index.html
    - manifest.json
  - package.json
  - ui5.yaml
- server/
  - db/
    - data/
      - my.bookshop-Books.csv
    - schema.cds
  + srv/
  - package.json
  - xs-security.json
- mta.yaml
- package.json

The backend of the project is based on the SAP Cloud Application Programming Model and came with a tiny sample, the bookshop. I changed the data model to represent a session catalog (for the event this content was originally presented at) and added corresponding sample data. Since this blog post is about UI5, I will just show the new schema.cds, but not go into any more detail about building the backend:

namespace my.sessions;

using {cuid} from '@sap/cds/common';

entity Sessions : cuid {
    title    : String;
    abstract : String;
    speaker  : String;
}

Now for the frontend, we want to build a list of sessions that renders into simple HTML elements. Not just because it's simple, but because it shows that UI5 (and the underlying core technologies) is a blank canvas. If you can use UI5 to write HTML, CSS, and JavaScript, you can use it to write anything. See it as your entry door to building frontend applications in the enterprise context. I know I am repeating myself, but with UI5 you have this flexibility on top of the (1) control libraries and (2) the framework.

Let's start with the BasicList.js:

sap.ui.define([
    "sap/ui/core/Control"
], function(Control) {
    "use strict"

    return Control.extend("myui5app.control.BasicList", {
        metadata: {
            properties: {
                editable: { type: "boolean" }
            },
            aggregations: {
                items: { type: "sap.ui.core.Control" },
            },
            defaultAggregation: "items"
        },

        renderer(oRm, oControl) {
            oRm.write("<ul")
            oRm.writeControlData(oControl) // adds UI5 specific attributes to the HTML element
            oRm.write(">")
            oControl.getItems().forEach(item => {
                oRm.renderControl(item)
            })
            oRm.write("</ul>")
        },

    })
})

As already mentioned, this custom control extends the sap.ui.core.Control class. We define some metadata, like the control's properties and aggregations (a fancy word for "its children"). These properties and aggregations can be used when consuming the control, for example in an XML view. Probably the most interesting part in the code above is the renderer() method, where we essentially use the render manager (oRm - opinions about hungarian notation anyone? 😉) to write our HTML. We open an unordered list (<ul>), loop over all items (aggregations/children), call their respective renderer, and close the list. The great thing here is that we can combine UI5 internal methods (like getItems()) with (more or less) plain HTML - again, we have great flexibility on top of the framework.

Let's now continue with the BasicListItem.js:

sap.ui.define([
    "sap/ui/core/Control"
], function(Control) {
    "use strict"

    return Control.extend("myui5app.control.BasicListItem", {
        metadata: {
            properties: {
                title: { type: "string" },
                detail1: { type: "string" },
                detail2: { type: "string" }
            }
        },

        renderer(oRm, oControl) {
            oRm.write("<li")
            oRm.writeControlData(oControl)
            oRm.write(">")
            if (oControl.getParent().getEditable()) {
                oRm.write("<input")
                oRm.addStyle("width", "calc(100vw - 100px)")
                oRm.writeStyles()
                oRm.writeAttribute("value", oControl.getTitle())
                oRm.write("'></input>")
            } else {
                oRm.write(oControl.getTitle())
            }
            oRm.write("<ul>")
            oRm.write("<li>")
            oRm.writeEscaped(oControl.getDetail1())
            oRm.write("</li>")
            oRm.write("<li>")
            oRm.writeEscaped(oControl.getDetail2())
            oRm.write("</li>")
            oRm.write("</ul>")
            oRm.write("</li>")
        },

        onchange(e) {
            this.setProperty("title", e.target.value)
        }

    })
})

This implementation is arguably a little more complex, but only because we call the oControl.getParent().getEditable() method to check whether the outer list is editable or not. If it is editable, we render an input element, if not, we render an simple text. Regarding that, did you notice that we never actually defined a getEditable() method? UI5 created that for us automatically when we defined the property editable for the BasicList - nice! Another nice thing is that we can use the oRm.addStyle() method to essentially add CSS to our custom control. We now got all pieces of the puzzle: HTML, CSS, JavaScript.

Let's now use our custom controls in the MainView.view.xml:

<mvc:View
    controllerName="myui5app.controller.MainView"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m"
    xmlns:cc="myui5app.control">
    <VBox>
        <Title text="Flexso Tech Day 2024" />
        <Button text="Edit" press=".edit" />
    </VBox>
    <cc:BasicList id="sessions" items="{/Sessions}" editable="false">
        <cc:BasicListItem title="{title}" detail1="{abstract}" detail2="{speaker}"/>
    </cc:BasicList>
</mvc:View>

We make use of the data binding syntax to bind our default OData V4 model to our custom controls. This model was added to our application when we ran the cap subgenerator of the easy-ui5 project generator. We will get back to this in just a second. Notice how we import our custom controls by defining a new cc namespace pointing to the control/ directory within our application. Also notice how we combine our custom controls with standard UI5 controls like the Title and Button. Again, flexibility on top of the framework.

This is what the application now looks like:

To further undermine the tight integration of our custom controls with the rest of our UI5 application, let's add some logic to the MainView.controller.js to make the custom list editable:

sap.ui.define(["sap/ui/core/mvc/Controller"],
    function(Controller) {
        "use strict"

        return Controller.extend("myui5app.controller.MainView", {
            edit: function() {
                const basicList = this.byId("sessions")
                basicList.setEditable(!basicList.getEditable())
            }

        })
    })

The edit method was previously added to the press event of the Button in the MainView.view.xml. It simply toggles the editable property of the BasicList control. This is a very simple example, but it shows how easy it is to interact with your custom controls from somewhere else in your application.

Now comes my favorite part. If we press the "Edit" button and edit a title of a session, UI5 will actually submit the change to the backend. It will compose the correspoding OData batch request for us and the backend is automatically updated. This is what the OData V4 model as part of UI5 does for us, on top of custom controls! How great is that?! See the below screen shots for proof:

UI5 2.x

UI5 is currently still in major version 1, despite it being released in 2013. However, this doesn't mean that the framework is outdated. Over 130 minor versions have already been released. If anything, this shows the stability and maturity of the framework, as well as SAP's commitment to backwards compatibility, which is very important in the enterprise context.
The next major version, UI5 2.x, is already in the works and will bring a lot of new features and improvements. One of the most anticipated features (for me) is the native support for web components, which will allow you to use your own web components within the UI5 framework. This will bring even greater flexibility and compatibility to UI5, especially in the context of "custom controls".

To conclude, I don't know of any other frontend framework that offers such great flexibility on top of a being enterprise-ready out-of-the-box and having 1000+ built-in controls (which I barely touched here). This is what I mean when I say "Getting things done, fast. And make them last.".

I am looking forward to hearing your thoughts/input/experiences in the comments below. Happy coding!

Re: On what makes a great frontend framework and why UI5 is one

2024-11-13T08:56:22.081000+01:00

Hi @frankmeertens, thanks for the feedback. And I agree!

Re: Can we deploy sapui5 web components app onto S/4 HANA...

2024-11-13T16:38:23.525000+01:00

@ThaaraSoft have you had a chance to try it?

Creating a personal development environment #3 - Vim keybindings

2024-11-14T12:42:21.722000+01:00

#1 - Why Neovim?
#2 - Miscellaneous, status line, and color scheme
#3 - Vim keybindings (this blog post)

Building on top of the previous two blog posts, this blog post will focus learning Vim keybindings, which is very central for using any Vim-based editor, let alone be productive with it.

Before we get started with the keybindings though, let's do a quick recap of what my Neovim configuration, located at ~/.config/nvim/, looked like a this point:

- lua/
  - plugins/
    - filetree.lua
    - theme.lua
  - misc.lua
  - statusline.lua
- init.lua
- lazy-lock.json

What I did so far:

configured lazy.nvim as a plugin manager
added nvim-tree as a file explorer
customized the status line
added a nice color scheme
other miscellaneous settings

Now while doing all of this, we implicitly already talked about keybindings. After all, Neovim is a keyboard-first editor. You shouldn't really be using the mouse at all (although you can if you want to), which is why you have to use keybindings. However, we only really talked about custom keybindings - the ones that relate to a plugin and where you define the shortcut and the associated operation. But the most important keybindings are the ones that are built into Neovim itself, and since Neovim is a fork of Vim (did I already mention that? 🤔), we can simply refer to them as Vim keybindings (also when googling 😉). These are the ones you will use the most for moving around, switching modes, editing text, and so on. Vim keybindings can seem quite odd at first (from a modern perspective), but they are incredibly powerful and well though-out.

Regarding all my custom keybindings I mentioned that I like to group my keybindings by the category they fall into (in my understanding) and prefix them with the corresponding letter. For example, all keybinding related to the file system start with the letter f, like fe for opening the file explorer. Another example are all bindings related to the language server start with the letter l, like ld for "go to definition". This system helps me remembering them all. It somewhat different to what other people mostly do, which is prefixing all keybindings with a defined leader key, for example space.

Vim keybindings

I will not even try to list or explain the structure of all Vim keybindings in this blog post - others can do that better. I will also not extensively talk about modes, I only really use normal, insert, and visual mode. But I can give you an insight into the keybindings I use on a daily basis and how I personally make sense of them. Hopefully this helps you prioritize which keybindings to learn first and how to remember them. The keybindings listed here work in normal and visual mode, but not in insert mode, where your keystrokes will obviously be interpreted as text input.

For navigating in a file, I use the following keybindings:

G: Go to the end of the file
gg: Go to the beginning of the file
$: Go to the end of the line
0: Go to the beginning of the line
e: Move to the end of the current word
b: Move to the beginning of the current word

And I do have to confess I am one of the few Vim users who actually uses the arrow keys to move around (I know, I know), instead of h, j, k, and l. I have to reasons for that: First of all, I just couldn't get used to them. Second of all, I often find myself wanting to navigate around in insert mode, and the arrow keys are just more convenient in that situation than switching modes.

For editing text, I use the following keybindings:

i: Enter insert mode
a: Enter insert mode after the current cursor position (one character further right than with i)
A: Enter insert mode at the end of the line
u: Undo the last change
Ctrl-r: Redo the last change
dw: Delete the current word
dd: Delete the current line
D: Delete from the current cursor position to the end of the line

For selecting text and copy-pasta magic, I use the following keybindings:

v: Enter visual mode
V: Enter visual line mode (visually select whole line)
y: Yank (copy) the selected text (in visual mode)
d: Delete the selected text (in visual mode)
c: Change the selected text (in visual mode, delete and enter insert mode)
p: Paste the yanked text after the cursor

With this set of keybindings (that barely scratches the surface of what's possible) you can actually accomplish a lot of things, especially when combining them. For example, for navigating to the end of the file and going into insert mode at the end of the last line, you can simply use GA. There are probably more efficient ways to get certain things done, but this "minimalistic" set of keybindings works well for me and most importantly, I can remember them. This is just the start and there is a lot more to learn, but that takes time and practice. I will try and add more keybindings to my repertoire as I go along. It's a fun journey.

And that's it for this blog post. Let's talk about the language server and how you can tailor it to your liking next time - arguably the most important and coolest part of a modern development environment.

Re: SAP Tech Bytes: Use Destinations During Local Development - Cloud Foundry Basics #4

2024-11-26T10:54:45.361000+01:00

Hi @AdilBasha1SAP, these links work for me. Not sure why you can't access them. Maybe try another browser or a private window.

Re: On what makes a great frontend framework and why UI5 is one

2024-11-28T09:49:53.786000+01:00

Hi @akuller, unfortunately not. There is a nightly build available though for OpenUI5 2.0: https://sdk.openui5.org/nightly/2/resources/sap-ui-core.js

Re: SAP Tech Bytes: Use Destinations During Local Development - Cloud Foundry Basics #4

2024-11-28T09:56:29.198000+01:00

Hi @AdilBasha1SAP,

if you run your CAP server and UI5 (or Fiori elements) app in the same process, make sure to use the cds-plugin-ui5. This way, the UI5 Tooling will be hooked into your CAP server, so that the ui5.yaml configuration is being used as well.

The xs-app.json is the configuration file the approuter, it has nothing to do with the CAP server per se - it's a separate application. You can run the approuter locally as well. To have the full service connectivity (that you have on SAP BTP) you will need to add the respective environment variables to the approuter's default-env.json. I did a video about that: https://www.youtube.com/watch?v=Jbq6zaKEUyY

Hope this helps.

Best, Nico

Re: SAP Tech Bytes: Using the SAP Approuter at dev time - a full-stack journey with UI5 and SAP CAP

2025-01-06T13:43:04.120000+01:00

Hi @ahmetdik,

maybe this helps: https://community.sap.com/t5/technology-blogs-by-sap/sap-tech-bytes-using-the-sap-approuter-at-dev-time-a-full-stack-journey/bc-p/13577420/highlight/true#M167050

Best, Nico

Re: SAP Tech Bytes: Using the SAP Approuter at dev time - a full-stack journey with UI5 and SAP CAP

2025-01-06T15:14:05.016000+01:00

Hi @ahmetdik, which CAP version are you using?

Re: SAP Tech Bytes: Using the SAP Approuter at dev time - a full-stack journey with UI5 and SAP CAP

2025-01-07T16:39:41.834000+01:00

Hi @ahmetdik,

Did you do a proper cds bind in the CAP server root before running the dev-approuter?

SAP Developer Challenge - SAP Community Escape House - UI5

2025-01-13T00:00:00.016000+01:00

The new year starts with a brand new SAP Developer Challenge! The Developer Advocates have created the SAP Community Escape House - a virtual escape house (consisting of multiple rooms) that you can play in your browser. Read on for all the details.

SAP Developer Challenges are all about having fun, trying new things, and learning along the way. You can also earn a badge in the SAP Community upon successful completion. For this year, all SAP Developer Challenges will happen in the SAP Community Escape House. For each challenge we will unlock a new room in the house, and they all have a specific focus topic. Completing a challenge means successfully escaping the room by solving a series of coding-related tasks. The first room we unlocked for January (see schedule below) is about UI5, more specifically about how to scaffold a UI5 application using the command line.

How to participate

Visit the SAP Community Escape House and enter your numeric SAP Community user ID. If you don't know your user ID, go to your SAP Community profile. You can find the numeric ID at the end of the URL.

Once you see the SAP Community Escape House, select the UI5 room and start exploring it.

The user interface of an escape room includes the room itself as well as a terminal. You can click the objects in the room to receive tips. Like in a real (physical) escape room, you will have to try out a few things and explore the room until you receive helpful tips and eventually instructions. These tips and instructions are printed in the terminal next to the room. The terminal is also used to submit solutions to tasks. Read the instructions you receive carefully to understand how.

If you successfully escape the room (you will know when that happens), you will receive a badge in the SAP Community. We will assign the badges once the challenge closes.

The schedule

The UI5 room was unlocked on January 13th and will stay unlocked until the end of the year. However, the challenge closes on January 31st, so you will have to escape the room until then to qualify for a badge. Unlike the previous year, this SAP Developer Challenge does not consist of weekly sub-challenges. The next room (next challenge) will be unlocked in February.

Good luck and happy escaping!

Re: SAP Developer Challenge - SAP Community Escape House - UI5

2025-01-13T11:03:39.549000+01:00

@Marian_Zeis, I'm glad you like it 🙂 You know I love my terminal and half-force everyone to try it too 😉

Re: SAP Developer Challenge - SAP Community Escape House - UI5

2025-01-13T11:04:40.172000+01:00

@Henning, thanks for that - it can be confusing with the two distinct profile sections...

Re: SAP Tech Bytes: Using the SAP Approuter at dev time - a full-stack journey with UI5 and SAP CAP

2025-01-27T15:03:23.996000+01:00

Hi @ahmetdik,

hm, I can't seem to wrap my head around this atm. But sounds like you have the CAP server all set up with XSUAA and HANA Cloud, that together with the cds-plugin-ui5 might even be the better alternative (unless you want to test your untranspiled TS UI5 app with real auth at dev time).

I will try to find the time to dig deeper into why the CDS_ENV doesn't seem to take effect when launching the CAP server through the dev-approuter.

Best, Nico

Re: SAP Tech Bytes: UI Theme Designer - Applying Custom Theme to UI5 Application

2025-01-29T15:32:47.156000+01:00

Hi @aditi01 , does your exported directory contain the SAP-icons font face somewhere?

Re: February's Developer Challenge in SAP Community - Integration 🧩

2025-02-04T09:56:07.480000+01:00

@Jwan_ , yours is 175626.

Re: February's Developer Challenge in SAP Community - Integration 🧩

2025-02-19T10:02:03.147000+01:00

Hi @SRudra , have you to tried clicking on the integration suite logo on the fridge?

Re: SAP Developer Challenge March - SAP Community Escape House - AI 🤖🧠

2025-03-17T09:02:39.336000+01:00

Hi @Markus_Hapke,

Can you please try runing a manual npm install in the "/Users/<user>/.npm/_generator-easy-ui5/plugin-generators/generator-ui5-project/" directory and then run the original command again?

Hope this helps.

Best, Nico

Re: SAP Tech Bytes: Using the SAP Approuter at dev time - a full-stack journey with UI5 and SAP CAP

2025-04-23T13:52:23.095000+02:00

Hi @ahmetdik,

probably too late now, but after some more digging I found a way to force CAP to use XSUAA when started in hybrid mode through the dev-approuter: https://github.com/SAP-samples/sap-tech-bytes/blob/cloud-foundry-basics/post6/packages/cap-server/srv/server.js

It's not pretty by any means, but it works. And since it's a dev time thing, I guess that's ok.

Please refer to this repo for the comprehensive sample.

Best, Nico