What is CDS Graphical Modeler?

The CDS Graphical Modeler allows developers to visually design entities, relationships, and services without manually writing .cds files. This visual approach enhances clarity, reduces errors, and improves collaboration between technical and business teams.

Step-by-Step: Creating Your First CAP Project with CDS Graphical Modeler

Lets create a dev space and then dive into the CAPM with cds:

Go to BTP COCKPIT Login

1. Start by logging into the SAP Business Application Studio via the BTP Cockpit. You’ll see a list of existing dev spaces.

• If a suitable dev space already exists, you can use it.
  
• Otherwise, click Create Dev Space.

• After you click on create devspace below screen will appear:

2. Create a Dev Space

• Enter a name for your dev space.
  
• Select the Full Stack Cloud Application category.
  
• Click Create Dev Space.

Wait until the status changes to RUNNING, then click the dev space name to enter.

• Now, Wait until the newly created dev space is in “RUNNING” status:

• Now we can enter the dev space by clicking the dev space name:

First Create a CAP Project:

• Now let’s create a sample CAP project using the project wizard. Click “Start from template” from the welcome page and launch the project wizard.

• Please select “CAP Project” from the template in the project wizard:
  
• Click “Start” button and enter the CAP project details in the next page of the project wizard. Please check “Basic Sample Files” and ensure the project wizard to generate sample CDS files for you.

• Enter the project name, then select the desired runtime—either Node.js or Cloud Foundry. Once you’ve made your selections, click the “Finish” button to close the wizard. The development space will refresh, and you’ll see your newly created CAP project folder appear in the project tree.

You can also create the CAPM project from the terminal by using the command:CDS INIT PROJECTNAME

Let me give you a glimpse of the 3 main files showing here:
APP/:
This directory includes the UI layer of your application. Typically, it contains SAP Fiori elements or SAPUI5 applications. You may encounter subdirectories such as Fiori, webapp, or particular app names. These applications utilize the OData services provided by the srv/ layer.
DB/:
This represents the data model layer. It includes your CDS definitions (.cds files) that specify: Entities Types Associations Annotations Additionally, you might encounter a data/ folder containing CSV files utilized for loading initial data. This layer is tasked with establishing the persistence model and is deployed to a database such as SAP HANA Cloud.
SRV/ :
This represents the service layer. It includes .cds files that define services (for example, CatalogService.cds) which make entities from the db/ layer accessible. Additionally, you can incorporate JavaScript or TypeScript handlers (.js or .ts files) to execute custom logic. This layer functions as the API layer, providing OData or REST services.

Create a new file as schema.cds in the DATA folder.

• Now right click on the schema .cds and open with CDS Graphical modeler.
  
• You can use the CTRL +SHIFT +P shourcut as well to open the command pallet,
  then search for CDS GRAPHICAL MODELER

• Previously we have written some code and then we created an entity and their attributes. The same thing we can do with out writing a single line of code and manage their attributes and association and composition as well.
  we can:
  
  • Create entities visually.
    
  • Define attributes, associations, and compositions.
    
  • Automatically generate the corresponding CDS code

• There is only one entity books there and then i have created two more entities with the help of cds graphical modeler.

• We can also created multiple number of Entities without writing code and it automatically create the code for the entities we have created through Cds graphical modeler.

• After successfully created the we can test it locally and also deploy it in the hana cloud as well.

To test it locally you can run the command CDS WATCH in the terminal

• OPEN IN A NEW TAB

• Now we can also deploy this application in the Hana cloud as well .

Conclusion: The CDS Graphical Modeler marks a major leap forward in streamlining CDS development. By bridging the gap between technical design and business insight, it empowers teams to accelerate development and collaborate more effectively.

The post Streamlining CAP Development with CDS Graphical Modeler in SAP Business Application Studio appeared first on ERP Q&A.

In this post, I will explain how to connect multiple databases and OData services to SAP BTP using BAS . This guide covers configuring UI5 applications to consume multiple OData services from both SAP S/4HANA (on-premise) and SAP BTP ABAP environment, ensuring seamless data integration.

Context

I aim to integrate three different OData services from different database sources :

1. On-Premise S/4HANA OData V2 Services
   • ZPR_EMP_DETAILS_SRV : Fetches employee details.
   • ZFI_TEST_ODATA_SRV : Fetches financial data.
2. SAP BTP ABAP Environment OData V4 Service
   • ZUI_TAB_TRAVDAT_O4_AKS_001: Fetches travel-related data using the RAP Model.

Steps to Connect Multiple OData Services

Step 1: Add Data Sources in UI5 Application

1. Create a UI5 application in VS Code.
2. While creating the application, provide the service URL to configure an OData service automatically.
3. Navigate to webapp/manifest.json.
4. Modify the dataSources section to include multiple OData services as follows:

"dataSources": {
  "mainService": {
    "uri": "/sap/opu/odata/sap/ZPR_EMP_DETAILS_SRV/",
    "type": "OData",
    "settings": {
      "odataVersion": "2.0"
    }
  },
  "subService": {
    "uri": "/sap/opu/odata/sap/ZFI_TEST_ODATA_SRV/",
    "type": "OData",
    "settings": {
      "odataVersion": "2.0"
    }
  },
  "rapService": {
    "uri": "/sap/opu/odata4/sap/zui_tab_travdat_o4_aks_001/",
    "type": "OData",
    "settings": {
      "odataVersion": "4.0"
    }
  }
}

Step 2: Configure Models in manifest.json

Each model corresponds to an OData service:

"models": {
  "": {
    "dataSource": "mainService",
    "preload": true,
    "settings": {}
  },
  "subModel": {
    "dataSource": "subService",
    "preload": true,
    "settings": {}
  },
  "rapModel": {
    "dataSource": "rapService",
    "preload": true,
    "settings": {
      "operationMode": "Server",
      "autoExpandSelect": true,
      "earlyRequests": true
    }
  }
}

Step 3: Configure ui5.yaml for Backend Connections

In ui5.yaml, configure the destinations for OData services:

server:
  customMiddleware:
    - name: ui5-middleware-simpleproxy
      afterMiddleware: compression
      configuration:
      ui5:
          path:
            - /resources
            - /test-resources
          url: https://ui5.sap.com
        backend:
# On-premise SAP System Destination 1 - Replace with your URL
        - scp: true
        path: /sap/opu/odata/sap/ZPR_EMP_DETAILS_SRV/
        url: https://your-onpremise-system-hostname:port/
        destination: SAHANA_CONN
        client: 'your client ID'
        authenticationType: BasicAuthentication

  # On-premise SAP System Destination 2 - Replace with your URL  
        - scp: true
        path: /sap/opu/odata/sap/ZFI_TEST_ODATA_SRV
        url: https://your-onpremise-system-hostname:port/
        destination: SAHANA_CONN
        client: 'your client ID'
        authenticationType: BasicAuthentication

  # SAP BTP ABAP Environment Destination - Replace with your instance URL
        - scp: true
        path: /sap/opu/odata/sap/zui_tab_travdat_o4_aks_001/
        url: https://your-abap-instance-guid.abap.region.hana.ondemand.com
        destination: abap-cloud-default_abap-trial-9a87acc7trial-dev
        client: 'your client ID'
        authenticationType: OAuth2UserTokenExchange

Destination:

S4HANA_CONN is used for two OData V2 services hosted in the on-premise S/4HANA system as shown in below screenshot.

abap-cloud-default_abap-trial-9a87ace7trial-dev is for the RAP-based OData V4 service hosted on SAP BTP as shown in below screenshot.

Authentication Types:

• On-premise S/4HANA services use BasicAuthentication, which is simpler but less secure for cloud-based scenarios.
  
• The SAP BTP service uses OAuth2UserTokenExchange, enabling secure token-based communication.

