Overview
This is the 5th of 7 blog posts which is part of the SAP Business Technology Platform Showcase series of blogs and videos. We invite you to check this overall blog, so you can understand the full end-to-end story and the context involving multiple SAP BTP solutions.
In this blog post, we will cover on how to create a SAP Cloud Application Programming Model project, which will manage additional data values, working on the back-end application (HDI providing oData services) as well as the front-end SAP Fiori/SAPUI5 application, deployed on dedicated services in SAP BTP.
Below you can see this is the 5th step of the “Solution Map” prepared for the journey on the referred overall blog:
SAP BTP Showcase – Overall Technical Architecture
For the development, we will be following the SAP Cloud Application Programming model - a framework of languages, libraries, and tools for building enterprise-grade services and applications.
And the tool we will use is SAP Business Application Studio to build our cloud application - SAP Business Application Studio is a new SAP Cloud Platform service in SAP Cloud Foundry which offers a modern development environment tailored for efficient development of business applications for the SAP Intelligent Enterprise.
There are 2 steps to this application development:
- First we create a Cloud Business Application to create a DB table (to be created in a container of SAP HANA Cloud Instance) and OData service to expose this table and deploy it on SAP BTP Core on Cloud Foundry. With this method, data is exposed using OData v4.0 as opposed to the traditional xsodata method, where data is exposed using OData v2.0.
- Then we create an SAP Fiori Application consuming the OData service to perform CRUD operations on the table.
After the completion of the tutorial, you should be able to build an application where you see this kind of the output:
Prerequisites
- SAP Business Technology Platform (SAP BTP) Core Account on Cloud Foundry
- SAP HANA Cloud instance on SAP BTP Core space
- Subscription of SAP Business Application Studio
Solution
Launch the SAP Business Application Studio from the SAP BTP Core sub-account subscriptions:
For the 1st Step of creating DB table and the OData Service:
Create a new Dev space in SAP Business Application Studio of type "SAP Cloud Business Application" and SAP HANA Calculation view editor extension. A dev space is a development environment with the tools, capabilities, and resources needed for developing your application. Choosing a specific type Dev Space allows us to use the features of that type by default - it is possible to also add extensions later to your Dev Space - Dev Spaces in SAP Business Application Studio
After some time the Dev space will be created and will be in a Running State:
Click on the Dev space to launch the SAP Business Application Studio development IDE which looks like the following:
At the bottom of the above screenshot, we see it says "The organization and space in CF have not been set". We click on that to set the cloud foundry org and space (the same can also be launched from the toolbar on top using View -> Find Command), we will need the cloud foundry endpoint and the logon credentials to set it:
Once we set all the details, we can see at the bottom of the SAP Business Application Studio that the Cloud Foundry Org and Space has been set:
From the Welcome Page of the SAP Business Application Studio, choose to create a new "Project from Template" and choose "CAP Project" from the list.
Enter the CAP Project details (Name, type - Node.js and the 2 check boxes for SAP HANA Deployment and MTA Deployment):
Open the Project in a new workspace once created (option will be highlighted at the bottom), and the project structure would contain - the app folder (for any application development), db folder (db artifacts) and the srv folder (for services creation).
In the Explorer, you should also see "SAP HANA PROJECTS" section, which will show the details of the db aterfacts and the SAP HANA HDI Container where the db objects will be deployed.
The generated mta.yaml (The development descriptor (mta.yaml) is used to define the elements and dependencies of an XS advanced-compliant multi-target application (MTA)) would contain a modules section for SERVER MODULE and the SIDECAR MODULE and a resources section (specifies something that required by the MTA at run time but not provided by the MTA, for example, a managed service or an instance of a user-provided service).
In the resource section, it contains the name of the HDI container that will be needed to deploy the DB artifacts, you can modify the section to add a schema configuration to avoid creating the objects in a generated schema name:
resources:
# services extracted from CAP configuration
# 'service-plan' can be configured via 'cds.requires.<name>.vcap.plan'
# ------------------------------------------------------------
- name: csm-demo-202002-plan-srv-db
# ------------------------------------------------------------
type: com.sap.xs.hdi-container
parameters:
config:
schema: CSM_DEMO_SRV_SCHEMA
makeUniqueName: false
service: hana # or 'hanatrial' on trial landscapes
service-plan: hdi-shared
properties:
hdi-service-name: ${service-name}
Now we will create objects in our database model. For that we will create a file in the db folder with an extension "cds". (Note: The SAP Cloud Application Programming Model framework features a mix of proven and broadly adopted open-source and SAP technologies. It mainly uses Core Data Services (CDS) as the universal modeling language for both domain models and service definitions)
I have named my file as database.cds
Create an entity in the CDS file and also give a namespace - the db artefact that will be created on SAP HANA will have the namespace and the entity name with dots converted to underscores. We then call the library @sap/cds/common and use the cuid aspect. It automatically defines an ID column for us in the entity created. An entity defined in SAP Cloud Application Programming will be deployed as a table in the database.
namespace csmdemo.db;
using cuid from '@sap/cds/common';
entity ENERGY_PRODUCTION_PLAN_VALUES:cuid{
DAY: Integer;
MONTH:Integer;
YEAR: Integer;
WEEKDAY:Integer;
WEEKNUM:Integer;
WEEKEND_YN:String;
HOUR:Integer;
MINUTE:Integer;
BIOMASS_PROD_PLANNED:Double;
HYDROPOWER_PROD_PLANNED:Double;
WIND_OFFSHORE_PROD_PLANNED:Double;
WIND_ONSHORE_PROD_PLANNED:Double;
PHOTOVOLTAICS_PROD_PLANNED:Double;
OTHER_RENEWABLE_PROD_PLANNED:Double;
NUCLEAR_PROD_PLANNED:Double;
BROWN_COAL_PROD_PLANNED:Double;
BLACK_COAL_PROD_PLANNED:Double;
NAT_GAS_PROD_PLANNED:Double;
PUMP_STORAGE_PROD_PLANNED:Double;
OTHER_CONVENTIONAL_PROD_PLANNED:Double;
EN_PROD_PLANNED:Double;
}
Now we create a CDS file in the srv folder to define the OData service, I called mine as energy-production-plan-value.cds
In the file, we create a service. To create the service we use the entity created in the db folder and we point to that file name using the "using" keyword. In the service definition below, we have used the SAP Fiori Element annotations - SAP Cloud Application Programming provides out-of-the-box support for SAP Fiori Elements frontends (CAP Serving Fiori UIs), we can add SAP Fiori Elements annotations to the service definitions. The annotations can be skipped if you do not want to create a SAP Fiori Frontend and just want to use the OData service as a GET and POST the data of the table.
using csmdemo.db as db from '../db/database';
service ProductionPlanValuesService {
entity Values as projection on db.ENERGY_PRODUCTION_PLAN_VALUES;
}
annotate ProductionPlanValuesService.Values with @(
UI: {
HeaderInfo: {
TypeName: 'Value',
TypeNamePlural: 'Values',
Title: { Value: MONTH },
Description: { Value: DAY }
},
SelectionFields: [ MONTH, DAY, HOUR, MINUTE ],
LineItem: [
{ Value: YEAR },
{ Value: MONTH },
{ Value: DAY },
{ Value: HOUR },
{ Value: MINUTE },
{ Value: EN_PROD_PLANNED },
],
Facets: [
{
$Type: 'UI.CollectionFacet',
Label: 'Value Info',
Facets: [
{$Type: 'UI.ReferenceFacet', Target: '@UI.FieldGroup#Main', Label: 'Main Facet'}
]
}
],
FieldGroup#Main: {
Data: [
{ Value: YEAR },
{ Value: MONTH },
{ Value: WEEKDAY },
{ Value: WEEKNUM },
{ Value: WEEKEND_YN },
{ Value: DAY },
{ Value: HOUR },
{ Value: MINUTE },
{ Value: EN_PROD_PLANNED },
]
}
}
);
On SAP HANA Cloud, CDS models are deployed through the hdbtable and hdbview formats instead of hdbcds. So we edit our package.json to set the deploy-format to hdbtable.
Add the following line in the "cds" section of package.json.
"hana" : { "deploy-format": "hdbtable" }The cds section of package.json file would look like the following:
"cds": {
"requires": {
"db": {
"kind": "sql"
}
},
"hana" : { "deploy-format": "hdbtable" }
}Now, we are done creating the db entity, service and also prepared our project for SAP HANA Cloud deployment by adding the changes in package.json.
Now we deploy our application to SAP BTP Core on Cloud Foundry, for that open a new terminal from the toolbar: Terminal -> New Terminal
Enter the following commands:
- export NODE_ENV=production
- cds build/all --clean
This command will generate a gen folder for the db and the srv with the respective objects that will be deployed.
- cf create-service hana hdi-shared csm-demo-202002-plan-srv-db
This command will create a hdi-container in the SAP HANA Cloud, the creation of this service can also be performed in SAP BTP Core Space -> Service Instances
Or if you modify the mta.yaml file to point to an existing HDI container, this step need not be performed.
- cf push -f gen/db -k 256M
This command will push the gen/db folder to cloud foundry – this will create an application (csm-demo-202002-plan-srv-db-deployer) in the cloud foundry space and also create the artifacts in the HDI container.
If the above step doesn't complete successfully for some reason, you can look at the application logs using the following command which will help you to get more details on the issue:
- cf logs csm-demo-202002-plan-srv-db-deployer --recent
csm-demo-202002-plan-srv-db-deployer is the application name (should be modified according to your project name)
Next we need to push the gen/srv folder using the following command
- cf push -f gen/srv --random-route -k 320M
The above command also generates a random url to launch the application (odata service)
Here also, if the push fails for some reason, the logs can be checked using: cf logs <app_name> --recent
Now that the applications are deployed, we can go to our SAP BTP Core Space and look for the applications:
You can click on the "srv" application to get the url (from Application Routes section)to launch the application:
The above url will point to the Service we created on the entity:
Now that we have our OData service, we need to create a destination using the Destination Service in SAP BTP Core Cloud Foundry to be able to consume this service in our SAP Business Application Studio SAP Fiori Application. Using Destination Service in SAP BTP Core, you can connect applications hosted on SAP BTP Core with other applications or DB using HTTP, LDA, MAIL & RFC.
There is interesting on Using Destination Service in Cloud Foundry by Marius Obert which has a detailed explanation of the purpose of a destination.
Create a destination in the Cloud Foundry Sub-Account, enter a name for the destination, add the OData Service url and choose the Authentication Type - here i have NoAuthentication for simplicity purpose but needs to be changed as per application needs.
The following 3 additonal properties would be needed for this service to be visible while create the SAP Fiori application:
- HTML5.DynamicDestination = true
- WebIDEEnabled = true
- WebIDEUsage = odata_gen,odata_abap,bsp_execute_abap,ui5_execute_abap,dev_abap,odata_gen,bsp_execute_abap
Now we have the Table created on SAP HANA Cloud Instance, and the OData service which can be used to perform GET and POST operations on the table.
Now we move on to the 2nd step to create a SAP Fiori Application.
Here I wouldn't be creating a full SAP Fiori application, but share the initial steps to be be able to consume the service and build your application.
Create a "SAP Fiori" Dev space in SAP Business Application Studio.
Click on the Dev Space that got created to launch the SAP Business Application Studio.
Here also we set the Cloud Foundry Org and Space like we did in the 1st step. Then we create a "Project from Template" using the Welcome Page and choose "SAP Fiori Freestyle Project":
In the Next page, we choose the target running environment as Cloud Foundry and the template we use is "SAP Fiori Worklist Application ODataV4", we choose ODataV4 because the OData service that we created using the 1st step is version 4.0.
Then enter the project name in the next step and choose "Standalone Approuter" for the Approuter Configuration.
Then choose the Application Title and the other options (Standalone App and Requests grouped in a single batch request):
Then in the next step of Consuming Services, choose "My SAP Systems" and in the sources it will list you the odata service destination that was created in the SAP BTP Core sub-account:
Once you choose the appropriate source (OData destination), it will ask you to enter the path for the OData service, since the OData service destination already has the url, here we just point to the path of the service:
In the Next Page of Object Collection, you will get a drop down of all the entities available inside the service and you can enter all the details as appropriate.
And then the project get created and you can open it in a new workspace.
The project structure will have 2 folders - one for the application that will be deployed on SAP BTP Core with a suffix of -approuter in its name (in this case csm-demo-202002-plan-fiori-approuter) and the other for the HTML5 module:
For the application to get deployed on SAP BTP core, we need to add a line in the xs-app.json file of the approuter folder.
"welcomeFile" : "<namespace_name><HTML5 ModuleName>"
{
"authenticationMethod": "none",
"welcomeFile": "nsEnergyProductionPlan",
"routes": []
}Based on the OData service details we provided during the project creation, we can see in the manifest.json file (at EnergyProductionPlan -> webapp) the OData Service path has been added to the resources:
Also, In the Worklist.view.xml at EnergyProductionPlan -> webapp -> view, we will be able to see that the Table Items are bound to the OData service Entity that we chose (Values in this case):
To do a post operation on the table using the OData service, we can do POST operation on the relative url and execute it using the ajax call:
Once UI development is done, we can now deploy the application to SAP BTP Core.
To do that, first build the mta.yaml file (right click on the mta.yaml file -> Build MTA), this step will open a terminal and build the mta file which will then generate a mtar file in mta_archives folder.
After this, we then deploy the mtar file. Do to the generated mta_archives folder, right click on the mtar file -> Deploy MTA Archive
The above step also will run certain steps in the terminal and will take a couple of minutes. Once the steps are completed, you would see a message "Terminal will be reused by tasks." in the terminal.
Now that the application is deployed successfully, we can go to the SAP BTP Core space and check for applications:
Once you click on the name above, you will get the url to launch the application and we are done with creating a SAP HANA Cloud Native SAP Fiori Application.
The project source code is available in the official Github SAP-samples and can be cloned in SAP Business Application Studio, so you can easily reproduce this deployment in your own landscape.
To be able to execute the above code in your cloud foundry, you will have to create a destination in your cloud foundry account and the name of the destination can be found in the xs-app.json file of the HTML5Module that was created:
And the url that you need to create the destination should be application url that you get after deploying the srv application.
Hands-on Demonstration
Now that you understand the complete scenario, you can follow-up on watching this detailed technical video, and check how this project can be implemented.
Summary
So we have now been able to successfully create a Cloud Business Application project to create and deploy SAP HANA Cloud Tables and also expose them OData service.
We then created a destination for the OData service in SAP BTP Core for it to be consumable in our UI application.
We then created a SAP Fiori Application consuming the OData service and perform GET and POST operations on it.
Thanks and Regards,
Radha Fogla
- SAP Managed Tags:
6 Comments
