Wednesday, 21 October 2020

SAP FIORI standard application extension part I

In this tutorial we will learn how to extend the SAP Fiori standard application and the steps for app extension are as follows:

The implementation and extensibility information of every standard app is provided in the FIORI apps library. We can check the name of BSP application and the extension points listed in the application information provided on the FIORI app library.


Check LPD_CUST Role and SAPUI5 application name under Technical configuration section.


On the SAP system, execute transaction LPD_CUST for Launchpad application details.
Search the LPD_CUST value for the application noted earlier in previous step and double click on the searched selected line containing app info.


Double click on Track Purchase Order, the application to be extended and make a note of the URL value specified in the Application Parameter section.


Now download the source code of the application, go to transaction SE38 and execute the program /UI5/UI5_REPOSITORY_LOAD. Specify the UI5 name for the application, select the download radio button and execute the program. Scroll to bottom and click on the download link to export the source code of the application.



SAP FIORI Types of Extensions

FIORI User Interface extensibility can help modify SAP Fiori standard applications as per customer’s needs without altering their source code.

To enable extensions, SAP has provided extension points in the standard code of the application which can be used to customize the apps.

There are four properties which can be used to extend the standard FIORI application– 
  • Sap.ui.viewExtensions: It provides custom view content at a specified extension in standard SAP delivered application. User can add new fields or images at extension points.
  • Sap.ui.viewModifications: This is used for overriding certain control properties of SAP-delivered application. The user can use it to modify, hide or show the existing element.
  • Sap.ui.viewReplacements:  This is used for replacing standard SAP-delivered view with custom view. User can use this property if there is no extension point provided and build a separate view with the required modifications.
  • Sap.ui.controllerExtensions: Replacing standard SAP-delivered application controller with custom controller. User can change the business logic using this property if required.

Tuesday, 20 October 2020

Prerequisites for extension of standard SAP Fiori applications

  • Download and install eclipse IDE. 
  • Install SAP Plugins on Eclipse using the link https://tools.hana.ondemand.com/version -name. 
  • For eclipse versions newer than Juno the toolkit might not install due to Graphiti version error. To resolve this error install Graphiti from https://tools.hana.ondemand.com/juno and then install the toolkit
  • Check for installations before proceeding.
  • Open eclipse and go to Help -> About Eclipse and then click on Installations details to check all installed plugins.


Friday, 16 October 2020

How to create HTML5 Module SAP Cloud Foundry

In this tutorial we will explain how to create and run the HTML5 module within a MTA project in SAP Cloud Foundry environment.  

  • Open Web IDE for trial account and right click on the workspace root folder.
  • Choose "New" and click on "Project from Template"

  • Pop up with Template Selection screen appears, select Multi Target Application project and choose Next.

  • Enter the Project Name and choose Next.


  • Enter the description and select the check box for "Use HTML5 Application Repository", press next and click finish. It will create the MTA project with a name "HTML5_tutorial".

  • Right click on the MTA project and choose "New" and then select "HTML5 Module".

  • Template selection pop will appear, select SAP UI5 Application and click on Next button.

  • Enter SAP UI5 Application name in the Module Name field and enter demo.ui in the Namespace field and click next.

  • Select XML from the View Type dropdown and enter the View Name as "First View" and press next and finish.


  • It will create the UI5 application with the name "HTML5App" in HTML5 module. In the View folder open the FirstView.view.xml file and create the text element in the content as per below screenshot and save the changes.

  • We have created our first sample Hello World UI5 application. To test the application right click on the created UI5 application "HTML5App" and choose "Run" and then "Run as Web Application". A pop will appear to choose the file to run, select the index.html file and press OK




  • It will open up the new browser tab displaying "Hello World" text.

Thursday, 15 October 2020

10 Seconds to create and deploy sample Node.js application SAP Cloud Foundry

In this tutorial we will learn how to create and deploy the sample Node.js application on SAP Cloud Foundry. Follow the below mentioned steps to create your first Node.js module in 10 seconds.

Create the MTA project, refer below mentioned blog for details.

SAP Cloud Foundry MTA project

  • Now we will create the Node.js module. Right click on the MTA project folder and choose "New" and select  "Node.js Module".


  • Enter the Module Name and press Next.


  • It will specify the version as "1.0.0" and Main JS file as "server.js". Enter the description and press Next and finish.


We can see that Node Module folder is created within the MTA project. Open the project.json file and provide the express dependency with version as "^4.0.0". We will be using express framework in node application that provides a robust set of features for web and mobile applications.

"dependencies": {
  "express": "^4.0.0"
  }, 


Within the Node Module folder we have server.js file which is the starting point of the application. In this file we will do the configuration so that application will start listening to the server ports and give the response back to the client requests.

"use strict";
const express = require('express');
const app = express();
var port = process.env.PORT || 3000;

app.get('/', function (req, res) {
 res.send("Hello World\n");
});
app.listen(port);

console.log("Server listening on port %d", port); 


We have successfully created our first Node.js application. Now to run the application, right click on the Node Module folder, choose "Run" and click on the "Run as Node.js application". It will build task for npm install and run the application.

Nodejs build task "npm install" started
Service provisioning started
Service provisioning finished
Nodejs build task "npm install" finished successfully
Application is starting
Application is running
> Node_Tutorial@1.0.0 start /home/vcap/app
> node server.js
Server listening on port 3000

It will also generate the URL so that we can test the application in the browser or use it as REST API in any application.

 
We might face error while running the Node.js module in case the cloud foundry setting are not configured for the account endpoints. 

Request failed: error URI: /di/runner/run?project=/first_mta_project/Node_Tutorial
Unable to run module.
Running module /first_mta_project/Node_Tutorial failed. See console logs for more details. Request failed: error URI: /di/runner/run?project=/first_mta_project/Node_Tutorial

Follow below mentioned steps resolve the error.
  • Click on the settings icon in the left hand side panel and select "Cloud Foundry" from Workspace Preferences.
  • Go to trial account home page in cockpit to check the API endpoints and the select the corresponding API from the dropdown.
  • It will ask for Email Id and Password and on successful authentication, it will populate the Organization and and Space.
  • Click Save and re run the Node.js application.