All the Connected OData will be Listed in Service Manager as shown in below screenshot.

Important Note on OData Connection Methods:

Avoid connecting directly to OData services via the Service Manager, as it can lead to data inconsistency issues (e.g., all requests may unintentionally retrieve only the last edited destination). Instead, I prefer using the Destination Service (as shown in the configuration above) for:

• Stable & secure connections
  
• Proper authentication handling (Basic/OAuth2)
  
• Consistent data retrieval (prevents mixing/overwriting datasets).

Conclusion

By following these steps, you can successfully integrate multiple OData services in a SAP BTP-based Fiori application. This setup allows seamless data flow between on-premise S/4HANA and cloud-based SAP BTP ABAP environment, ensuring a modern, scalable architecture.

The post Connecting Multiple Databases and OData Services to SAP BTP using BAS appeared first on ERP Q&A.

1. CAP-based services
   
2. S/4HANA systems
   
3. ABAP systems

The format of this post is similar to a tutorial. However, I’ll provide more comprehensive details, tips and the opportunity for you to provide feedback. Based on the feedback we will be able to adjust and enhance this post and future parts of the series, and might even be able to improve the products involved as well.

Introduction

Before we get into the details of setting up connections between SAP Build Apps and SAP Systems, I intend to introduce a couple of SAP technology components in each post that are relevant for the use cases covered in the series.

SAP Build Work Zone

SAP Build Work Zone is a digital workplace experience that enables users to build and customise business sites that provide centralised access to business application information from any device.

Key capabilities are:

• Quickly create corporate websites providing secure and central access for apps, tasks, notifications, information and communication.
  
• Easily connect with SAP and third-party enterprise applications.
  
• Provide a personalised and role-based user experience.
  
• Provide an extensible framework for development, customisation and branding.

The service is currently available in 2 editions:

1. Standard edition – this is basically the same as what we previously called the SAP Launchpad service. This is the edition we will use in this blog post. It has a strong focus on integration of business applications.
   
2. Advanced edition – this is what we previously referred to as the SAP Work Zone service. It includes additional capabilities on top of what is available in the standard edition. The information in this blog post can be applied in this edition as well. You typically subscribe to only one edition. The advanced edition adds capabilities around workspaces, knowledge management and user engagement.

MTAR

A multitarget application (MTA) is comprised of multiple parts (also referred to as “modules”), created with different technologies and deployed to different targets, but with a single, common lifecycle.

A multitarget application archive (MTAR) is an archive that contains a deployment descriptor, configuration files, and module and resource binaries. The archive follows the JAR file specification. A JAR file is essentially a zip file that contains an optional META-INF directory.

An example relevant for the use cases in this blog series is an MTAR created in SAP Build Code that contains the Destination, a node.js based CAP service, and a HANA database deployment application for setting up the persistency layer. All are deployed during a single deployment action, for a specific version of the archive.

Use case D : Consume the CAP service with a web app provided in SAP Build Work Zone

For this use case, we will make use of the previously created basic CAP service in SAP Build Code. In the previous blog post, we have created dedicated mobile apps for the iOS and Android platforms to consume this service with SAP Build Apps. We will now use the exact same UI application to build and deploy a web application to SAP Business Technology Platform. After that, we will configure SAP Build Work Zone to provide access to the application.

Solution diagram

We will start with a quick look into what needs to change in our solution overview to accommodate for web apps. Building upon the solution diagram created earlier, we now add SAP Build Work Zone, standard edition. The design time environment of SAP Build Apps will deploy the web application to the HTML5 Application Repository service. The application is made available to end users through SAP Build Work Zone, which is configured separately. End users can access the web app from any device. The web app authenticates with the Identity Authentication service (IAS) and accesses data via a Destination. Only users who have the correct Roles assigned will be able to access the data provided in the CAP-based data service.

Building the web app in SAP Build Apps

As the application we have developed so far is actually a cross-platform app, we don’t need to change anything in the app itself. We simply need to build it for a different runtime. And for this, we will again make use of the cloud build service we have utilised in the previous blog post.

Starting in SAP Build Apps, navigate to the Launch tab and select Open build service.

Next, select CONFIGURE for the Web App.

For the Bundle Settings, select MTAR and click NEXT.

In the Image Assets tab, upload a 32 x 32 pixel icon image (PNG file) for the Favicon and click NEXT.

On the Plugins tab, you can add React Native plugins for your app. For our app you can see a few plugins have been selected by default, based on the functionality we have already added in the app. We can use the default selection in this case and click NEXT.

Now that we have completed configuring the web app build settings, select BUILD.

Select MTAR and the Client runtime version. Provide a version number for your application. Select BUILD.

Once the build is done, you will be able to download the MTAR file, or simply deploy the MTAR.

Select DEPLOY MTA.

Select the Cloud Foundry API endpoint of your target subaccount. In our case, we will use the same subaccount as the one we have set up in the first blog post of this series. 

Log in to Cloud Foundry and to get authorization to perform deployment to SAP Business Technology Platform.

Once you’ve selected your target Cloud Foundry organisation and space, select DEPLOY MTA TO <your space name>

The deployment process will start and your web application will be deployed to the HTML5 Application Repository Service. You can track the progress in the logs.

Once the deployment finishes, the URL to your application will be shown.

When you try to open the URL, you are quite likely greeted with the message “Internal Server Error”. Looking into details in your browser’s developer tools, you can find a response code 500. This indicates something has not been set up correctly (yet). Not to worry … we’ll fix this in the following steps.

If your subaccount was correctly configured, then you should actually see the web app.

Provide access to the web app in SAP Build Work Zone

We are now going configure SAP Build Work Zone. There are multiple ways to access this. In the context of SAP Build, we can start from the SAP Build landing page. On the landing page, select the Create button.

What would you like to do ? Well, we’d like to Build a Business Site !

Select Configure Site in Admin Console.

Note that in the screenshot below the tile “Manage Workspages and Workspaces” is marked as ‘Not Subscribed’. This is because I am using the standard edition of SAP Build Work Zone, which was subscribed through the “Get started with SAP Build Apps” booster. If you have a subscription to the Advanced Edition, then this tile can be selected as well.

Alternatively, if you are not using SAP Build, you can configure SAP Build Work Zone by opening the link in your subaccount’s cockpit.

As prerequisite, please check whether your user has the Role Launchpad_Admin assigned.

Once configured (and you might need to log out & log in to activate that Role), navigate to the subscriptions and open the link to SAP Build Work Zone, standard edition.

SAP Build Work Zone configuration

Now, let’s set up a business site that includes our app. Select Create Site.

Provide a name for the Site and click Create.

Navigate to the Content Manager tab and select the Content Explorer button.

The Content Explorer will open.

Click on HTML5 Apps to see which apps have been deployed to the HTML5 Application Repository. You will see the app we’ve created in SAP Builds Apps. Besides that, you will also notice the Launchpad for the products service we’ve deployed from SAP Build Code. Select the app created and deployed with SAP Build Apps and click the Add button.

Going back to the Content Manager, select the Create button and create a new group. Give the group a name and assign the previously added app to the group.

Go back to the Content Manager and select the Everyone Role. Enable the previously selected app to be accessible for everyone. Note that this will give users access to the web app itself. Access to the data service is still limited to those having the Role we have configured in the second blog post of this series.

Resolving the “Internal Server Error”

And now for the previously mentioned 500 response code, resulting in “Internal Server Error”. This happens when the authentication mechanism for SAP Build Work Zone and SAP Cloud Portal service uses XSUAA, while your subaccount is actually configured to use a custom IdP (IAS). To switch to Identity Authentication, navigate to the Settings, select the Identity Authentication tab and click Enable (please read the notes before doing this, and confirm that you’ve completed the required trust configuration).

