How to connect a Fiori Elements application with SAP S/4HANA Cloud for projects, collaborative project management

[PeterRothDE]

Introduction

SAP S/4HANA Cloud for projects, project collaboration (f.k.a SAP Project Intelligence Network) is a cloud-based solution for project collaboration between internal and external project partners. It offers capabilities to share any kind of information and acting as a single source of truth for all project related business information like documents, tasks, issues, … .

SAP S/4HANA Cloud for projects, project collaboration also provides APIs (details see SAP API Hub)  which can be used to integrate with other applications or to extend the core capabilities offered.

In this blog I’ll explain how a Fiori application can be connected with SAP S/4HANA Cloud for projects by using public APIs.

 

Prerequisites

The following prerequisites have to be fulfilled.

• SAP Business Technology Platform (BTP) account is needed


• A BTP subaccount which is setup with SAP Business Application Studio (BAS) (Setting up BAS in your subaccount)


• A BTP subaccount which is configured for SAP S/4HANA Cloud for project (C4P) (Setting up C4P)


• Necessary authorizations to manage the subaccount(s)

 

Implementation / Configuration Steps

As an example for this step by step description we are using the public project service API to which the list of projects shall be read.

Summary

1. Prepare your subaccount and setup API service instance (described in a related blog post)


2. Setup BTP destination for the API call


3. Create a SAP Fiori application in the SAP Business Application Studio (BAS)


4. Build, deploy and test your application

(1) Prepare your subaccount and setup API a service instance

For these step please follow the configuration steps 1-4 which are documented in the blog post "How to consume SAP Project Intelligence Network APIs"

1. Enable Cloud Foundry in the subaccount


2. Create a service instance of SAP PIN API service


3. Create a service key


4. Assign roles

Once you have successfully executed the above steps then you are ready to setup the destination as to be able to consume the API endpoint from your Fiori application.

(2) Setup BTP destination for the API call

Destinations are provided on BTP to be able to connect and access other services via available public APIs. It is important to understand what kinds of authorization types are offered by the service itself. Based on available options and your use case the proper authentication type has to be selected and configured in the destination.

To call the API from the Fiori application a destination has to be setup.

(a) Open your subaccount that is subscribed to SAP Business Application Studio

<global-account>/<subaccount> Destinations

(b) Create a new destination for your API endpoint you want to call from your application. (see Create HTTP Destinations)

Name	Unique name w/o blanks
Type	HTTP
URL	https:<apiURL>/api-endpoint apiURL - can be retrieved from the API service instance credentials api-endpoint - can be retrieved from SAP API Hub. In this example to call the project service API it is /ProjectService/v1 https:<apiURL>/ProjectService/v1 Details see below "Information from the API service instance credentials"
Proxy Type	Internet
Authentication	OAuth2UserTokenExchange For business user access this oauth2 flow has to be selected. For technical user access see additional chapter further down in this blog.
Use mTLS for token retrieval	no
Client ID / Client Secret	Can be retrieved from the API service instance credentials Details see below "Information from the API service instance credentials"
Token Service URL Type	Dedicated
Token Service URL	https://<uaa.url>;/oauth/token The <uaa.url> can be retrieved from the API service instance credentials. Details see below "Information from the API service instance credentials"

Additional Properties

These properties are needed as to get the destination visible and executable in BAS.

HTML5.DynamicDestination	true
WebIDEAdditionalData	full_url
WebIDEEnabled	true
WebIDEUsage	odata_gen

Information from API service instance credentials

For the authentication part of the destination configuration you have to retrieve the from the API service instance credentials file. Please treat API credentials in a secure way so that only authorized persons are get access to them.

The credentials are stored in the credentials JSON file which is located at the following path in the BTP Cockpit.

Global account name / Subaccount name  / Services / Instances and Subscriptions

Select the API service instance and open the details dialog. With the "View Credentials" button you can open the Credentials JSON file. (see screenshot)

API service instance credentials

 

Destination setup

For more details please read Connecting to External Systems on help.sap.com

Remark: The response from the "Check Connection" is not really giving a mature information whether the destination is configured correct or not. 

 

(3) Create a SAP Fiori application in the SAP Business Application Studio (BAS)

In this example now UI5 / Fiori or Javascript programming is needed. The very basic application is just using available Fiori application template wizards and focusing on the configuration steps needed to get the destination configured so that the related data are displayed in the auto-generated Fiori application.

(a) Open the SAP Business Application Studio and New Project From Template

There are multiple options to open up the template wizard. Experienced developers will probably use the command line. In this example the BAS menu is used.

Help / Get Started / New Project from Template

Create new project from template

