CAPM Basics - Part 4

[archisman92]

Hello Colleagues,

In this blog, we will be learning on how to create a complete hybrid application accommodating all the features which we implemented in our previous 3 blogs.

To get started, we will create a binding to the DB and Auth instances deployed on cloud. Run the below commands:

• cds bind -2 simple_proj-auth
• cds bind -2 simple_proj-db

This will create a section in your .cdsrc-private.json file which will implement the xsuaa authentication and hana db instance from cloud while running your application on-premise (hence, the name hybrid approach).

In our previous blog, we had created and updated entries in our hana-db using postman. Now we will be creating the UI layer for our application and implementing app-router feature which will handle the exchanging of token based on roles of the user who is logged in.

First, update the services.cds file with the below code snippet and build and deploy your application once more. Follow the commands discussed in the previous blogs. The added annotations will allow user to create, update and delete records from the DB.

using training as db from '../db/data-model';


@path: 'MyService'
service CatalogService {
    @(restrict: [
        {
            grant: 'READ',
            to   : 'Viewer'
        },
        {to: 'Admin'}
    ])
    entity trainers @(Capabilities: {
        InsertRestrictions: {
            $Type: 'Capabilities.InsertRestrictionsType',
            Insertable
        },
        UpdateRestrictions: {
            $Type: 'Capabilities.UpdateRestrictionsType',
            Updatable
        },
        DeleteRestrictions: {
            $Type: 'Capabilities.DeleteRestrictionsType',
            Deletable
        },
    }) as projection on db.trainer;

    annotate trainers with @odata.draft.enabled;

Once the application is successfully re-deployed, right click on your mta.yaml file and choose to Create MTA Module from Template as shown below.

Select SAP Fiori Generator and click Start.

Choose List Report Page and click on Next.

Select the following options for Data Source and Service Selection and click Next.

Select the following in Entity Selection page and click Next.

Update the Module Name and App Title in Project Attributes page and click Next.

Keep the default options in Deployment Configuration and click Finish.

Notice that all the necessary artifacts related to our web application has been generated in our app folder.

Now since we have implemented XSUAA, we need some mechanism to handle the authorization requests on our behalf. This is where app-router comes into the picture which we will implement in the following steps.

• Add App Router to the app folder of your project --> cds add approuter
• Install npm packages for App Router --> npm install --prefix app/router

Notice that a new section is created in your app folder. This will take care of fetching and forwarding the auth token.

Its time to run our application now.

Run the following commands:

• cf login
• cds watch --profile hybrid
• The above command will start the application. In another terminal, run cds bind --exec -- npm start --prefix app/router

When you launch the application on port 5000, you get the following error:

From the above URL (the page which results in the above error) copy the redirect_uri section and paste it in the redirect_uris section of xs-security.json file.

Update XSUAA service --> cf update-service simple_proj-auth -c xs-security.json

Relaunch your application. Now you will see default home page being launched successfully. Click on webapp. Your List Report will populate with the data from your HANA DB from cloud.

As per your roles defined, you can created/update/delete records from the DB using the UI. So without writing a single line of UI code, just by defining our services we are able to have a fully fledged CRUD application. This is the beauty of CAP 🙂

Hope you enjoyed reading and following this CAPM Basics series. As always, feel free to leave a comment if you are stuck with anything.

More to follow, so stay tuned!