Accessing the web app in SAP Build Work Zone

The link to the site can be found on the Site Directory.

Depending on how you’ve configured your site in SAP Build Work Zone, it might look a bit different. But you should have the tile of your app visible on your site.

Clicking on the tile will open our web app. Notice the SAP BTP authentication happening before opening the app. Also note that you can open the URL on any device; on mobile as well as desktop devices.

In case you are wondering where the icon ended up: check your web browser’s tab.

Alternatively, you can also open the URL provided in SAP Build Apps, or find a link to your app in your subaccount, under the tab HTML5 Applications.

The post Consuming SAP with SAP Build Apps – Web App in SAP Build Work Zone, standard edition appeared first on ERP Q&A.

As you can see in the image attached above, to access the “SAP HTML5 Application Repository Service” we need SAP App Router to be able to fetch the application details and the same is the case for “SAP Destination Service” as well and so on.

The other way is to subscribe to SAP Work-Zone and use the Managed App Router to access the HTML5 application repository and further the Tile can be created for the deployed application to access the same from the Launchpad.

But in this Blog we will not use Work-Zone subscription to access the application instead we will create our own App Router application and deploy the same to the CF Space.

Before proceeding to the development part we will have a quick look into the Pre-Requisites –

1. Cloud Foundry Space
   
2. Northwind Destination in BTP Account
   
3. Business Application Studio

Northwind destination details –

As we have the destination in place we can proceed to BAS to start developing our application.

Create a blank folder in the BAS workspace named ui5cfsample. Inside this folder we will create Approuter, HTML5 Deployer and the UI5 application.

Configuring Approuter :-

1. create a new folder approuter inside ui5cfsample project folder.

2. create new file package.json and paste the below code

{
    "name": "ui5cfsample-approuter",
    "scripts": {
        "start": "node node_modules/@sap/approuter/approuter.js"
    },
    "dependencies": {
        "@sap/approuter": "^9"
    }
}

3. create a new file xs-app.json and paste the below code

{	
  "welcomeFile": "ui5cfsample/index.html",
  "authenticationMethod": "route",
  "routes":[{
    "source":"^/user-api(.*)",
    "target":"$1",
    "service":"sap-approuter-userapi"
  },{
    "source": "^/abap(.*)",
    "target": "$1",
    "destination": "Northwind",
    "authenticationType": "xsuaa"
  }]
}

**ui5cfsample/index.html – Whereas ui5cfsample is the application namespace which we will create in later steps.

**destination – Northwind as we have created the destination in the same name.

4. create a new file xs-security.json and paste the below code

{
    "xsappname": "ui5cfsample-xsuaa",
    "tenant-mode": "dedicated",
    "oauth2-configuration": {
        "redirect-uris": [
            "https://ui5cfsample-approuter-*cfapps.us10-001.hana.ondemand.com/login/callback",
            "http://localhost:5001"
        ]
    }
}

**login/callback – will redirect the non-logged in user to enter their BTP credentials to continue using the application.

5. create a new file manifest.yaml and paste the below code

---
applications:
- name: ui5cfsample-approuter
  buildpacks:
  - https://github.com/cloudfoundry/nodejs-buildpack
  memory: 1GB
  disk_quota: 1GB
  random-route: true
  path:
  services:
  - ui5cfsample-xsuaa
  - ui5cfsample-destination
  - ui5cfsample-html5-runtime

6. Now in the above manifest.yaml sample code we have 3 services listed which we need to create before deploying the approuter to CF space. Execute the below commands inside approuter folder.

cf create-service xsuaa application ui5cfsample-xsuaa -c xs-security.json
cf create-service destination lite ui5cfsample-destination
cf create-service html5-apps-repo app-runtime ui5cfsample-html5-runtime

once the services are created you can check those services in Cloud Foundry space –

**ui5cfsample-html5-host service will be created in the later steps.

7. Now we have all the listed services in place we can deploy the approuter application to cloud foundry space

cf push

Once the application is deployed and running, try launching the approuter application from the Application Route link –

**When the browser will load the page will come as “Not Found” as the application with namespace ui5cfsample is not yet deployed to Cloud Foundry which we will be doing in the next steps.

**Now we will check If the metadata is loading from the destination which is maintained. Replace the URL (/ui5cfsample/index.html) with (/abap/V2/OData/OData.svc/$metadata)

URL – https://<hostname>/abap/V2/OData/OData.svc/$metadata

Finally, our Approuter application is deployed successfully and working as expected.

Configuring HTML5 Deployer :-

1. create a new folder html5-deployer inside ui5cfsample project folder.

2. create a new file package.json and paste the below code

{
    "name": "ui5cfsample-html5-deployer",
    "dependencies": {
        "@sap/html5-app-deployer": "6.2.0"
    },
    "scripts": {
        "start": "node node_modules/@sap/html5-app-deployer/index.js"
    }
}

3. create a new file manifest.yaml and paste the below code

---
applications:
- name: ui5cfsample-html5-deployer
  buildpacks:
  - https://github.com/cloudfoundry/nodejs-buildpack
  memory: 256MB
  disk_quota: 256MB
  random-route: true
  path:
  services:
  - ui5cfsample-html5-host

4. As we have one service which is listed and required in the above manifest.yaml file so we will create the service

cf create-service html5-apps-repo app-host ui5cfsample-html5-host 

**Now, the setup for html5-deployer is done and we will deploy the application once our UI5 app is ready and the final build of application is copied inside html5-deployer folder.

Configuring UI5 App :-

1. We will use the template generator to create a sample freestyle application.

2. Menu > File > New project from template and fill in the details required and choose the folder location to current ui5cfsample project folder

3. After the application is generated the folder structure should look like this

4. create a new file inside webapp folder as xs-app.json and paste the below code

{	
  "welcomeFile": "index.html",
  "authenticationMethod": "route",
  "routes":[{
    "source":"^(.*)",
    "target":"$1",
    "service":"html5-apps-repo-rt"
  },{
    "source": "^/abap(.*)",
    "target": "$1",
    "destination": "Northwind",
    "authenticationType": "xsuaa"
  }]
}

5. Define the data source & default model in the manifest.json file

"dataSources": {
   "mainService": {
      "uri": "/abap/V2/OData/OData.svc/",
      "type": "OData"
  }
}

"": {
    "dataSource": "mainService",
    "preload": true
}

6. change the source (src) in the index.html with the CDN value

src=”https://sapui5.hana.ondemand.com/resources/sap-ui-core.js”

7. Put a List widget and bind the item with Products Entityset to see the data coming from the destination. Open View and paste the below code

<List
                headerText="Products"
                headerLevel="H2"
                items="{
                    path: '/Products'
                }" >
                <StandardListItem
                    title="{Name}"
                    counter="{Rating}"/>
            </List>

8. To build the application and put the changes inside html5-deployer folder we need to add a script in package.json file of UI5 app

"build:ui": "ui5 build --config=ui5.yaml --clean-dest --dest ../html5-deployer/resources/dist"

9. To build the application execute the below command

npm run build:ui

**This command will put the final build inside html5-deployer folder (resources/dist)

Deploying UI Application :-

1. We have the final build of the application in the html5-deployer folder (/resources/dist)

2. Open terminal at html5-deployer location and execute the below command

cf push

3. Once the html5-deployer application is successfully deployed to the Cloud Foundry space, the UI5 application will be deployed.

4. As the application is deployed, Now open the approuter application and access the link, UI5 application should be loading and data should be populated to the List.

Now the development & deployment is completed with OData service binding.

The post Developing & Deploying the UI5 App to Cloud Foundry and Accessing from App-router End-to-End Steps appeared first on ERP Q&A.