(b) Create a SAP Fiori - List Report application

The SAP Fiori List Report application is a very simple application which displays all read data in a simple table. In addition to default attributes which are pre-selected all metadata are read and can be displayed in the result table.

BAS Wizard - Select application template (SAP Fiori application)

BAS Wizard - Select application type (List Report Page)

(c) Configure the data source

The data source is the most important part of the application configuration. Here you have to choose the proper destination which have been created and configured in an earlier step.

In the following table you see how to setup the attributes.

Data Source	"Connect to a System"
System	Select the destination which have been created step (2) Setup BTP destination for the API call C4P-CoPM-API-ProjectService
Service	Will automatically populated once Data Source and System is properly defined.

(d) Entity Selection

In the entity section the metadata of the in the previous step selected destination are displayed. APIs can offer one or multiple endpoints. When you open the field dialog you see all the entities / business objects which are provided by the destination.

For this example choose the "Projects" entity and keep navigation entity "None".

BAS Wizard - Entity Section

 

(e) Project Attributes

Project attributes are to describe the project itself. The attributes are used in BAS to name the module. Additionally the module name and the application namespace are used to name the application and the deployment archive.

The namespace is optionally. However, it is good style to define a name space as to describe to which area the app belongs to and to ensure that the application name is unique. The application name is a combination of the application namespace + the module name

Please maintain the mandatory attributes

• Module name and


• Project folder path (to the MTA project)

All other attributes are optional and not relevant for the demonstration of the connectivity.

BAS Wizard - Project Attributes

 

(f) Deployment Configuration

If you deploy the module independently it is important to configure the deployment configuration. This configuration is stored in the mta.yaml file of the module. All configurations needed to run the application are stored in the mta.yaml.

Choose "Cloud Foundry" as target and as Destination name the destination which have been created step (2) Setup BTP destination for the API call 

and click "Next".

BAS Wizard - Deployment Configuration

 

(g) Fiori Launchpad Configuration (optional)

Define a name for the semantic object, action and a title. and click "Finish"

Now the application is going to be created

BAS Wizard - FLP Configuration

 

Now the configuration of the application is completed. As you have seen no source code has been written. Let's step to the next step, where the application will be build, deployed and finally tested.

(3) Build, deploy and test the application

To build and deploy an application multiple options available. More experienced developers will use the command line tools. For the newbies I'll use the context menu of BAS. Before you start you have to login to your CF account and select the subaccount to which the application shall be deployed.

> cf login

(a) Build the application

To build the generated application, right-click the mta.yaml file and choose "Build MTA Project". Check the success message in the terminal. The build process creates an mta archive file in the mta_archives directory.

Build application

 

(b) Deploy application

Before executing the deployment, ensure that you are logged in to the BTP account/space to which the application shall be deployed.

Navigate to the mta_archives directory, right-click the "<name>.mtar" file and choose the action "Deploy MTA Archive". With this action the application gets deployed to the BTP subaccount.

Check the success message for the deployment in the terminal.

Deploy application

(c) Application test

Open the BTP subaccount to which the application has been deployed (see step (b)) and navigate to "HTML5 Applications". In the HTML5 Applications list the newly deployed application should appear.

BTP - HTML5 Applications

The application name can be read from the mta.yaml file in the section "Basic Information". The ID attribute is the application name.

To start the application click the link "copmtestdemo2".

This is how the generated application looks like. The projects are read via the destination through the public API.

Demo Fiori Application

Call API via Technical User

In the above step by step description it is described how the connection / destination to CoPM is setup for a business user. That means for the API call the user credentials of the logged in user are used. To call the API with the technical user the setup is slightly different.

(1) Setup a API service instance for the technical user. 

Please follow the documentation in help.sap.com "Setting up and Using Technical User Flow for Public APIs"

The difference to a normal API service instance is that the service key has to be setup with the following service parameters

{     

   "technical_user": "1"

}

(2) Setup BTP destination for the technical user API call

The only difference is that for the technical user access the oauth client credentials flow has been selected.

BTP Destination - Client Credential flow

Remark: The response from the "Check Connection" is not really giving a mature information whether the destination is configured correct or not. 

Disclaimer for technical user access
Technical user is only available for project-service API endpoints (https://api.sap.com/api/ProjectService/resource/Projects) and provides only read access.

Summary

You have learned how to setup a destination to call public C4P APIs and how to use them in Fiori applications. Finally the blog described how to build, deploy and test a Fiori application.

I would like to encourage you to try it out and share your feedback, comments and questions in the comments section of the blog.

Also for any general queries w.r.t SAP S/4HANA Cloud for projects, please post your questions in our community