Develop a full stack Business application with SAP Cloud Application Programming Model

This blog focuses on creating a full stack application using Develop a full stack Business application with SAP Cloud Application Programming Model – without writing much of the code.

What does SAP Cloud Application Programming Model offer?

“SAP Cloud Application Programming Model” is a new application programming. It focuses on the backend parts, while the frontend is addressed by Fiori. Full stack webIDE is the recommended tool set for development but other tools (STS, Eclipse etc) also can be used.

It integrates seamlessly with Cloud Platform to ease the tasks of deployment and consumption of platform services like App Router, UAA, Instance Manager, etc. Most of the configuration files — which frequently contain lots of rather technical and redundant information — are auto-generated from CDS models.

You can develop a full stack application – with database, oData service, UI, Fiori Launch Pad – all from a predefined template available in the full stack webIDE.

Please see the diagram below to understand how it works.

Let us get started with building the application using webIDE.

Part 1 – Developing the oData using SAP Cloud Application Programming Model

Create a “SAP Cloud Platform Business Application” from New->Project From Template.

Please tick the checkbox to use the HTML5 Repo. This is needed to deploy your UI to HTML repo so that it can be accessed by the cloud application.

We will talk about including the UAA in later steps, so we will not tick the checkbox for the UAA.

Please notice that HANA Database has been selected as DB.

Once you finish the configuration, the project will be created in the structure given below:

This template creates the db, service, app router and ui deployer by default.

You can change the cds file (data-model.cds in the db module) based on the entity you would like to create. You will also need to change the my-service.cds in the srv module.

You can as well continue with the default cds file to see how it works.

data-model.cds

namespace my.bookshop;

entity Books {
  key ID : Integer;
  title  : String;
  stock  : Integer;
}

my-service.cds

using my.bookshop from '../db/data-model';

service CatalogService {
  entity BookInfo {
    key ID : Integer;
    copiesSold: Integer;
  }
}

Build CDS for the project by selecting the project and clicking on build option on the toolbar.

On building cds, inside edmx folder Catalog.xml and csn.json files are generated. csn.json shows everything you have configured to for the service i.e. entities, properties inside entities etc.

If you check the mta.yaml, you will notice that all the modules have been included by default and also the resources needed have also been added to the mta file.

ID: BusinessApplicationCAP
_schema-version: '2.1'
parameters:
  deploy_mode: html5-repo
version: 0.0.1
modules:
  - name: BusinessApplicationCAP_appRouter
    type: approuter.nodejs
    path: BusinessApplicationCAP_appRouter
    parameters:
      disk-quota: 256M
      memory: 256M
    requires:
      - name: rt_BusinessApplicationCAP_appRouter
  - name: BusinessApplicationCAP_ui_deployer
    type: com.sap.html5.application-content
    path: BusinessApplicationCAP_ui_deployer
    requires:
      - name: dt_BusinessApplicationCAP_ui_deployer
  - name: BusinessApplicationCAP-db
    type: hdb
    path: db
    parameters:
      memory: 256M
      disk-quota: 256M
    requires:
      - name: BusinessApplicationCAP-hdi-container
  - name: BusinessApplicationCAP-srv
    type: java
    path: srv
    parameters:
      memory: 1024M
      disk-quota: 256M
    provides:
      - name: srv_api
        properties:
          url: '${default-url}'
    requires:
      - name: BusinessApplicationCAP-hdi-container
        properties:
          JBP_CONFIG_RESOURCE_CONFIGURATION: >-
            [tomcat/webapps/ROOT/META-INF/context.xml:
            {"service_name_for_DefaultDB" : "~{hdi-container-name}"}]
resources:
  - name: rt_BusinessApplicationCAP_appRouter
    parameters:
      service-plan: app-runtime
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service
  - name: dt_BusinessApplicationCAP_ui_deployer
    parameters:
      service-plan: app-host
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service
  - name: BusinessApplicationCAP-hdi-container
    properties:
      hdi-container-name: '${service-name}'
    type: com.sap.xs.hdi-container

After building the cds, please build the project by selecting it and clicking on build. This will create a file called BusinessApplicationCAP_0.0.1.mtar. This is the file which can be deployed on the cloud foundry and then you will have your oData service running.

When you right click on this mtar file, you will get an option to deploy the file to the Cloud Foundry. You can choose the org, space where you would like to deploy the project.

After deployment is successful, you will get the route from the srv application. You can access the oData service using the url provided.

Part 2 – Creating a UI with the oData created by SAP Cloud Application Programming Model

Create the UI module by right clicking on the project – New->HTML5 Module

You can select any template available. I have taken the example for List Report.

In the third step (Data Connection), you can see the option of choosing the entity you have defined in the same project.

You can continue to the next steps and select the entity which you would like to get the data from in the UI.

Please note that you can provide an association in entity (if you have the requirement to navigate to another entity from one). This is empty in the example since we have only one entity without any association.

Once you create the HTML5 module, UI module will be added in the project.

There are few additional information added to the mta.yaml file. Ui deployer will now have reference to the HTML5 module you just created.

