Skip to Content
Technical Articles
Author's profile photo Neha Soni

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 RouterUAAInstance 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/

Assigned Tags

      8 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Martin Koch
      Martin Koch

      Dear Neha

       

      thanks for the great post. I get the UI module running from WebIDE, but when deploying the MTA to Cloud Foundry the appRouter returns a 404 (Not Found) error. Can you show or tell me which route must be used to launch the Fiori App ? This is also missing in the official documentation.

      It would also be great to see the UAA integration. We have developed a handfull of applications on this model that we would like to publish in the SAP App Center, but we are failing on this two points...

      THANKS!

      Best regards,

      Martin

      Author's profile photo Tejas S. Gargeya Sastry
      Tejas S. Gargeya Sastry

      Hi Martin,

      Im guessing you're simply launching the approuter root URL and getting a 404 not found. So pick the appRouter URL from you cockpit and append "ListReport" to it.

      eg/-

      if approuter url is:
      https://domain.app.ondemand.com/

      then run

      https://domain.app.ondemand.com/ListReport

       

      If this is not the issue then you have to give more details on the network request that returns a 404.

       

      About the UAA you'll have to enable it within the app. however, its difficult to explain it here in the comments. Please feel free to contact me directly.

       

      Regards,

      Tejas

      Author's profile photo Martin Koch
      Martin Koch

      Hi Tejas,

      thanks for your reply.

      I've created a new example now. UAA and HTML5 respository is enabled. The HTML5 Module is named ui. The structure of my project is shown on the following screenshot:

       

      My HTML5 Module is of type SAPUI5 Application - so no Fiori Elements. Creating the mtar works fine. Deployoment is also working.  My app router URL is https://p<myPUserId>trial-trial-dev-ksicdemo-approuter.cfapps.eu10.hana.ondemand.com

      if i call the app router directly or if i call the approuter as https://p<myPUserId>trial-trial-dev-ksicdemo-approuter.cfapps.eu10.hana.ondemand.com/ui i get a 404. For me it seems that the ui route is not known by the appRouter.

      Best regards,

      Martin

       

       

      Author's profile photo Christian Weiss
      Christian Weiss

       

      Hallo Martin,

      yesterday a new Blog was released which shows the technical details https://blogs.sap.com/2018/12/11/programming-applications-in-sap-cloud-platform/  and how your xs-app.json needs to be defined.

       

      Best regards, Christian

      Author's profile photo Martin Koch
      Martin Koch

      Hallo Christian,

      thanks for the Link to the Blog. The new programming model is great! Whats very interesting from my point of view is, that when i use the ListReport Template it seems that the routes are configured correctly, but when i use the SAPUI5 Application Template there are no routes added at all...

      I hope that we get our applications up & running soon. We will publish them in the SAP App Store as soon as they are ready.

      Best regards,
      Martin

      Author's profile photo Neha Soni
      Neha Soni
      Blog Post Author

      Hi Martin,

      Hope your issue is resolved.

      About the route, we did have to create it manually (for list report) for the tenant following the pattern we have provided in the mta.

      - name: CAP_FLP_APP_appRouter
          type: approuter.nodejs
          path: CAP_FLP_APP_appRouter
          properties:
            SAP_JWT_TRUST_ACL:
              - clientid: '*'
                identityzone: '*'
            TENANT_HOST_PATTERN: '^(.*)-bl-cap-flp.cfapps.sap.hana.ondemand.com'

      But this was for a multi-tenant application.

      If your xs-app.json is configured as per the latest blog suggested by Christian, it should be working.

      Sorry, I missed to get any notification for the blog!

      Thanks,

      Neha

      Author's profile photo Tejas S. Gargeya Sastry
      Tejas S. Gargeya Sastry

      Seems like the issue is resolved with Christian's response. Is that right?

      Author's profile photo Vijay Singh Rajput
      Vijay Singh Rajput

      Hi Neha,

      I tried to follow your blog, but seems like service connection to CAP Service is not available now HTML module template if we have used HTML5 repository service. Do we need to use Destination service to bind the UI to Service (within same application).

      Kindly help.

       

      Best Regards,

      Vijay