Let’s see in this blog which kind of
SAPUI5 custom application we can build in order to
complement (see
Introduction & use-cases) the already existing application available in
SAP Cloud ALM for implementation - Projects and Tasks.
This SAPUI5 custom application has been developed on
SAP BTP platform with following components:
- SAP Business Application Studio for the development environment linked to a github repository.
- Destination Service in order to connect to SAP Cloud ALM APis (sandbox and productive instance).
- SAP Cloud ALM Rest APIs for Projects and Tasks (APIs details: https://api.sap.com/package/SAPCloudALM/rest)
Purpose of this custom application
This custom application serves as an example of what it is possible to achieve with the
SAP Cloud ALM Rest APIs. Indeed, only two of the four offered APIs (Projects and Tasks) are used to realize this application, but many other possibilities are available with the full set of provided APIs.
A Project Management Application
With this application, the user will be able to consult all projects that are defined in
SAP Cloud ALM for implementation. He will be able to manage all tasks part of a project:
- display tasks within a Kanban view.
- add a task to a project, modify its content, or even delete it.
- change a task status using drag and drop capabilities of SAPUI5.
Statistical View
An additional feature offered by this application is a
statistical view that gives a task distribution overview chart (for a given project) based on the task due date (
On time vs
Overdue tasks). Figures are computed
on-the-fly and
asynchronously when retrieving the tasks list from the
Rest APIs.
Consuming Rest APIs
As already exposed above, the purpose of this application is to consume
SAP Cloud ALM Rest APIs. Even if
SAPUI5 is optimized to retrieve and handle data from an
OData Gateway, it can also access
Rest APIs.
Presentation of the application
Here is an overview of features implemented in this custom application.

SAPUI5 Custom Application Overview
The layout is segmented in three main sections:
- Projects section - allows the user to search and select a specific project
- Tasks Distribution section - displays a chart on how tasks are distributed in the selected project based on the due date.
- Kanban section - displays distribution of tasks based on their statuses.
Connection Selection
Before focusing on those sections, notice the
Select a destination drop down button. It allows the user to choose which environment to connect between the “
Sandbox” or the “
Production” API.

Destination Selection
Destinations are maintained (endpoints and credentials) in
BTP Cockpit. It allows to user to access to two different environments:
- The SAP Sandbox - It has been created to have some samples, so people can try out different actions on the APIs without causing any disagreement for the other users. It is connected to the SAP Cloud ALM - Public Demo Tenant. APIs are in read-only mode so no changes can be performed.
- The SAP production environment - This destination is intended to be connected to any “real” SAP Cloud ALM instance. If you have already your own instance, then you can enter the proper credentials and work with your own data.
When the selection is done, a call to the
Projects Rest API is sent and all projects are loaded and visible in the appropriate section.
Projects View
This view displays all available projects created in
Cloud ALM Build:
- A dedicated column will highlight if a project is still active or if it has been hidden.
- A live search (more ergonomic than a classic search) is available for quick searching.
- A standard refresh button is of course available in case of any change in the source data.

Projects List View
Once a
project is selected, a dedicated call is performed against
Cloud ALM Tasks Rest API and following actions are triggered asynchronously:
- Loading all tasks associated to the project,
- Distributing all tasks to the corresponding Kanban column based on their status.
- Calculation of the Tasks Distribution figures displayed in the pie chart.
Tasks Distribution View
As described above this view is calculated once a project is selected.
The pie chart represents the ratio, for a selected project, between the
overdue tasks and the
on-time tasks. A third category
No due date has been added as due date is not a mandatory field.

Tasks Distribution View
Kanban View
Like the
Tasks Distribution view, the
Kanban view is generated upon the selection of a project.

Kanban View
Following features have been implemented in this view:
- A live search for a given task name on all columns
- A dedicated icon to quickly identify task priority (Very High, High, Medium, Low)
- and a dedicated drop-down filter by priority.
- A dedicated task counter on each column (as in some case there may be a lot of tasks in a single category).
- A Task Status update can be performed using Drag & Drop capabilities.

From this view it is also possible to:
- Create a new task through a dedicated window. Available fields are Name, Due Date, Priority, Type and Description as exposed by the Rest APIs.

- Edit or Delete a task using the contextual menu at the right side of a task. Task deletion will be effective after confirmation within a pop-up window, while the edit action will open a dialog window similar to the Create new Task window.

Conclusion
As exposed in this blog, we have seen how it is possible to build a brand new
custom SAPUI5 application based on
Cloud ALM Rest APIs that will
complement existing Cloud ALM Applications.
Our goal was to show one way of consuming these
Rest APIs in a demo application. We hope that our blogs will be useful for the SAP users who want to go in this direction and implement their own application.
In the
next blog, we will expose technical details on how this custom application has been implemented and share the code.
Thanks for reading and stay tune.