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.