Deploy a simple SAPUI5 application connected to SCI mailing service via destination, to sap cloud platform cloud foundry environment

This blog will walk you though :-

1)Creating a simple SAPUI5 application.

2)Connecting the created application to a SCI mailing service through destination.

3)Deploying and testing the application in sap cloud platform, cloud foundry environment.

Pre-requisites:-

1)SAP cloud platform cloud foundry environment trial account.

2)Basic Cloud foundry info.

3)Cloud foundry CLI (command line interface). Please follow the CLI and NPM installation guide present on the Cloud foundry documentation.

4)NPM installer

5)SAP web IDE full stack for application development.(Normal sap webide service can also be used)

Step 1:- Lets start with creating a simple SAPUI5 application.

1. Login to your SAP cloud platform and open SAP WebIde full stack.

Please not that SAP webIde full stack is not a service present in service marketplace in cloud foundry environment of SAP CP. But you can use this service from the neo environment.

For this, please select neo trial env as shown in the below image.

2. After selecting the neo environment,navigate to the services tab and search SAP Web Ide full stack.

3) Select the service and click on “Go to Service” to launch the web ide.

4)Web Ide full stack allows you to create applications and has the feature which helps you to deploy applications to cloud foundry. However in this blog we will be using webide only as a app dev tool and will use CF CLI to deploy out application.

5)Once logged in the webIde, create a new project from template.

6)We will be creating an SAPUI5 application, so select “SAPUI5 application” from the options.

Click Next. Give the Project name and namespace. Here I have given the project name as generateEmailFromSCI and namespace as come.SCI.generateEmailFromSCI.

It is not necessary to give the same name and workspace. You can provide any name and namespace to the app.In case you are giving the same namespace you can directly just copy and paste the code that will be provided in the next steps.But if you are giving different namespace and name, make sure to change that in the code too according to your namespace and name.

Choose the view type you want. I have taken it to be xml as my preference.

Click on Finish. You will see a newly created SAPUI5 project in your workspace.

7)Now lets give a very basic view to our application.

Navigate to the View1.view.xml file in webapp/view folder.

Copy and paste this code there.

<core:FragmentDefinition
	xmlns="sap.m"
	xmlns:l="sap.ui.layout"
	xmlns:f="sap.ui.layout.form"
	xmlns:core="sap.ui.core"
	controllerName="come.SCI.generateEmailFromSCI.controller.View1">
	<VBox class="sapUiSmallMargin">
		<f:SimpleForm id="SimpleForm"
			editable="true"
			layout="ResponsiveGridLayout"
			title="Address"
			labelSpanXL="3"
			labelSpanL="3"
			labelSpanM="3"
			labelSpanS="12"
			adjustLabelSpan="false"
			emptySpanXL="4"
			emptySpanL="4"
			emptySpanM="4"
			emptySpanS="0"
			columnsXL="1"
			columnsL="1"
			columnsM="1"
			singleContainerFullSize="false" >
			<f:content>
				<Label text="EMail ID " />
				<Input id="name" value="" />
				<Label text="Message" />
				<Input value="">
				</Input>
				<Button text="Send"
						press="onPress"></Button>
						
			</f:content>
		</f:SimpleForm>
	</VBox>
</core:FragmentDefinition>

8) Now lets define the controller for out view.

Controller file would have all related functions to our view.

navigate to webapp/controller folder and copy and paste the below code in the View1.controller.js file.

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

	return Controller.extend("come.SCI.generateEmailFromSCI.controller.View1", {
		
		
		onPress:function(oEvent)
		{
			
			
				var emailID=this.getView().byId("SimpleForm").getContent()[1].getValue();
		var message = this.getView().byId("SimpleForm").getContent()[3].getValue();
		
	var sendThis =	{
	"EMAILID": emailID,
	"EMAIL": message};
		var url = "/sendMail";
			jQuery
					.ajax({
						async: false,
						crossDomain:true, 
						jsonp: false,
						type: "POST",
						data: JSON.stringify(sendThis),
						dataType: "json",
					
						
						contentType: "application/json",
						url:url,
						error: function(err) {
							sap.m.MessageToast.show("Mail sent Failure");
						},
						success: function(data) {
							var result;
							sap.m.MessageToast.show("Email has been sent successfully");
							
							
							
						}
					});
			
		}
		
		
		
		
		
		
		

	});
});