In SAP Business Application Studio, you are provided with one or more dev spaces. A dev space is a development environment with all the tools, capabilities, and resources needed for developing your application. Each type of application requires a different development environment. Based on the type of application that you choose to build you’re provided with a different set of tools. You can add additional tools to supplement the application with additional extensions for the scenarios.

• In today’s fast-changing business world, companies need to be quick, innovative, and efficient.
• That’s why they’re using advanced digital tools like SAP Business Application Studio (BAS) to make their operations smoother and speed up how they develop apps company-wide.
• SAP Business Application Studio is a cloud-based development environment offered by SAP for creating business applications.
• It provides a range of tools and services tailored for SAP developers to build Fiori apps, SAPUI5 applications, and business logic using ABAP, Node.js, and more.
• It simplifies development by offering pre-configured environments and supports collaboration among developers.
• The core feature of SAP Business Application Studio is its “dev spaces,” which are like isolated virtual machines in the cloud.
• These dev spaces come with specific tools and runtimes for different business scenarios, such as SAP Fiori, SAP S/4HANA extensions, and Workflow.
• This setup saves time in setting up the development environment and allows developers to efficiently develop, test, build, and run their solutions.
• In SAP Business Application Studio, developers work in dev spaces, each providing a development environment tailored to the type of application being built.
• These environments can be customized with additional tools and extensions as needed.
• Developers can test their applications within the dev space itself, simulating a local development experience.
• SAP Business Application Studio also offers various tools specifically designed for developing business applications in the SAP ecosystem.
• These tools cover the entire development cycle, from project creation to testing and deployment.
• The platform supports popular browsers like Mozilla Firefox, Google Chrome, and Microsoft Edge for a seamless development experience.
• SAP BAS is a development environment built on Eclipse Theia, which resembles the Visual Studio Code interface.
• It requires a SAP license for productive use and offers different Flavors tailored for various development tasks.
• For example, if you’re developing a SAPUI5 or Fiori app, you would choose the SAP Fiori flavour, while for CAPM app development, you’d select the SAP CAPM flavour.
• You can enhance BAS by enabling different packages like SAP Workflow Package, CDS Viewer, and HANA Development Packages, which allow you to work on different types of projects and handle various file types.
• BAS operates within a virtual container running on an Ubuntu-based OS architecture.
• While developers don’t have root access to the operating system, they can still install additional packages and modules required for their projects using the Terminal.

Benefits of SAP Business Application Studio

• Ready-to-use Environment: It offers a ready-to-go setup specifically designed for building SAP applications.
• Central Management: You can manage everything centrally, including tools, access to systems, and company policies.
• Tailored Productivity Tools: The tools provided are customized for developing SAP applications, making the process smoother.
• Guided Learning: It provides guidance to help developers learn SAP technologies quickly and efficiently.
• Opinionated Technologies: You can build applications using preferred SAP technologies and best practices.
• Consistent Experience: Regardless of the SAP development technology you’re using, the experience remains consistent.
• Simplified Complexity: Instead of focusing on technical details, it simplifies development by describing logical components of applications.
• Integration: Easily integrates with existing SAP solutions, systems, and services.
• Access to Extensions: You can easily access additional tools and extensions compatible with Visual Studio Code.
• Full Support: It comes with comprehensive support from SAP for all enterprise needs.

BAS Architecture

Subscribe to the Service from the service marketplace for SAP Business Application Studio.

Step 1: Log into SAP BTP Trial

1. Visit https://account.hanatrial.ondemand.com and sign in to your SAP BTP cockpit.
   
2. You may need to agree to the legal terms. Simply check the box and click Accept.

Step 2: Check Cloud Foundry Enablement.

1. To verify Cloud Foundry enablement, click “Go to Your Trial Account” to access the list of available trial subaccount.

2. Choose the subaccount you wish to use for this tutorial.

3. On the overview page, ensure that Cloud Foundry is enabled.

4. If Cloud Foundry isn’t enabled, click on the “Enable Cloud Foundry” button.

Step 3: Add the SAP Business Application Studio Subscription to the Subaccount.

1. To add the SAP Business Application Studio subscription to the subaccount, follow these steps: Click “Enter Your Trial Account” to access the Cloud Foundry environment.

2. Choose the tile corresponding to the subaccount where you wish to enable the SAP Business Application Studio subscription.

When you create an SAP BTP Trial account, a trial subaccount is automatically created.

3. Navigate to the Service Marketplace by clicking on it in the navigation area.

4. Click on “Create” to initiate the wizard for subscribing to SAP Business Application Studio.

5. In the wizard, ensure that “SAP Business Application Studio” is chosen in the Service field and “trial” is selected in the Plan field.

6. Click on “Create” to subscribe to SAP Business Application Studio.

7. A “Creation in Progress” popup will appear. Click on “View Subscription” to see the SAP Business Application Studio subscription in the Instances and Subscriptions page.

8. Launch SAP Business Application Studio.

Open SAP Business Application Studio and select “Go to Application.”

Overall, BAS offers benefits such as a ready-to-use environment, central management, tailored productivity tools, guided learning, opinionated technologies, consistent experience, simplified complexity, integration with existing SAP solutions, access to extensions, and comprehensive support from SAP for all enterprise needs.

The post Exploring SAP Business Application Studio appeared first on ERP Q&A.

Prerequisites for this demo requires:-

1. SAP BTP free tier account
   
2. SAP Business Application studio
   
3. SAP Integration Suite

STEPS TO CONFIGURE IFLOW:

• Create an artifacts with sender, receiver and configure the HTTP adapter as below with the sender, make sure to uncheck the CSRF protection

• We are going to pass JSON payload to this iflow so here we are converting it to xml using converter based on our requirement.

• Next in the content modifier we going to fetch the mail content from the xml using predefined xpath functionality, Basically content modifier is used to modify a message by adding additional data to it.

• In the mail adapter we going to pass the property that we created in the content modifier.

• Now we can deploy the iflow once it is deployed we will be getting the generated endpoint which will be used to trigger the iflow

Configuring the CPI Endpoint in SAP destination service:

CREATION OF SAP UI5 APPLICATION:-

Now it is time to create application since our requirement is to deploy the application in cloud foundry we are going to use standalone approuter for our development.

1. select the view from the menu and click the command palette.

2. Type route in the popup and select the router generator

3. Create the router by selecting the standalone router from the drop down and also select the connectivity device then click finish

4. Now the mta.yaml with router configuration file is generated by selecting the open folder option from the menu we can open our mailtocpi router like the below.

5. Now Select the New project from template and click the sap fiori application tile.

6. Click start you will be getting the options like the below in that select basic and click next

7. Select none for data source and service selection

8. In the project attributes section make sure to define the path of the router we created it will be and select yes for adding the deployment configuration to the router mta.yaml it will add the ui dependencies in the yaml file.

9. In deployment configuration select cloud foundry and the destination we configured.

10. configure your destination in the xs.app.json under the router folder like the below.

{
  "authenticationMethod": "none",
  "routes": [ {

    "source": "/http/sendmail(.*)$",
    "target": "/http/sendmail",
    "destination": "mail",
    "authenticationType": "none",
    "csrfProtection": false
  },
  {
    "source": "^(?:/app|/app/.*)?/resources/(.*)$",
    "target": "/resources/$1",
    "authenticationType": "none",
    "destination": "ui5"
  },
  {
    "source": "^(?:/app|/app/.*)?/test-resources/(.*)$",
    "target": "/test-resources/$1",
    "authenticationType": "none",
    "destination": "ui5"
  }],
  "welcomeFile":"./mailtocpi"
}

11. Adding simple UI with text box and button