- name: BusinessApplicationCAP_ui_deployer
type: com.sap.html5.application-content
path: BusinessApplicationCAP_ui_deployer
requires:
- name: dt_BusinessApplicationCAP_ui_deployer
build-parameters:
requires:
- name: ListReport
artifacts:
- './*'
target-path: resources/ListReport

UI module itself was added in the mta file.

 - name: ListReport
    type: html5
    path: ListReport
    build-parameters:
      builder: grunt
    requires:
      - name: srv_api
        group: destinations
        properties:
          forwardAuthToken: true
          strictSSL: false
          name: srv_api
          url: '~{url}'

You can already run the UI module as a web application (with mock server). The UI with the real data can be checked if the db you have created has some data already.

If you notice you will not have any columns in the list in the UI running. For that you will need to add an annotation file which will take care of the UI element configuration i.e. the properties in the filter, the columns in the list etc.

You can add an annotation file by right clicking in the UI module and selecting new->annotation file. This will add an entry to the manifest.json of the UI module.

The annotation file will be created inside the UI module but this will not works. It is something which still needs to be fixed. The annotation has to go under the webapp folder as shown.

With the above change you will also need to change the entry for annotation in the manifest.json.

Replace the data source block with the code given below. You can as well make the changes manually.

	"dataSources": {
			"mainService": {
				"uri": "/odata/v2/CatalogService/",
				"type": "OData",
				"settings": {
					"annotations": [
						"localAnnotations"
					],
					"localUri": "localService/metadata.xml"
				}
			},
			"localAnnotations": {
				"uri": "annotations/annotation0.xml",
				"type": "ODataAnnotation",
				"settings": {
					"localUri": "annotations/annotation0.xml"
				}
			}
		},

Annotation file (annotation0.xml) can be edited manually or with the annotation modeler.

You can add any element available in the option. I have added one smart filter and two columns in the list from the oData service.

Annotation file will have the content as below when you open it using the Code Editor.

<edmx:Edmx xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Aggregation.V1.xml">
		<edmx:Include Alias="Aggregation" Namespace="Org.OData.Aggregation.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Authorization.V1.xml">
		<edmx:Include Alias="Auth" Namespace="Org.OData.Authorization.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Capabilities.V1.xml">
		<edmx:Include Alias="Capabilities" Namespace="Org.OData.Capabilities.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470974/Common.xml?api=v2">
		<edmx:Include Alias="Common" Namespace="com.sap.vocabularies.Common.v1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470971/Communication.xml?api=v2">
		<edmx:Include Alias="Communication" Namespace="com.sap.vocabularies.Communication.v1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Core.V1.xml">
		<edmx:Include Alias="Core" Namespace="Org.OData.Core.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Measures.V1.xml">
		<edmx:Include Alias="Measures" Namespace="Org.OData.Measures.V1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://wiki.scn.sap.com/wiki/download/attachments/448470968/UI.xml?api=v2">
		<edmx:Include Alias="UI" Namespace="com.sap.vocabularies.UI.v1"/>
	</edmx:Reference>
	<edmx:Reference Uri="https://oasis-tcs.github.io/odata-vocabularies/vocabularies/Org.OData.Validation.V1.xml">
		<edmx:Include Alias="Validation" Namespace="Org.OData.Validation.V1"/>
	</edmx:Reference>
	<edmx:DataServices>
		<Schema xmlns="http://docs.oasis-open.org/odata/ns/edm">
			<Annotations Target="CatalogService.BookInfo">
				<Annotation Term="UI.SelectionFields">
					<Collection>
						<PropertyPath>ID</PropertyPath>
					</Collection>
				</Annotation>
				<Annotation Term="UI.LineItem">
					<Collection>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="ID"/>
						</Record>
						<Record Type="UI.DataField">
							<PropertyValue Property="Value" Path="copiesSold"/>
						</Record>
					</Collection>
				</Annotation>
				
			</Annotations>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>

Adding all the elements to the annotation file will complete the configuration for the UI. The annotation here is purely from the UI side. Please note that these annotation can also be configured from cds files.

Part 3 – Deploying and Running the UI application

Once you build the project after all the modules have been added, you can deploy the mtar and routes will be created for the UI as well as service module.

You can use the routes to access the UI from the Could Foundry space where you have deployed the mtar.

You will not need any authorization to access the oData (no authentication) or the UI (your SSO is sufficient).

Note: If you had ticked on the UAA while creating the application, an instance of xsuaa will be created and your srv module will be bound to it. This will not allow you to access the oData service in the browser since you will need the token to access the oData. You can generate the token once you have deployed the mtar to CF (from the VCAP of the srv module).

Please see the below blogs for more details about SAP Cloud Application Programming Model :-

https://blogs.sap.com/2018/08/24/create-a-destination-to-access-a-cf-odataservice-secured-with-oauth2/

https://blogs.sap.com/2018/12/02/build-deploy-and-run-a-full-stack-sap-cloud-business-application-with-fiori-launchpad./

https://blogs.sap.com/2018/12/02/token-exchange-from-fiori-launchpad-flp-to-a-business-service-in-sap-cloud-foundry/