The onPress function is having the code logic of generating a POST AJAX call to our SCI service.

We will be describing the “sendMail” destination on the manifest.yaml file in later steps.

9) Since this is a static SAPUI5 application and not a dynamic Fiori launchpad app, we need to add approuter dependency to the application.

Navigate to package.json and add the dependency for app router.

Insert this code.

 "dependencies": {
    "@sap/approuter": "3.0.1"
  },
  "scripts": {
    "start": "node node_modules/@sap/approuter/approuter.js"
  }

So now your final package.json should look like this:-

{
  "name": "generateEmailFromSCI",
  "version": "0.0.1",
  "description": "",
  "private": true,
  "devDependencies": {
    "@sap/grunt-sapui5-bestpractice-build": "1.3.33"
  },
  "dependencies": {
    "@sap/approuter": "3.0.1"
  },
  "scripts": {
    "start": "node node_modules/@sap/approuter/approuter.js"
  }
}

9) Now we need to define the routes for the app router in xs-app.json.

By default this file wont be present in the project. So you need to create a new file in the project and name it xs-app.json.

10)Insert this code in the file.

{
  "welcomeFile": "/webapp/index.html",
  "authenticationMethod": "none",
   "routes": [
    {
      "source": "^/webapp/(.*)$",
      "target": "$1",
      "localDir": "webapp"
    },
	{
      "source": "^/sendMail(.*)$",
      "target": "$1",
      "destination": "sendMail",
	  "authenticationType":"none"
    }
  ]
}

This file is having routing info and the SCI destination info called sendMail is defined here.

11)Now our SAPUI5 app is ready to be deployed to the cloud foundry. There is mechanism to build and deploy from sap webide as well but I wont be taking that approach.Rather I will be using CF CLI as mentioned earlier. To export the project now, right click on the project and click on export.

The project will get exported to the local drive.

Step 2 :- Deployment of the SAPUI5 app in cloud foundry environment.

1) Extract the exported project in the local drive and place it in some folder.

I have done the same and extracted it in a folder named CF cloud apps.

2)After this we need to create a deployment descriptor for this project which is called manifest.yaml file.

This file will have all the relevant info required for this apps deployment.

Lets create a manifest.yaml file and place it in the same folder where the app is extracted.

Insert this code in the manifest file.

# ID: sendEmailwithHCI
# _schema-version: '2.0'
# version: 0.0.1

applications:
 - name: sendMailviaSCI
   buildpack: nodejs_buildpack
   path: generateEmailFromSCI   
   env:
    TENANT_HOST_PATTERN: '(.*).api.cf.eu10.hana.ondemand.com(.*)'
    destinations: >
      [
          {
          "name":"sendMail",
          "url":"<your service URL goes in here>",
          "forwardAuthToken": false
           }
      ]
      
      

     

So finally our project structure will look like this:-

If you don’t see node_modules folder then don’t worry about it. We will generate it in later steps.

3)Open the command prompt on the system and check whether you have CLI installed.

To check that, type command cf –version and check the version. If it shows info like in the below image, then you have CLI installed.

If you dont have CLI installed, you can follow the documentation of cloud foundry and get it installed from info provided there.

4)Make sure the proxy is not present when you try to connect. Take care of bypassing the proxy.

Open the command prompt and connect to the CF account.

To do so, use command CF login.

It will prompt for an API endpoint. Provide the API endpoint of your CF account. It can be found on the landing page of the SAP CF account.

After this it will prompt for Email and password. After successful login you will be able to see your CF account and its resources mentioned.

5)Navigate to the folder where you have kept your app and manifest.yaml file.

use command cd <folder location>

Now we need to download all the required npm libraries which will be kept in node_modules folder.

For that you need to make sure you have npm installed in your system.

(npm is a package manager for the JavaScript programming language. It is the default package manager for the JavaScript runtime environment Node.js)

To check that you need to run this command  in cmd :- npm -version

6)After this, navigate inside the project and run command npm install to download all the required libraries for node js. They will be downloaded in the folder called node_modules.

7) Now navigate back to the directory where manifest.yaml is present and run command cf push.

This will push the app to Cloud foundry account.

8)You can see the application in the cloud platform.

9)Click on the app URL . The app will open up. After this enter the email Id and message and click on send. This is generate a mail with entered message to the email ID.