12. Inorder to call the endpoint here we using the ajax call for the click event of the button.

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

        return Controller.extend("mailtocpi.controller.View1", {
            onInit: function () {

            },
            onSend: function () {

                var text = this.getView().byId("mail").getValue();
                var data = JSON.stringify({
                    "mail": text
                });
                // data.mail = "hi im good"
                $.ajax({
                    type: "POST",
                    url: "/http/sendmail",
                    headers: {
                        "content-Type": "application/json"
                    },
                    data: data,
                    success: function (resultData) {
                        alert("Mail Sent Successfully");
                    }
                });
            }
        });
    });

RUN APPLICATION LOCALLY IN BAS:-

In-order to test locally the application in Business application studio we need to configure the path and the destination name in UI5.YAML like the below which will proxy and redirect our request to the destination

select the data source as default from ui5.yaml

Test Result locally:-

Mail is been sent to the configured mail id.

DEPLOYED APPLICATION IN CLOUD FOUNDRY:-

Once we deploy our application to the cloud foundry space we will be getting the route url running in our space like the below.

If we configured the app router correctly by following the above steps you will be getting the api call successfully like the below from your deployed cloud foundry application.

The post Trigger CPI Endpoint from SAP BTP cloud Application appeared first on ERP Q&A.

In this blog post, I’ll demo about Total and Sub-Total of a Numerical Units in a Table using Northwind Service.

Northwind Service: Northwind Service is an OData Sample service and consumed in SAP UI5 and Fiori Applications.

Responsive Table: The responsive table automatically adjusts its appearance and behaviour based on the available screen size, making it suitable for both desktop and mobile applications.

Use Case: The Total and Sub-total Concept in a table is commonly used in scenarios where you need to display aggregated values for columns like Amount/Prices based on certain criteria like Quantity,Unit ect. For this case i came up with this solution.

In this scenario, we’ll assume a simple sales order table with columns like Product, Quantity, Unit and Price.

So, let’s get started,

Step 1: Creating an Application in Projects Folder

• Click on File, “New Project from Template” option.

• Select “SAP Fiori application” Template and click on Start Button.

• Select “SAP Fiori Worklist Application” Template and click on Next Button.

• Select: In Data source- “Connect to System”.

In System- “Northwind” Destination.

Give Service Path of Northwind Service- “/V2/Northwind/Northwind.svc/”

• In Entity Selection,

Select: Object Collection- Products Entity Set.

Object Collection Key- ProductID Property.

Object ID- CategoryID Property.

Ater giving all the required details click on the Next Button.

• In Project Attributes give required details and click on Finish Button.

• Application Created Successfully.

Step 2: Developing Application

Worklist XML View:

• Using Semantic Page Control instead of Native Page.
• The SemanticPage control helps in creating a unified page structure for Fiori applications. It includes header content, content area, and a footer, providing a standardized layout for applications.
• Give Semantic Page Name Space Library- xmlns:semantic=”sap.m.semantic”.
• Implementing Sematic Page as shown in below image:

• Added Toolbar Control in Semantic Page and added Three Buttons in it.
• Buttons are Total Button, Sub-Total Button and Refresh Button.

Output Screen:

• Output showing Toolbar with Three Buttons in Semantic Page.

• Now let’s add Responsive Table Control for Displaying Products Data.

• Added footer in column for displaying the Subtotal for the price.

XML CODE SNIPPET:

<mvc:View controllerName="com.total.samtotal.controller.Worklist"
    xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:semantic="sap.m.semantic"
    xmlns:core="sap.ui.core">
    <semantic:SemanticPage class="sapUiSizeCompact" id="page" title="{i18n>worklistTitle}" showFooter="false" navButtonPress="onNavBack" showNavButton="false">
        <semantic:content>
            <Toolbar>
                <ToolbarSpacer />
                <Button icon="sap-icon://sum" press="SumList" type="Accept" tooltip="{i18n>Total}"></Button>
                <Button id="subTotBtn" icon="sap-icon://add-process" press="openSubTotalFunc" type="Accept" tooltip="{i18n>SubTotal}"></Button>
                <Button icon="sap-icon://refresh" press="onTableRefresh" type="Emphasized"></Button>
            </Toolbar>
            <Table id="tableSum" width="auto" items="{path: 'ProductModel>/',sorter: {path: 'SupplierID',descending: false}}" noDataText="{i18n>tableNoDataText}" growing="true" growingThreshold="100" growingScrollToLoad="true">
                <columns>
                    <Column width="5%">
                        <Label text="ID" design="Bold"></Label>
                    </Column>
                    <Column >
                        <Label text="Product Name" design="Bold"></Label>
                    </Column>
                    <Column >
                        <Label text="CategoryID" design="Bold"></Label>
                    </Column>
                    <Column >
                        <Label text="Unit" design="Bold"></Label>
                        <footer>
                            <VBox items="{STableModel>/QTYUnit}">
                                <Text visible="true" text="{STableModel>}" />
                            </VBox>
                        </footer>
                    </Column>
                    <Column >
                        <Label text="Price" design="Bold"></Label>
                        <footer>
                            <VBox id="UnitPriceSumId" visible="false" items="{STableModel>/UnitPricetotalVal}">
                                <Text text="{path:'STableModel>'}" />
                            </VBox>
                        </footer>
                    </Column>
                    <Column >
                        <Label text="Discontinued" design="Bold"></Label>
                    </Column>
                </columns>
                <items>
                    <ColumnListItem >
                        <customData>
                            <core:CustomData key="mydata" value="{ProductModel>Flag}" writeToDom="true"></core:CustomData>
                        </customData>
                        <cells>
                            <Text text="{ProductModel>ProductID}"></Text>
                            <Text text="{ProductModel>ProductName}"></Text>
                            <Text text="{ProductModel>CategoryID}"></Text>
                            <Text text="{ProductModel>QuantityPerUnit}"></Text>
                            <Text text="{ProductModel>UnitPrice}"></Text>
                            <ObjectStatus text="{ProductModel>Discontinued}" state="{path: 'ProductModel>Discontinued',formatter: '.formatter.status'}" />
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </semantic:content>
    </semantic:SemanticPage>
</mvc:View>

Getting Northwind Serivce Data:

• In Life Cycle Method- onInit() Function just give the Read Call for Products Entity of Northwind Service.
• Read Call for Products Entity Set from Northwind service.
• In Read Call we just Split the QuantityPerUnit Property.
• We just show QuantityPerUnit property Units without Value in the column.

Controller Code:

sap.ui.define([
    "./BaseController",
    "sap/ui/model/json/JSONModel",
    "../model/formatter",
    "sap/ui/model/Filter",
    "sap/ui/model/FilterOperator",
    "sap/ui/model/Sorter"
], function (BaseController, JSONModel, formatter, Filter, FilterOperator, Sorter) {
    "use strict";

    return BaseController.extend("com.total.samtotal.controller.Worklist", {

        formatter: formatter,

        /* =========================================================== */
        /* lifecycle methods                                           */
        /* =========================================================== */

        /**
         * Called when the worklist controller is instantiated.
         * @public
         */
        onInit: function () {
            var oViewModel, that = this;
            // Model used to manipulate control states
            oViewModel = new JSONModel({
                worklistTableTitle: this.getResourceBundle().getText("worklistTableTitle")
            });
            this.setModel(oViewModel, "worklistView");
            that.onGetService();
        },
        onGetService: function () {
            var that = this;
            var TableModel = new JSONModel();
            that.getView().setModel(TableModel, "STableModel");

            //Read Call
            var oDataHeader = this.getOwnerComponent().getModel();
            oDataHeader.read("/Products", {
                success: function (oData, res) {
                    var sArray = []
                    var sData = oData.results;
                    for (var i = 0; i < oData.results.length; i++) {

                        var oQtySplit = sData[i].QuantityPerUnit.split(/(\d+)/);
                        var oQty = oQtySplit[oQtySplit.length - 1].toUpperCase();

                        var sObj = {};
                        sObj.CategoryID = sData[i].CategoryID;
                        sObj.Discontinued = sData[i].Discontinued;
                        sObj.ProductID = sData[i].ProductID;
                        sObj.ProductName = sData[i].ProductName;
                        sObj.QuantityPerUnit = oQty;
                        sObj.ReorderLevel = sData[i].ReorderLevel;
                        sObj.SupplierID = sData[i].SupplierID;
                        sObj.UnitPrice = parseFloat(sData[i].UnitPrice).toFixed(2);
                        sObj.UnitsInStock = sData[i].UnitsInStock;
                        sObj.UnitsOnOrder = sData[i].UnitsOnOrder;
                        sArray.push(sObj);
                    }
                    var ProductModel = new JSONModel(sArray);
                    ProductModel.setSizeLimit(sArray.length);
                    that.getView().setModel(ProductModel, "ProductModel");
                }
            });
        },


    });
});

