Connecting a Fiori Elements App to SAP S/4HANA Cloud for Projects and Collaborative Project Management (2023)

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 possibilities to share any kind of information and act as a single source of truth for all project related business information like documents, tasks, topics,….

SAP S/4HANA Cloud for Projects, Project Collaboration also provides API (for details seeSAP API Center) that can be used for integration with other applications or to extend the basic features offered.

In this blog I will explain how a Fiori application can connect to SAP S/4HANA Cloud for projects that use public APIs.

The following conditions must be met.

• An SAP Business Technology Platform (BTP) account is required.
• A BTP subaccount set up with SAP Business Application Studio (BAS) (Configure BAS on your subaccount)
• A secondary BTP account set up for SAP S/4HANA Cloud for project (C4P) (C4P Configuration)
• Authorizations required to manage subaccounts

As an example for this walkthrough, we use theProject Public Service APIin which the list of works is read.

Summary

1. Prepare your subaccount and configure your API service instance (described in a related blog post)
2. Set BTP destination for API call
3. Create an SAP Fiori application in SAP Business Application Studio (BAS)
4. Build, deploy and test your app

(1) Prepare your sub-account and configure the API as a service instance

For these steps, follow setup steps 1-4 documented in the blog post"Consuming SAP Project Intelligence Network APIs"

1. Habilite o Cloud Foundry na subconta
2. Create a service instance of the SAP PIN API service
3. Create a service key
4. assign roles

After successfully completing the above steps, you are ready to configure the target so that you can consume your Fiori app's API endpoint.

(2) Set BTP destination for API call

Destinations are provided to BTP for the ability to connect and access other services through publicly available APIs. It is important to understand the types of authorization offered by the service itself. Based on the available options and your use case, the appropriate authentication type should be selected and configured on the target.

To call the Fiori App API you need to configure a destination.

(a) Open your registered subaccount in SAP Business Application Studio

/Destinations

(b) Create a new target for the API endpoint you want to call from your application. (I seeCreate HTTP targets)

https:/api-endpoint

https:/ProjectService/v1

https:///oauth/token

Additional Properties

These properties are needed to make the target visible and executable in BAS.

API service instance credential information

For the authentication part of the target configuration, you need to retrieve the credentials file for the API service instance. Handle your API credentials securely so that only authorized people can access them.

Credentials are stored in the credentials JSON file located in 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

target configuration

For more details, continue reading.Connecting to external systems at help.sap.com

Observation:The answer from "check the connection” doesn't really give mature information if the target is configured correctly or not.

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

This example now requires UI5/Fiori or Javascript programming. The base application simply uses the available Fiori application template wizards and focuses on the configuration steps required to configure the target so that the relevant data is displayed in the automatically generated Fiori application.

(a) Open SAP Business Application Studio and new template project

There are several options for opening the template wizard. Experienced developers will likely use the command line. In this example, the BAS menu is used.

Help / Getting started / New project from template

Create a new project from the template

(b) Create an SAP Fiori Application – List Report

The SAP Fiori List Report application is a very simple application that displays all reading data in a simple table. In addition to standard attributes, all metadata is readable and can be displayed on the scoreboard.

BAS Wizard – Select Application Template (SAP Fiori Application)

BAS Wizard - Select Application Type (List Reference Page)

(c) Configure the data source

The data source is the most important part of the application's configuration. Here you have to select the appropriate destination that was created and configured in the previous step.

The table below shows how to configure the features.

C4P-CoPM-API-ProjectService

(d) Entity Selection

The entity section displays the metadata for the target selected in the previous step. APIs can offer single or multiple endpoints. When you open the field's dialog, you will see all business entities/objects provided by the target.

For this example select the "It works"entity and navigation entity maintenance"Nobody".

BAS Guide - Entity Module

(e) Project Properties

Project characteristics should describe the project itself. Attributes are used in BAS to name the module. Additionally, the module name and application namespace are used to name the application and deployment file.

The namespace is optional. However, it's a good idea to define a namespace to describe which domain the application belongs to and ensure that the application name is unique. Application name is a combination of application namespace + module name

Keep the features you need

• module name and
• Project folder path (for MTA project)

All other features are optional and not related to the connectivity demo.

BAS Wizard – Project Resources

(f) Development configuration

If you deploy the module independently, it is important to configure the deployment parameters. This configuration is stored in the module's mta.yaml file. All settings needed to run the application are stored in mta.yaml.

Select "cloud casting" as target and as target names the target step that was created(2) Set BTP destination for API call

and click "Next".

BAS Tab – Deployment Configuration

(g) Fiori Launchpad configuration (optional)

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

Now the application is about to be created

BAS Wizard – FLP Configuration

Now the application setup is complete. As you saw, no source code was written. Let's move on to the next step, where the application will be built, developed and finally tested.

(3) Creation, development and testing of the application;

To create and develop an application there are many options available. More experienced developers will use the command line tools. For starters I'll use the BAS context menu. Before you start, you need to log into your CF account and select the sub-account to deploy the app to.

> see link

(a) Create the application

To build the generated application, right-click on themta.yamlfile and select "Create an MTA project". Check the success message in the terminal. The build process creates an mta file in the mta_archives directory.

create an application

(b) Application Development

Before performing the deployment, make sure you are logged into the BTP account/space where the application will be deployed.

Go to the mta_archives directory, right click on ".mtar" file and select action "Expand the MTA file". This action deploys the application to the BTP subaccount.

Check the deployment success message on the terminal.

application development

(c) Application test

Open the BTP subaccount where the application is deployed (see step (b)) and go to “HTML5 Apps". The HTML5 app list should show the newly deployed app.

BTP – HTML5 applications

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

To start the application click on the link 'copmtestdemo2'.

This is what the generated application looks like. Projects are read from the target via the public API.

Fiori demo application

The step-by-step description above describes how to configure the connection/destination in CoPM for an enterprise user. This means that the logged in user's credentials are used for the API call. To call the API with the technical user, the setup is a little different.

(1) Configure an API service instance for the technical user.

Follow the documentation at help.sap.com "Configure and use technical user flow for public APIs”

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

{ "technical_user": "1"}

(2) Setting BTP destination for technical user API call

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

BTP Destination – Client Credentials Flow

Observation: The "Connection check" answer doesn't really provide mature information whether the destination is configured correctly or not.

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

You learned how to configure a target 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 encourage you to give it a try and share your comments, comments and questions in the comments section of the blog.

Also, for any general questions about SAP S/4HANA Cloud for projects, post your questions in our community