SAP Community - Nicolai Schoenteich

Re: Make Cursor appear on an editable field in Object Page Table

2023-10-10T12:55:16+02:00

Hi there,

I believe you need a way of accessing the specific input field - maybe open the console and see if there is something unique about that field, or maybe it's always(?) the n-th child of the row or something like that. Once you have the input field reference you can fire a press event on that input field ( .firePress() ), which puts the cursor into the field.

Best, Nico

Re: MTA Standalone Approuter with UI5 Tooling, live reload?

2023-10-10T13:03:47+02:00

Hi all,

I know this is question is already a few months old, but a new solution to your problem was released recently: the dev-approuter. It hooks the UI5 Tooling (and an SAP CAP project if you want) into the SAP Approuter at dev time. I believe this is exactly what you were trying to achieve. The xs-dev.json file also clearly seperates dev time and productive configuration - so there is no need to edit a file before building the project.

Best, Nico

Re: Make Cursor appear on an editable field in Object Page Table

2023-10-10T14:50:18+02:00

How about looping through all children of the table row and finding the first one that is of type sap.ui.comp.smartfield.SmartField ?

Re: Make Cursor appear on an editable field in Object Page Table

2023-10-10T17:26:13+02:00

If you call getMetadata() on any control you should get the control type.

Re: Make Cursor appear on an editable field in Object Page Table

2023-10-13T12:19:43+02:00

Do something like this for the cell inside a table row:

for (let i = 0; i < cells.length; i++) {
  const cell = cells[i];
  if (cell.getMetadata().getName() === "sap.ui.comp.smartfield.SmartField") {
    cell.firePress();
  }

SAP Tech Bytes: Using the SAP Approuter at dev time - a full-stack journey with UI5 and SAP CAP - Cloud Foundry Basics #6

2023-10-13T16:56:10+02:00

This SAP Tech Byte is about how to develop a full-stack application using the SAP Approuter, UI5, and the SAP Cloud Application Programming Model (CAP). In part 1 we will focus on how to setup our project so that both the UI5 Tooling and the CAP server can be started with a single command and run on the same port. For this we will use the cds-plugin-ui5, which frees us from complex proxy or destination configuration we had in the past. In part 2 we will add productive authentication and run our application with a hybrid setup using the SAP Authorization and Trust Management Service (XSUAA) on SAP BTP, Cloud Foundry environment. For this we will use the dev-approuter, which is a dev time wrapper for the SAP Approuter. It allows us to use all of the SAP Approuter capabilities (OAuth 2.0 login flow with XSUAA etc.) while still running the UI5 Tooling and CAP server in the same process.

The source code for this blog post can be found at https://github.com/SAP-samples/sap-tech-bytes/tree/cloud-foundry-basics/post6.

This blog post is also available in video format - presented as part of Devtoberfest 2023:

NPM Workspaces

We start this project by setting up NPM workspaces, which make it easy to manage and run multiple Node.js applications inside one bigger project. Also, NPM workspaces install node modules very efficiently, so that multiple applications share the same resources. To set up NPM workspaces, all we need is this simple package.json file:

{

    "name": "devtoberfest-dev-approuter",

    "workspaces": [

        "packages/*"

    ],

    "scripts": {

        "dev": "npm run dev -w=approuter"

    },

    "sapux": [

      "packages/uimodule"

    ]

}

The line most relevant for now is the one defining the packages/ directory as the home for all our workspaces (think Node.js applications). The rest of the file contains configuration for things that not yet exist in our project, but which we will add shortly.

SAP CAP Application

Let's create and navigate into the packages/ directory:

mkdir packages

cd packages/

We can now create a SAP CAP Application in the form of the well-known bookshop sample. Such an application can easily be generated by running the following commands in the Terminal of your choice:

cds init cap-server

cd cap-server/

cds add sample

Note: "cap-server" is the name of our application and is therefore exchangeable.

And that's it for the SAP CAP part. Our server is ready.

UI5 Application

Let's now create a new UI5 application from scratch. Using the SAP Fiori Tools Application Generator we can easily choose one of the available floorplans, select our SAP CAP project as the data source, and then enable the use of the cds-plugin-ui5:

Wait a minute, why do we need the cds-plugin-ui5 in the first place?

SAP CAP applications by default come with an app/ directory, which is the place for frontend applications. Any contents (such as html files) inside this directory get statically served by the SAP CAP server. One could be tempted so simply put UI5 apps in there and serve them through the SAP CAP server (and to be honest this works fairly well), but this approach completely misses out on all of the capabilities that the UI5 Tooling has to offer. Think about a UI5 application developed with TypeScript for example. TypeScript cannot run in the browser as it first needs to be transpiled to JavaScript. We need the UI5 Tooling in this case. Additionally, there should be a clear separation of concern and both components - the SAP CAP backend and UI5 frontend - should be developed and served using their respective tooling. The cds-plugin-ui5 is very helpful in that regard as it hooks the UI5 Tooling into the SAP CAP server, which means we can use both toolings using a single command.

Back to our project. Enabling the cds-plugin-ui5 and NPM workspaces in the SAP Fiori Tools Application Generator (see red box above) adds both configurations to the SAP CAP's package.json. However, we already have configured NPM workspaces one level higher in the parent directory, so we can delete this newly added configuration from the SAP CAP's package.json. It is important to leave the cds-plugin-ui5 dependency though, so that upon start of the SAP CAP server the cds-plugin-ui5 can hook all connected UI5 apps into the server.

But how does this "connection" between the SAP CAP server and the UI5 apps work? There are two options here. The first one being to simply place the UI5 apps inside the app/ directory of the SAP CAP project, which is the default place for frontend applications. The second option is to add the UI5 apps as devDependencies to the SAP CAP's package.json and provide the path to them (when using NPM workspaces, a wildcard * is enough - NPM will handle the module resolution properly). We will go with the second approach here add the "uimodule" as a devDependency. All of the mentioned changes leave us with the following package.json for the SAP CAP project:

{

    "name": "cap-server",

    "version": "1.0.0",

    "description": "A simple CAP project.",

    "repository": "<Add your repository here>",

    "license": "UNLICENSED",

    "private": true,

    "dependencies": {

        "@sap/cds": "^7",

        "express": "^4"

    },

    "devDependencies": {

        "@cap-js/sqlite": "^1",

        "cds-plugin-ui5": "^0.2.1",

        "uimodule": "*"

    },

    "scripts": {

        "start": "cds-serve"

    }

}

In spirit of the side-by-side approach (as far as tooling is concerned) mentioned earlier, we will now move our newly created uimodule out of the SAP CAP server and place it next to it. After that, we can completely remove the app/ directory, which we no longer need, so we end up with the following project structure (dot files and generated files omitted for brevity):

- packages/

  - cap-server/

    - db/

    - srv/

    - package.json

  + uimodule/

- package.json

So far so good. We can now install all dependencies from the project root (not the SAP CAP root) - thanks to the NPM workspaces:

npm install

Interesting side note: For the uimodule "installing" means creating a symbolic link inside the node_modules/ to the actual uimodule.

We should now be able to start both the SAP CAP server and the UI5 Tooling simultaneously. All we have to do is start the SAP CAP server, the cds-plugin-ui5 will do the rest for us. Run the following command from the SAP CAP root (/packages/cap-server/😞

npm start

In the logs of the terminal we can see that the UI5 app was mounted to the SAP CAP server:

We can also see the UI5 app being served with the SAP CAP server. It even gives us a small hint that this web app is being served using the UI5 Tooling:

Our UI5 app is fully functional and display the data it retrieves from the SAP CAP server. And the best part is, we didn't have to configure any destination or proxies, as both the backend and frontend run on the same port:

Authentication

Our current dev setup is pretty nice and powerful already, but there is one aspect we haven't touched so far - and that is authentication. Our SAP CAP server currently uses basic (mocked) authentication, which should be sufficient for the largest portion of your development efforts. But what if we want to test our app with "real" productive authentication using the SAP Authorization and Trust Management Service on SAP BTP (XSUAA)? As far as SAP CAP is concerned, this is not a problem at all. In the SAP CAP project directory, we can simply run the following command to add the XSUAA feature to the app:

cds add xsuaa && npm install

We can then create an instance of the XSUAA service (in case we don't have on yet), create the respective service key and bind it to our local SAP CAP project:

cf create-service xsuaa application my-xsuaa -c xs-security.json

cf create-service-key my-xsuaa my-sk

cds bind --to my-xsuaa:my-sk

Note: This approach uses the cf CLI. Of course, you could achieve the same thing using the SAP BTP Cockpit in the browser.

Ok, so far so good, but if we were to run our full-stack application now, we would always get a "401 - Unauthorized" error since we haven't logged in (see screen shot below). Without logging into the XSUAA instance (running on SAP BTP) we don't have a valid JSON Web Token (JWT) and SAP CAP rightfully rejects our requests. Maybe this already rings a bell with you (the title of this blog post certainly gives a hint) - we need an SAP Approuter to handle the login flow.

Approuter

An SAP Approuter is a simple Node.js based application that is using the @sap/approuter package. It is used to forward user requests to several data sources (usually via destinations), handle user logins and sessions, and also serve static content, such as frontend applications. This sounds almost exactly like what we need, but only almost. Our UI5 application, which is developed in TypeScript, doesn't really qualify as "static content" as it needs to be transpiled (using the UI5 Tooling) before we can run it in the browser and the SAP Approuter can serve it. This means we want to connect an SAP Approuter to the UI5 Tooling, and also to the SAP CAP server while we are at it. There is a new dev-time wrapper for the SAP Approuter that fullfils exactly this purpose: the dev-approuter. Let's use it.

As we are using NPM workspaces, we can simply create a new directory for our new (dev-)approuter in the packages/ directory:

mkdir approuter

We can then add this package.json to the approuter/ directory:

{

    "name": "approuter",

    "scripts": {

        "dev": "CDS_ENV=hybrid node -e 'new require(`dev-approuter`)' _"

    },

    "devDependencies": {

        "dev-approuter": "*",

        "cap-server": "*",

        "uimodule": "*"

    }

}

Note that the "dev" script starts the dev-approuter with the CDS_ENV environment variable set to hybrid, which makes sure the SAP CAP server gets started in hybrid mode using the XSUAA instance on SAP BTP. Speaking of the SAP CAP server ("cap-server") - it is added to the application as a devDepdendency, just like our UI5 application ("uimodule"). This is very similar to the way we configured the cds-plugin-ui5 - remember? This is because the dev-approuter reuses the cds-plugin-ui5 under the hood.

The SAP Approuter's routing configuration is usually described in xs-app.json file. For the dev-approuter however, we can create an xs-dev.json file, which is to safely separate dev time configuration from productive code. The xs-dev.json can be seen as a superset of the xs-app.json - it follows the same syntax and has the same features, but there is one extra goodie: you can directly link dependencies (defined in the package.json) to routes. See this xs-dev.json file, which we now add to the approuter/ directory:

{

    "welcomeFile": "uimodule/index.html",

    "authenticationMethod": "route",

    "routes": [

        {

            "source": "^/user-api(.*)",

            "target": "$1",

            "service": "sap-approuter-userapi"

        },

        {

            "dependency": "uimodule",

            "authenticationType": "xsuaa"

        },

        {

            "dependency": "cap-server",

            "authenticationType": "xsuaa"

        }

    ]

}

The bottom to route (reflecting our dependencies) are protected with XSUAA, which means we will have to provide the dev-approuter with credentials to connect to the XSUAA instance on SAP BTP. We can get the service key which we created earlier with the following command:

cf service-key my-xsuaa my-sk

Copy the service key from the terminal output and provide it to the dev-approuter via a default-env.json file in the approuter/ directory:

{

    "PORT": 5001,

    "destinations": [

        {

            "Name": "cap-server",

            "Authentication": "NoAuthentication",

            "ProxyType": "Internet",

            "Type": "HTTP",

            "URL": "http://localhost:4004",

            "forwardAuthToken": true

        }

    ],

    "VCAP_SERVICES": {

        "xsuaa": [

            {

                "tags": [

                    "xsuaa"

                ],

                "credentials": { SERVICE KEY FROM TERMINAL OUTPUT }

            }

        ]

    }

}

As you can see, the default-env.json in our case not only includes the service key credentials, but also a destination to our SAP CAP server. This is necessary, because we require the additional parameter forwardAuthToken to be true, and the destination injected by the dev-approuter by default does not include this parameter.

We are now ready to start the dev-approuter using the following command from the project root (the NPM workspaces root):

npm run dev

Et voilà, we can now login and access our UI5 application through the dev-approuter, which displays the data from the SAP CAP server:

We can verify that we are logged in with our SAP BTP user by accessing the /user-api route (also defined in xs-dev.json😞

By the way, the livereload for the UI5 application (via the UI5 Tooling) also works using the dev-approuter.

And that's it, we now have an SAP Approuter using the dev-approuter package to hook the UI5 Tooling as well as the SAP CAP server into it. All of this is running in hybrid mode connected to our XSUAA instance on SAP BTP - talk about a powerful full-stack dev setup!

Feel free to reach out in case you have any questions!

SAP Tech Bytes is an initiative to bring you bite-sized information on all manner of topics, in video and written format. Enjoy!

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

2023-10-16T09:43:07+02:00

Hi Sagar,

fantastic questions! Let's dive into them:

1) You are almost right. From the cap-server root we could run:

cds bind --exec -- npm run dev --prefix ../approuter

The cds bind command only works in the cap directory, so we cannot initiate it from the NPM workspaces root directly. Of course, we could set up a script in the cap-server root and call that script from the NPM workspaces root.

2) You can consume destination from SAP BTP during local development, yes. Maybe this blog post can help you with that.

3) What exactly do you mean by "differentiating between local and deployed services"? Do you mean deployed services vs. local UI5 or SAP CAP applications?

Best, Nico

Re: Kasimir is back!

2023-11-02T08:21:33.841000+01:00

Who came here by executing the code from this image? 👨🏻‍💻🙋🏻‍♂️

Does the @Core.AutoExpand annotation in SAP CAP actually do something?

2023-11-08T14:36:14+01:00

Hi everyone!

I have this very basic schema definition:

entity Apps : managed, cuid {
    views : Composition of many Views
                on views.app = $self @Core.AutoExpand;
};

entity Views : managed, cuid {
    app      : Association to one Apps;
};

I want to auto expand the "views" whenever I call "/Apps", meaning "/Apps" should always be treated like "/Apps?$expand=views". I found this "@Core.AutoExpand" annotation, which seems to do exactly that:

Unfortunately, it doesn't seem to work. The auto expand doesn't happen. Does this annotation actually do something? Or am I as a developer responsible to implement the feature, and the annotation is just a standardized label for this feature? But, this isn't how annotation usually work, right?

I appreciate your help!

Best, Nico

Re: Does the @Core.AutoExpand annotation in SAP CAP actually do something?

2023-11-08T17:24:43+01:00

Thank you for the answer. For some reason my research didn't lead me to those existing issues...

The link you shared is internal, which works for me, but does not for everyone. For everyone else: You didn't miss much, the feature is simply not (yet) implemented.

Re: Extending legacy Fiori apps in BAS

2023-11-13T09:06:28+01:00

Thanks for clarifying Oliver! But, shouldn't the tile in the SAP Business Application Studio called "Adaptation or Extension Project" then - as it acts as an entry door to either one?

Re: Error using yo easy-ui5 project generator

2023-11-13T09:08:50+01:00

Hi mondalta, the easy-ui5 generator has been updated in the mean time and works with Node 18. Make sure to get the latest version of the generator with

yo easy-ui5 project --forceUpdate

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

2023-11-13T09:23:13+01:00

Hi Arun,

Do the applications 1 & 2 use the UI5 Tooling, a.k.a. do they have a ui5.yaml and package.json file? If yes, you can add them as devDependencies to the dev-approuter and also declare them individually in the xs-dev.json. You can do the same thing with the launchpad itself. Add the UI5 Tooling and add it to the dev-approuter.

Only adding their parent directoy (uimodule/) to the dev-approuter unfortunately won't be sufficient, as the dev-approuter expects the UI5 apps itself as devDependecy.

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 - Cloud Foundry Basics #6

2023-11-14T12:37:53+01:00

Hi Jürgen,

Interesting thoughts, thanks for sharing.

In your scenario (where you are using the approuter, plus a CAP app using cds-plugin-ui5 in a separate process), how are you pointing the approuter to your UI5 app? Via the localDir property in the xs-app.json? And if yes, does it simply point to the TypeScript source files? If I do that, I get the error that the Component.js couldn't be found (rightfully so, we only have a Component.ts).

I'm curious how you got this to work!

Best, Nico

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

2023-11-15T08:52:12+01:00

Interesting!

You are right, this is not really how it is intended as in a deployed scenario you wouldn't serve your frontend apps through your CAP service (srv-api). You would most likely use the HTML5 Apps Repository Service and point the approuter directly to it - or place the html5 in a localDir inside the approuter.

But still, a nice little trick you found there!

Best, Nico

Re: CAP HDI deployment error: cannot find module core-util-is

2023-12-13T15:39:37+01:00

I believe this issue is back with @sap/hdi-deploy version 4.9.0. Can someone please also test this before we report?

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

2024-01-04T16:36:44+01:00

Hi jacek.wozniczak

You can point to your annotations file from a cds file within your CAP project, which the provided sample didn't do. Thanks for the pointer!
I have fixed it: https://github.com/SAP-samples/sap-tech-bytes/commit/442b4fad35b1f7b03552143aec1d790ff1649b4e

Best, Nico

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

2024-02-09T13:31:15.949000+01:00

Hi @KazuhikoTakata,

Thank you for your question!

Unfortunately the dev-approuter doesn't support CAP TS projects as of now. But you can use the cds-plugin-ui5 to hook your UI5 Tooling into your CAP server (running via cds-ts watch) for a very similar experience.

Hope this helps! Best, Nico

Re: February Developer Challenge - CAP Plugins: Week 1

2024-02-09T14:39:37.563000+01:00

🇳🇱 SAP CodeJam UI5 & SAP Fiori elements flexible programming model (Utrecht, Netherlands)

2024-02-21T12:24:37.721000+01:00

This SAP CodeJam event is about UI5, more specifically about the SAP Fiori elements flexible programming model (FPM). After a quick introduction to UI5, we will dive into the SAP Fiori elements and learn how to build a web application that allows users to browse and order books. Using the FPM, we will customise this SAP Fiori elements application. With this hands-on experience you will be able to start developing your own applications after this CodeJam. This CodeJam is not about freestyle UI5 development, but rather focuses on SAP Fiori elements flexible programming model.

The content for the event can be accessed here: https://github.com/SAP-samples/ui5-exercises-codejam?tab=readme-ov-file#part-2---sap-fiori-elements-flexible-programming-model (we will only work on part 2 of this repository, which will be heavily extended by the time of the CodeJam)

This is an in-person event only (not virtual) and is planned for Friday 19 April 2024 at the INNOV8iON offices in Utrecht, Netherlands from 13:00 - 19:00 local time. The language of the event and the content will be English.

The instructor will be Developer Advocate Nico Schoenteich.

There are essential prerequisites that must be completed by every attendee, before arriving at the event location. They are documented here: https://github.com/SAP-samples/ui5-exercises-codejam/blob/main/chapters/1.00-prep-dev-environment/re....

Please note that spaces are limited - we can only accommodate 30 attendees. Register here in the Community Event using the RSVP functionality.

For more information on SAP CodeJam events, to ask questions, and to chat with your fellow attendees, head over to the SAP CodeJam group.