Output Screen:

• Here we can see only Units in Units Column without value and price.

Total Button Logic:

• Now can see Code of Total Sum for the Unit and Price Columns in Table.
• Here “SumList” Function is an event of Total Button in Toolbar of XML view.

Controller Code:

//**************************** Sum List Fields Dialog *****************************//
        SumList: function () {
            var that = this;

            var oPricePath = "UnitPrice";
            var oUnit = "QuantityPerUnit";
            var oData = [];
            var oTable = that.byId("tableSum");
            var uniqueQuantityUnit = [];
            oTable.getItems().filter(function (item) {
                var oPath = item.getBindingContextPath();
                var oContext = oTable.getModel("ProductModel").getProperty(oPath);
                oData.push(oContext);
                if (uniqueQuantityUnit.indexOf(oContext[oUnit]) === -1) {
                    uniqueQuantityUnit.push(oContext[oUnit]);
                }
            });
            that.getView().getModel("STableModel").setProperty("/QTYUnit", uniqueQuantityUnit);
            var oTotalArray = [];
            for (var i = 0; i < uniqueQuantityUnit.length; i++) {
                var sArray = that.onTotalUnitQtyData(uniqueQuantityUnit[i], oData, oPricePath, oUnit);
                oTotalArray.push(sArray);
            }
            that.byId(oPricePath + "SumId").setVisible(true);
            that.getView().getModel("STableModel").setProperty("/" + oPricePath + "totalVal", oTotalArray);
            that.getView().getModel("STableModel").setProperty("/sTotalPath", oPricePath);
            var sumMsg = "Sum Calculated";
            sap.m.MessageToast.show(sumMsg);
        },
        onTotalUnitQtyData: function (unitQty, oData, oPricePath, unit) {
            var oTotal = 0;
            for (var i = 0; i < oData.length; i++) {
                if (unitQty === oData[i][unit]) {
                    var stData = oData[i][oPricePath];
                    var oValue = parseFloat(stData);
                    oTotal += oValue;
                }
            }
            var oMainTotal = parseFloat(oTotal).toFixed(2);
            return oMainTotal;
        },

Output Screen:

• Click on The Total Button to see the Total of Unit &Price in Custom footer of Table.

Sub-Total Button Logic:

• Now can see Code of Sub-Total Sum for the Unit and Price Columns in Table.
• Here “openSubTotalFun” Function is an event of Sub-Total Button in Toolbar of XML view.

Controller Code:

//**************************** Sum Sub Total List Fields Dialog *****************************//
        openSubTotalFunc: function () {
            var that = this;
            // CategoryID is field with which we do subtotal functionality in table
            var fieldName = "CategoryID";
            var oPricePath = "UnitPrice";
            var oView = that.getView();
            var oTable = oView.byId("tableSum");
            var unique = [], oData = [];
            var qty = 0;
            oTable.getItems().filter(function (item) {
                var oPath = item.getBindingContextPath();
                var oContext = oTable.getModel("ProductModel").getProperty(oPath);
                oData.push(oContext);
                if (unique.indexOf(oContext[fieldName]) === -1) {
                    unique.push(oContext[fieldName]);
                }
            });
            unique.forEach(function (uniqVal) {
                var sObj = {};
                for (var i = 0; i < oTable.getItems().length; i++) {
                    var sPath = oTable.getItems()[i].getBindingContextPath();
                    var sContext = oTable.getModel("ProductModel").getProperty(sPath);
                    if (uniqVal === sContext[fieldName]) {
                        qty = that.onTotalUnitQtyData(uniqVal, oData, oPricePath, fieldName);
                        sObj[oPricePath] = qty;
                    }
                }
                sObj[fieldName] = uniqVal;
                if (sObj[fieldName] === uniqVal) {
                    sObj.Flag = "LightOrange";
                }
                oData.splice(oData.length, 0, sObj);
                oTable.getModel("ProductModel").setData(oData);
                oTable.getModel("ProductModel").setSizeLimit(oData.length);
                oTable.getModel("ProductModel").refresh();
                oTable.getBinding("items").sort(new Sorter(fieldName, false));
                qty = 0;
            });
        }

CSS Code for Table row Colour:

tr[data-mydata="LightOrange"]{
    background: #FFD898 !important;
    }
tr[data-mydata="None"]{
    background: #f7f7f7 !important;
}

Output Screen:

• Click on the Sub-Total Button for Displaying Sub-Totals of Price in Custom Footer of Table.

Refresh Button Logic:

• Click on the Refresh Button to Refresh/Clear Totals and Sub-Total in Table.

Controller Code:

/*** Event handler for refresh event/ Refreshing Table */
        onTableRefresh: function () {
            var that = this;
            that.onGetService();
        },

Output Screen:

Conclusion:

We had seen how to do Total and Sub-Total of Units with Values in a Table using Northwind Service.

NOTE: Displaying Table data using Northwind Service.

The post Total and Sub-Total of a Table Using Northwind Service in BAS-(Business Application Studio) appeared first on ERP Q&A.

Each of the above components can be created as a separate project, is the way to achieve modularization in CAPM. Now you may ask why to perform this activity.

Consider the example of VBAK/VBAP table in SAP. This table can be accessed from multiple programs/application. What if we need to do modification/enhancement to this table?. Apply the same concept here. If all the three components are in the same project, it is hard to do modification. Once you do the modification to the database, all the dependent services/UI5 application might crash/stop. We need to further look into the issues for each of them and need to rectify accordingly.

In order to achieve this, let’s now create a “HANA Database Project”. use the template wizard to perform this activity.

Follow the below steps to create an application.

• Provide Project Name : here i am giving “hcm_employee_cntrl” and press “Next”.
• You are now requested to add the basic information. BAS will automatically filled with default module Name as “db”. You can either use the same or rename it. Here i am keeping the same. Click on Next to continue.
• Further set the basic properties for your application. Here i am keeping my Namespace as blank as I will be reusing this database in multiple application. However, there won’t be any problem if you provide namespace here.
• You can provide a schema name. Here i am using “DB_EC”
• Choose HANA Database version as “HANA Cloud”
• Select “yes” for “Bind the database module to a run-time environment service instance?” and click on Next .
• Select “No” for “Create a new HDI service instance?”
• Choose your Cloud Foundry Service from the drop down. Here i am selecting “dev_hdi_container_shared”. Click Finish.
• BAS will create your SAP HANA project in few seconds.

We can further create a “db” as we have done earlier. You may be note that the naming conventions(extensions) are different here. You can create database table, View, Roles etc as part of your SAP HANA Native application project.

