In this series of blog we will focus on integrating the SAP Cloud ALM API with a SAP Build application to demonstrate how to extend SAP Cloud ALM with custom functionality.
In this blog, we will be developing a simple Build Apps app where we can interact with our projects and tasks inside a given destination linking to our SAP Cloud ALM API.
In the end of this blog we will finish with a Projects and a Tasks page as shown below:
Clicking on a project it should send us to its Tasks page showing all tasks in this project.
We will follow the steps below:
- Creating a data entity linking to the projects endpoint.
- Creating the data variable.
- Creating the projects list.
- Creating the data variable for the task endpoint.
- Creating our data variable for the task data entity.
- Creating the list of tasks.
- Linking the Project page and the Task page.
1. Creating a data entity linking to the Projects endpoint.
In the last tutorial we saw how to create a simple data entity linking to our main API. Here we will create a new one and link it to our projects endpoint.
In the last tutorial we also enabled the SAP BTP Authentication necessary for the next steps.
Navigate to the data tab at the top of the page. There you will be able to click on “Create Data Entity” and choose “Sap BTP Destination REST API integration”. After having done this a configuration tab for your data entity should open:
Once on this page we need to choose the BTP destination name to link it to our Sap Cloud ALM API destination:
We then need to activate one of the operations that will be executed on this destination.
As we are looking to retrieve all the projects that exist in our tenant we will need to activate the list operation. This will allow us to execute a GET on the API.
We enable our list operation on the left tab of the data entity configuration. To be able to extract the data want the relative path to our projects endpoint has to be given.
Now we can use the RUN TEST tab to test the linking to our API. When running the test we should end up with a “Status:OK (200)”.
Creating the Data Variable
We now have a working connection to our SAP Cloud ALM projects endpoint of our API. To access the information from our API inside the canvas, it needs to be linked to a data variable.
To do this we need to have a look at the variables tab on our page:
In the top right of the page, we select the variable view. We then click on Data variables. Here we can create variables in our page that will let us interact with our data entity. This will allow us to call our defined operations in that entity.
To create this variable we need to click on “Add Data Variable” and then select the data entity that we created in Step 1. (for example CALM_TENANT_PROJECTS”).
When selected we end up with the data variable on the screen and we then have access to its logic chart.
On the right side of the page are the characteristics of our variable. Here as we are getting all projects then it is a “Collection of data records” type of variable. This should be already selected, and no changes need to be done to this configuration.
You should end up with a data variable that looks like the screenshot above.
We now have a link to our API and a way to access it on our Page. Next, we should create a list that will show all the Projects.
Creating the Projects list
To create a list containing all our projects we first must add a “List Item” onto our page.
Now that we have our list on the page we need to link it to our Data variable to show off all the projects.
The link to our Data variable is done with the “Repeat with” parameter of the list.
Here we click on the little symbol under the “Repeat with”. This will allow us to make our list repeat and show all the info on a certain item.
We continue to navigate towards our Data variable.
Our list is now going to be repeated on our Data variable and this allows us to display all the variables from our API.
To be able to show the Project names we need to link our list “Primary Label” to our Project names.
We click on the little button under the “Primary label” property. This is done to set the value that will appear on each square inside our list.
The next step is to use the data item in repeat.
We select “current” as our Select repeat and then current.name as our “Select repeat data property”. This will make our list show every project name that we have in our tenant. Follow this by clicking on save and we now have a list that will show all our Projects names!
To make this page a bit nicer you can use your Headline box to add a “Projects” as a title.
Once the page opened you should be able to see all the projects in your current tenant appear in a list format like follows:
Creating the data variable for the Task endpoint
We now have a page with all the projects of our current tenant listed. What we want now is to able to click on one of those projects and have all the tasks of that projects show up.
To do this we first have to create a new data entity linking to our task endpoint.
In the same way we created our first data entity, we navigate to our data page, scroll down and click on create data entity. We choose “SAP BTP Destination REST API integration”. On the selection of Destination we do the same thing as step1, we choose the destination we created in the previous tutorial.
Now we need to connect it to our endpoint:
We first enable our list operation to be able to list all of the tasks. After we need to click on the little “ABC”, here we will set our relative path to a SAP Build formula.
This opens up the formula editing page that allows us to add functions or text. We need to write the following text into the editing section:
The string part is the link to our Task endpoint, the “query.search.query” is what will allow us to get tasks that are specific to a certain Project. This will be a variable that will be given when we click on a project.
Once the relative path is given, we can test out to see if the connection to our endpoint is possible. To do this we need to give it a projectId in the search part of the test page. With this parameter given we can click on “RUN TEST” and see if we have a “Status: OK” response.
Once we have this response click on “AUTODETECT SCHEMA FROM RESPONSE” to be able to define the variables we will interact with.
Creating our data variable for the Task data entity
When we are done creating our data entity, we now need to create a data variable on a new page to be able to get the information to display.
To create the connection between the two pages we first need to create a “Page parameter” on our new task page.
To do this we need to navigate to the variables section of our page, then page parameters and click on “Add parameter”
Here I named the page parameter ProjectId, and set its value type to UUID.
This will be the variable that will hold the ProjectId of the project we clicked on to display its tasks.
Once the page parameter created, we can now make our data variable. In the same way we created the last one for the projects page, we navigate to the Data variable tab, click on “Add data variable” and then choose the data entity we created for our Task Endpoint.
This variable is a “search variable” to indicate which project we want the tasks from.
Here we click on the little “X” that should be under the Search parameter to navigate towards the formula edit screen.
Once in the formula edit screen you want to add the following:
This will pass the ProjectId parameter that we created before to our API to tell it which project we want the tasks from.
Once this is done you can save the data variable.
Creating the list of Tasks
We can now navigate back to our page view and create the list that will show all the tasks.
To do this you can add the list item in our canvas the same way we did for the project list.
In the same way that we connected our Project list to the data variable we had created, we need to click on the repeated data, then Data and variables, then data variable and then choose the variable we have created previously.
Linking the Project page and the Task Page
The last step to complete is the link between the Project page and the Task page.
We need to click on the list item and open the logic function of this item.
We must then add the “Open Page” item from the tab on the bottom left.
We drag this item onto our logic canvas to be able to use it.
We connect the “Component tap” to the Open page item. This will allow us to open the task page when we click on a certain project.
We can now link the page that we want opened when the item will be clicked on. Normally your project only having 2 pages, your task page should be directly set at the page that will open. If not, then you need to click on the little page and then choose your task page.
We now need to give it a ProjectID parameter as we created a page parameter on our TaskPage.
To do this click on the “X” to change what variable it will give. We then click on “Data item in repeat” and then we choose “current” and then ID. This will allow us to pass the ID of the project we have clicked on to the next page.
You should end up with the same parameters that were shown above. Now the linking to these pages is done!
When you open your application the Project page should open, and when a project is clicked on then the Task page showing all the titles of the tasks should appear!
Thank you for following this tutorial.
In the next tutorial we will explore how to interact with the API by exchanging SAP Cloud ALM data between different SAP Cloud ALM tenants.