• Create a new folder “tables” under the generated folder “db/src”. This is again for the modularization purpose. You can even directly create your database table under “db/src” folder.
• Once you create the “tables” folder, create a new file with name “EMPLOYEES.hdbtable”. Here “.hdbtable” defines it as a HANA Database table.
• This file is responsible to generate the database table in SAP HANA database. As you are aware, we can create Colum or Row based table in SAP HANA database. Here we will be suing a Column based table.
• Copy the below code inside your file “EMPLOYEES.hdbtable”

COLUMN TABLE "EMP_DBTABLE.EMPLOYEES"(
  ID                    NVARCHAR(36),
  EMP_ID_EXT            NVARCHAR(20),
  NAME                  NVARCHAR(255),
  EMAIL_ID              NVARCHAR(128),
  DEPARTMENT_ID         NVARCHAR(36),
  createdAt             TIMESTAMP,
  createdBy             NVARCHAR(50),
  modifiedAt            TIMESTAMP,
  modifiedBy            NVARCHAR(50),
    PRIMARY key(ID)
)

• As per the SAP security guidelines, we should never expose the database directly. Instead, we need to create a V1 view to expose the data. In order to achieve this, create a new folder “views” under the folder “db/src”.

• Once you create the “views” folder, create a new file with name “EMPLOYEES.hdbview”. Here “.hdbview” defines it as a HANA Database view.

• Copy the below code inside your file “EMPLOYEE.hdbview”

VIEW "EMP_DBVIEWS.V.V1.EMPLOYEES" AS
SELECT ID,
  EMP_ID_EXT,
  NAME,
  EMAIL_ID,
  DEPARTMENT_ID,
  createdAt,
  createdBy,
  modifiedAt,
  modifiedBy
FROM "EMP_DBTABLE.EMPLOYEES";

• However, we need to create the respective role to access this artifacts outside.

• Create another older “roles” under “db/src”.

• Further create a new file “EmployeeReadOnly.hdbrole”. This role we are creating for the ready only purpose, which means, once this role is assigned, that application can only read the information from the underlaying database table.

• Add the below code in your file “EmployeeReadOnly.hdbrole”

{
    "role": {
        "name": "DB_EC::ReadOnly",
        "object_privileges": [
            {
                "name": "EMP_DBVIEWS.V.V1.EMPLOYEES",
                "type": "TABLE",
                "privileges": ["SELECT"]
            }
        ]
    }
}

• As I mentioned above, we are not exposing the database directly instead we will be exposing the”V1″ view created.

• Now create another role with file name “EmployeeModify.hdbrole”.

• Add the below code inside the file.

{
    "role": {
        "name": "DB_EC::ReadOnly",
        "object_privileges": [
            {
                "name": "EMP_DBVIEWS.V.V1.EMPLOYEES",
                "type": "TABLE",
                "privileges": ["SELECT", "INSERT", "UPDATE","DELETE"]
            }
        ]
    }
}

• There are other role concepts like Privilege and privileges with grand options as well. We are not really discussing that much in detail. Below is the sample code to create the role. You ca explore the same. To consume this database view in another application, we must create the below roles as well. Here the “#” at the end of the role name is must, identify the role as a role with additional privileges.

{
    "role": {
        "name": "DB_EC::ReadOnly#",
        "object_privileges": [
            {
                "name": "EMP_DBVIEWS.V.V1.EMPLOYEES",
                "type": "TABLE",
                "privileges_with_grant_option":["SELECT"]
            }
        ]
    }
}

• The above sample code is for read only with grant option.

{
    "role": {
        "name": "DB_EC::Modify#",
        "object_privileges": [
            {
                "name": "EMP_DBVIEWS.V.V1.EMPLOYEES",
                "type": "TABLE",
                "privileges_with_grant_option": ["SELECT", "INSERT", "UPDATE","DELETE"]
            }
        ]
    }
}

• The above sample code is for non-read only with grant option.

Your application is now ready to deploy. As we have done in the previous blogs, follow the same steps.

• Right click on the “mta.yaml” file and choose “Build MTA Project” option.

• An “mta_archives” will be generated automatically.

• Lets do the deployment by log into Cloud Foundry endpoint.

• Open a new Integrated terminal by right click on the project

• Use command “cf login”. Follow the instructions form the screen.

• Once logged in, right click on the generated mta archive file and choose option “Deploy MTA Archive”.

• Once the deployment is success, you can see the application deployed in CF as shown below. By default, it will be in “stopped” status. You can turn it to “Start” when required.

At this moment, you have completed the DB artifacts creation and deployment. As I mentioned above, we need to use this in an application. In order to consume the DB artifacts in other application, we need to understand “SINONYMS”

Create another CAP project to consume the above DB.

• Use command “cds init EMP_CENTRAL”

• Create a data model under “db” folder with name “data-model.cds”

namespace hcm.empcntrl;

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

entity EMPCNTRL : cuid, managed {
    EMP_ID_EXT    : String(20);
    NAME          : String(255);
    EMAIL_ID      : String(128);
    DEPARTMENT_ID : String(36)
}

• to expose, create a file “EMPCNTRL-service.cds” under “srv” folde and add the below code.

using hcm.empcntrl as ec from '../db/data-model';

service EMPCNTRLService {
    entity empcntrl as select from ec.EMPCNTRL;
        
    
}

• Use the command “cds add mta” to include the MTA file which is needed to specify the remote source to connect with our CAP application.

• Create a “Run Configuration”, follow the steps in the previous blogs.

• Open “Package.json” to add HANA dependency or use command “cds add hana”. You can manually add it using the below code.

"cds": {
    "requires": {
      "db": "hana"
    }
  }

• Click on “db-hana” to execute the Run configuration.
• After the execution of Run Configuration, open the “MTA.yaml” file. Here i am doing some corrections
  • Under “module”, the name i am changing to “HCM_BE_EMPLOYEE_CENTRAL” to a more meaningful name
  • Similarly, i am changing the db name as well to “HCM_DB_EMPLOYEE_CENTRAL”. Please find the below screen shot.

• Now we are about to discuss about the main point, which to consume the remote service

• Add the below code in the “MTA.yaml” file under the resource section.

resources:
  - name: EMP_CNTRL-db
    type: com.sap.xs.hdi-container
    parameters:
      service: hana
      service-plan: hdi-shared
    properties:
      hdi-container-name: ${service-name}
  - name: cross-containerservice-empcntrl    
    type: org.cloudfoundry.existing-service
    parameters:
      service-name: hdi_Employee_Central #Cross container name must be used here
      properties:
        the-service-name: ${service-name}

• Now mention the “hdi-container-name” in the module as well, refer the last 2 lines.

modules:
  - name: HCM_BE_EMPLOYEE_CENTRAL
    type: nodejs
    path: gen/srv
    parameters:
      buildpack: nodejs_buildpack
    build-parameters:
      builder: npm
    provides:
      - name: srv-api # required by consumers of CAP services (e.g. approuter)
        properties:
          srv-url: ${default-url}
    requires:
      - name: EMP_CNTRL-db

  - name: HCM_DB_EMPLOYEE_CENTRAL
    type: hdb
    path: gen/db
    parameters:
      buildpack: nodejs_buildpack
    requires:
      - name: EMP_CNTRL-db
        properties:
          TARGET_CONTAINER: ~{hdi-container-name}

• The default container is not sufficient. We need one more resource to run the DB module.

- name: cross-containerservice-empcntrl
        properties:
          key: db-ec
          service: {the-service-name}
        group: SERVICE_REPLACEMENTS

• Add the above code as part of the “module” section of “MTA.yaml”

• Make sure your “tab indent” is correct, otherwise it will be an error.

• Now we need to add a “SYNONYM”.under “srv” folder

• Create a file “.hdbsynonym” file. Here, i will be using the name “ec.hdbsynonym”. Add below code inside the new file.

{
    "HCM_EMPCNTRL_EMPCNTRL": {
        "target": {
            "object": "HCM_EMP_DB.V_V1_RA_EMP",
            "schema": "HCM_RA_EMP"
        }
    }
}

• Create another file with “ec.hdbgrants” to grant the necessary authorization for the consuming application. Add the below code in it.

{
    "db-ec" : {
        "object_owner": {
            "container_roles" :["RA_EMP_Modify#"]
        },
        "application_user": {
            "container_roles" :["RA_EMP_Modify"]
        }
    }
}

• One final change, to do in the “.cds” file in order to specify that the database must not create, instead it has to be derived from the existing database. Refer the sample code below. Here “@cds.persistence.exists” does that job

namespace hcm.empcntrl;

using { cuid, managed } from '@sap/cds/common';
@cds.persistence.exists
entity EMPCNTRL : cuid, managed {
    EMP_ID_EXT    : String(20);
    NAME          : String(255);
    EMAIL_ID      : String(255);
    DEPARTMENT_ID : String(36);
}

• Lets deploy now. Before, do not forget to run “npm install” to add all the dependent components.

• If required, you can add the code to convert the API output to OData V2 as well by adding the proxy….

• Right click on “MTA.yaml” and choose “Build MTA Project”.

• Wait until the build completes. Once the MTA Archive is ready, right click on the Archive file and choose “Deploy MTA Archive”.

• Wait until the deployment complete and application status turn to “started”. as this is a lengthy process.

• Once the deployment is success, pls check the HANA Database Explorer to validate the SINONYMS. Instead of creating a new Database, the application create a relationship with the SAP HANA native application using cross container access.

The post Modularize your CAPM Project appeared first on ERP Q&A.

To dive deeper, let’s start by understanding multitenancy and its benefits.

What is Multitenancy?

With multitenant architecture a single instance of an application serves multiple consumers. Application providers can own, deploy, and operate tenant-aware applications for multiple consumers. Consumers share resources, so they are used more effectively with reduced costs. The application consumers can launch the applications using consumer-specific URLs and can configure certain application features. SAP Business Technology Platform provides such a multitenant functionality.

There are 3 key terms with respect to multitenancy:

• Provider Account: This is a sub-account in an SAP Business Technology Platform Global account on which the application is deployed.
  
• Consumer/Subscriber Account: This can be a sub-account in an SAP Business Technology Platform’s Global account (owned by customer or SAP) in which the application is subscribed for the customer. This sub-account is owned by the customer.
  
• Tenant aware service – This is a service (SaaS) that separates the data of each tenant or subscriber.

With multitenant applications, you can:

• Isolate data securely for each tenant
  
• Optimize resources by sharing them among tenants.
  
• Update applications for all tenants in one step instead of approaching it one by one.

Steps to develop and deploy a multitenant application in Cloud Foundry are:

1. Create a multitenant CAP application in SAP BTP.
   
2. Deploy the Multitenant application to provider subaccount in Cloud Foundry.
   
3. Configure the approuter application.
   
4. Bind the multitenant application and approuter to xsuaa service instance.
   
5. Register application to SAP SaaS Provisioning service.
   
6. Application is available to consumers for subscription.

How can you achieve this using SAP Business Application Studio Productivity tools:

1. Create a CAP application, using SAP Business Application Studio and Enable SaaS multi-tenancy in Guide center.
   
2. Deploy the Multitenant application to provider subaccount in Cloud Foundry.
   
3. Application is available to consumers for subscription.

SAP Business Application Studio (Productivity Toolkit) provides a Collection of low code tools enabling developers to easily build full stack applications for desktop and mobile use.

Step1

Create a new project in SAP Business Application Studio using the Productivity Toolkit

Create the Cloud Application Programming data model, Service and UI:

Service

UI Application

After creating the application, go to the Guide Center from the left panel.

You will find a Guide “Enable SaaS in your Application”.

You will get a confirmation popup, select “Enable SaaS”.

Multi-tenancy will be enabled for your project.

Note: Once SaaS is enabled for your application, it cannot be reversed.

Now, you can see that your project is marked as a SaaS project in the project explorer.

To view the multitenancy code, click on the explorer on the left-hand side panel and go to “package.json”. You will see that by using SAP Business Application Studio to enable Multitenancy, following has been automated:

• Added package @sap/cds-mtxs to your project

• Added these lines to your project’s json to enable multitenancy with sidecar

• Added a sidecar subproject at mtx/sidecar with this json

• Modified deployment descriptors such as mta.yaml for Cloud Foundry

Step 2

As a next step, deploy your application to Cloud Foundry. You can do so by clicking the three dots besides project name.

Note: SAP HANA Cloud instance must exist already in your SAP BTP subaccount where you are deploying this application

Go to the dev space of your subaccount in SAP Business Technology Platform (SAP BTP) cockpit and you will find the following applications:

Step 3

Your service is now available on SAP BTP Cockpit service marketplace to be subscribed. Go ahead and subscribe to the application.

Please note that this application can be subscribed from subaccounts within the same Global account only.

Launch the application to check using the icon next to application name.

The post Multitenant SaaS application using productivity tools in Business Application Studio appeared first on ERP Q&A.

Complex OData Annotation Editing using CDS Graphical Modeler

In this blog post, we will show you how to create complex OData annotations for CDS projections in a separate app/annotations.cds file using the CDS Graphical Modeler so that as a user you don’t need to remember the complex details of the OData annotation terms.

Let’s say we have an ESPM model and we have a service model defined in a service CDS file that defined all the projections:

and we can open the ESPM service model using the CDS modeler:

and we want to annotate the projections and manage the annotations in a separate CDS file, for example, app/annotations.cds.

First create app/annotations.cds and open the file using the CDS modeler, and you will see an empty CDS model because the CDS file doesn’t contain any CDS objects:

Now let’s import the service model to the annotations.cds file. Click “Import” -> “External File” from the toolbar:

In the file selection dialog, select srv/cat-service.cds which is your service CDS file:

After the import is complete, the modeler will show the details of the imported service:

Let’s say we want to annotate the service entity “Customers” in the service, we click the entity “Customers” in the canvas and select “Pin to the Main Namespace” context menu. By doing so, CDS modeler will place the imported entity “Customers” to the main namespace so that we can directly operate on it:

After the “pin” is done, you will be able to see the entity “Customers” from the CatalogService directly in the main canvas in annotations.cds, just like any other regular entities:

Now since we want to annotate this entity, we click “Manage Annotation” context menu as shown in the above screenshot and the annotation dialog shows up:

And you can see both entity/projection as well as its properties are shown in the annotation editor, and you would be able to annotate both the entity and the properties directly from the app/annotations.cds file.

Now let’s show how to create complex OData annotations for this projection. First click “+” button and show all the annotation terms in the list for you to choose:

Let’s try to add term @ApplySupported from the Aggregation vocabulary defined in https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Aggregation.V1.html:

and try to provide the values for @Aggregation.ApplySupported term:

Please note that the annotation editor will take care of all the OData annotation schema itself and facilitate the user as much as possible, and the use just need to pick up the value from the list and doesn’t need to remember the details of the term definition.

Click “Update” button to close the dialog, and we can now check the app/annotations.cds:

You will see that this complex annotation “@Aggregation.ApplySupported” has been created successfully in the CDS file.

Now let’s reopen the annotation editor and choose “@Capabilities.ChangeTracking” for this entity:

Now provide values for this term:

until we get below:

and the app/annotations.cds:

You can see we can generate very complex OData annotations very easily in the annotations.cds file.

In addition to annotating the entity, we can also annotate its properties using either OData annotations or CAP annotations:

and app/annotations.cds has:

The post Complex OData Annotation Editing using CDS Graphical Modeler appeared first on ERP Q&A.