You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# SAP ALM API & Integration: Extension of SAP Cloud ALM with SAP Build (Part 2)
13
-
<!-- description -->You will be developing a simple Build Apps app where you can interact with your projects and tasks inside a given destination linking to your SAP Cloud ALM API.
13
+
<!-- description -->Develop a simple Build Apps app where you can interact with your SAP CLoud ALM projects and tasks inside a given destination linking to your SAP Cloud ALM API.
14
14
15
15
16
16
## You will learn
17
17
- How to build a simple **Build Apps** application to interact with SAP Cloud ALM entities
18
18
19
19
## Prerequisites
20
20
- You need to have the connectivity setup between SAP Build Apps and SAP Cloud ALM.
21
-
- Check the previous [blog](https://developers.sap.com/tutorials/sap-cloud-alm-sap-build-process-automation-1.html
22
-
) to setup your SAP Build and SAP Cloud ALM environments
21
+
- Check the previous [tutorial](https://developers.sap.com/tutorials/sap-cloud-alm-sap-build-process-automation-1.html) to setup your SAP Build and SAP Cloud ALM environments.
23
22
24
23
## Intro
25
-
In the end of this blog you will finish with a Projects and a Tasks page as shown below:
24
+
In the end of this tutorial you will finish with a Projects and a Tasks page as shown below:
26
25
27
26
28
27
29
-
Clicking on a project it should send you to its Tasks page showing all tasks in this project.
28
+
Clicking on a project should send you to its Tasks page showing all tasks in this project.
30
29
31
30
32
31
33
-
### Creating a data entity linking to the Projects endpoint.
34
-
In the last tutorial you saw how to create a simple data entity linking to your main API. Here you will create a new one and link it to your projects endpoint.
32
+
### Create a data entity linking to the Projects endpoint.
33
+
In the last tutorial you enabled the SAP BTP Authentication necessary for the next steps and you saw how to create a simple data entity linking to your main API. Here you will create a new one and link it to your projects endpoint.
35
34
36
-
In the last tutorial you also enabled the SAP BTP Authentication necessary for the next steps.
35
+
1. Navigate to the data tab at the top of the page.
36
+
2. Click on **Create Data Entity**.
37
+
3. Choose **Sap BTP Destination REST API integration**.
38
+
4. A configuration tab for your data entity should open:
39
+
40
+
5. Choose the BTP destination name to link it to your Sap Cloud ALM API destination:
41
+
42
+
6. Activate one of the operations that will be executed on this destination. As you are looking to retrieve all the projects that exist in your tenant you will need to activate the **list** operation.
43
+
44
+
7. Enable your list operation on the left tab of the data entity configuration. Give the relative path to your projects endpoint.
45
+
8. Now you can use the RUN TEST tab to test the linking to your API. When running the test you should end up with a **Status:OK (200)**.
46
+
37
47
38
-
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:
39
48
40
-
41
-
42
-
Once on this page you need to choose the BTP destination name to link it to your Sap Cloud ALM API destination:
43
-
44
-
45
-
46
-
You then need to activate one of the operations that will be executed on this destination.
47
-
48
-
As you are looking to retrieve all the projects that exist in your tenant you will need to activate the list operation. This will allow us to execute a GET on the API.
49
-
50
-
51
-
52
-
You enable your list operation on the left tab of the data entity configuration. To be able to extract the data want the relative path to your projects endpoint has to be given.
53
-
54
-
Now you can use the RUN TEST tab to test the linking to your API. When running the test you should end up with a “Status:OK (200)”.
55
-
56
-
57
-
58
-
59
-
### Creating the Data Variable
49
+
### Create the Data Variable
60
50
You now have a working connection to your SAP Cloud ALM projects endpoint of your API. To access the information from your API inside the canvas, it needs to be linked to a data variable.
61
51
62
-
To do this you need to have a look at the variables tab on your page:
63
-
64
-
65
-
66
-
In the top right of the page, you select the variable view. you then click on Data variables. Here you can create variables in your page that will let us interact with your data entity. This will allow us to call your defined operations in that entity.
67
-
68
-
To create this variable you need to click on “Add Data Variable” and then select the data entity that you created in Step 1. (for example CALM_TENANT_PROJECTS”).
69
-
70
-
When selected you end up with the data variable on the screen and you then have access to its logic chart.
71
-
72
-
73
-
74
-
On the right side of the page are the characteristics of your variable. Here as you 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.
75
-
76
-
You should end up with a data variable that looks like the screenshot above.
77
-
78
-
You now have a link to your API and a way to access it on your Page. Next, you should create a list that will show all the Projects.
79
-
80
-
81
-
### Creating the Projects list
82
-
To create a list containing all your projects you first must add a “List Item” onto your page.
83
-
84
-
Now that you have your list on the page you need to link it to your Data variable to show off all the projects.
85
-
86
-
The link to your Data variable is done with the “Repeat with” parameter of the list.
87
-
88
-
89
-
90
-
Here you click on the little symbol under the “Repeat with”. This will allow us to make your list repeat and show all the info on a certain item.
91
-
92
-
Continue to navigate towards your Data variable.
93
-
94
-
95
-
96
-
Our list is now going to be repeated on your Data variable and this allows us to display all the variables from your API.
52
+
1. Look at the variables tab on your page.
53
+
54
+
2. Select the variable view in the top right of the page.
55
+
3. Click on **Data variables**. Here you can create variables in your page that will let you interact with your data entity. This will allow you to call your defined operations in that entity.
56
+
3. Click on **Add Data Variable** to create this variable.
57
+
4. Select the data entity that you created in Step 1. (for example "CALM_TENANT_PROJECTS”). When selected you end up with the data variable on the screen and you then have access to its logic chart.
58
+
59
+
5. On the right side of the page are the characteristics of your variable. Here as you 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.
97
60
98
-
To be able to show the Project names you need to link your list “Primary Label” to your Project names.
61
+
You now have a link to your API and a way to access it on your Page.
99
62
100
-
101
63
102
-
Click on the little button under the “Primary label” property. This is done to set the value that will appear on each square inside your list.
103
-
104
-
The next step is to use the data item in repeat.
105
-
106
-
107
-
108
-
Select “current” as your Select repeat and then current.name as your “Select repeat data property”. This will make your list show every project name that you have in your tenant. Follow this by clicking on save and you now have a list that will show all your Projects names!
109
-
110
-
To make this page a bit nicer you can use your Headline box to add a “Projects” as a title.
111
-
112
-
Once the page opened you should be able to see all the projects in your current tenant appear in a list format like follows:
64
+
### Create the Projects list
65
+
Next, you create a list that will show all the Projects.
66
+
67
+
1. Add a “List Item” onto your page.
68
+
2. Link it to your **Data variable** to show off all the projects.
69
+
3. The link to your Data variable is done with the **Repeat with** parameter of the list.
70
+
71
+
4. Click on the little symbol under the **Repeat with**. This will allow us to make your list repeat and show all the info on a certain item.
72
+
5. Continue to navigate towards your Data variable.
73
+
74
+
6. Our list is now going to be repeated on your **Data variable** to display all the variables from your API.
75
+
7. Link your list **Primary Label** to your Project names to be able to show the Project names.
76
+
77
+
8. Click on the little button under the **Primary label** property. This is done to set the value that will appear on each square inside your list.
78
+
9. Use the data item in repeat.
79
+
80
+
10. Select **current** as your Select repeat and then current.name as your **Select repeat data property**. This will make your list show every project name that you have in your tenant.
81
+
11. Click on **save** and you now have a list that will show all your Projects names!
82
+
12. To make this page a bit nicer you can use your Headline box to add a **Projects** as a title.
83
+
84
+
Once the page opened you see all the projects in your current tenant appear in a list format like follows:
113
85
114
86
115
87
116
-
### Creating the data variable for the Task endpoint
117
-
You now have a page with all the projects of your current tenant listed. What you want now is to able to click on one of those projects and have all the tasks of that projects show up.
118
-
119
-
To do this you first have to create a new data entity linking to your task endpoint.
120
-
121
-
In the same way you created your first data entity, you navigate to your data page, scroll down and click on create data entity. You choose “SAP BTP Destination REST API integration”. On the selection of Destination you do the same thing as step1, you choose the destination you created in the previous tutorial.
122
-
123
-
Now you need to connect it to your endpoint:
124
-
125
-
126
-
127
-
First enable your list operation to be able to list all of the tasks. After you need to click on the little “ABC”, here you will set your relative path to a SAP Build formula.
128
-
129
-
130
-
131
-
This opens up the formula editing page that allows us to add functions or text. You need to write the following text into the editing section:
132
88
133
-
89
+
### Create the data variable for the Task endpoint
90
+
You now have a page with all the projects of your current tenant listed. Now you will link to click on one of those projects and have all the tasks of that projects show up.
134
91
135
-
The string part is the link to your 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 you click on a project.
92
+
1. Create a new data entity linking to your task endpoint.
93
+
2. Navigate to your data page.
94
+
3. Scroll down and click on create data entity.
95
+
4. Choose **SAP BTP Destination REST API integration**.
96
+
5. On the selection of Destination choose the destination you created in the previous tutorial.
97
+
6. Connect it to your endpoint:
98
+
99
+
7. Enable your list operation to be able to list all of the tasks.
100
+
8. . Click on the little **ABC** to set your relative path to a SAP Build formula.
101
+
102
+
9. Write the following text into the editing section of the formula editing page.
103
+
104
+
10. The string part is the link to your **Task** endpoint, the **query.search.query** to get tasks that are specific to a certain Project.
105
+
136
106
137
-
107
+
Once the relative path is given, you can test out to see if the connection to your endpoint is possible.
138
108
139
-
Once the relative path is given, you can test out to see if the connection to your endpoint is possible. To do this you need to give it a projectId in the search part of the test page. With this parameter given you can click on “RUN TEST” and see if you have a “Status: OK” response.
109
+
1. Give it a projectId in the search part of the test page.
110
+
2. With this parameter given you can click on **RUN TEST** and see if you have a “Status: OK” response.
111
+
3. Once you have this response click on **AUTODETECT SCHEMA FROM RESPONSE** to be able to define the variables you will interact with.
140
112
141
-
Once you have this response click on “AUTODETECT SCHEMA FROM RESPONSE” to be able to define the variables you will interact with.
142
113
143
-
### Creating your data variable for the Task data entity
114
+
### Create your data variable for the Task data entity
144
115
When you are done creating your data entity, you now need to create a data variable on a new page to be able to get the information to display.
145
116
146
-
To create the connection between the two pages you first need to create a “Page parameter” on your new task page.
147
-
148
-
To do this you need to navigate to the variables section of your page, then page parameters and click on “Add parameter”
149
-
150
-
117
+
To create the connection between the two pages you first need to create a **Page parameter** on your new task page.
151
118
152
-
Here you named the page parameter ProjectId, and set its value type to UUID.
119
+
1. Navigate to the variables section of your page.
120
+
2. Navigate to page parameters.
121
+
3. Click on **Add parameter**.
122
+
123
+
4. Name the page parameter ProjectId.
124
+
5. Set its value type to UUID. This will be the variable that will hold the ProjectId of the project you clicked on to display its tasks.
153
125
154
-
This will be the variable that will hold the ProjectId of the project you clicked on to display its tasks.
126
+
Once the page parameter created, you can now make your data variable.
155
127
156
-
Once the page parameter created, you can now make your data variable. In the same way you created the last one for the projects page, you navigate to the Data variable tab, click on “Add data variable” and then choose the data entity you created for your Task Endpoint.
157
-
158
-
128
+
1. Navigate to the Data variable tab.
129
+
2. Click on **Add data variable**.
130
+
3. Choose the data entity you created for your Task Endpoint.
131
+
159
132
160
133
This variable is a “search variable” to indicate which project you want the tasks from.
161
134
162
-
Click on the little “X” that should be under the Search parameter to navigate towards the formula edit screen.
163
-
164
-
Once in the formula edit screen you want to add the following:
165
-
166
-
167
-
168
-
This will pass the ProjectId parameter that you created before to your API to tell it which project you want the tasks from.
169
-
170
-
Once this is done you can save the data variable.
135
+
1. Click on the little **X** under the Search parameter to navigate towards the formula edit screen.
136
+
2. Once in the formula edit screen add the following. This will pass the ProjectId parameter that you created before to your API to tell it which project you want the tasks from.
137
+
138
+
3. Save the data variable.
171
139
172
140
173
-
### Creating the list of Tasks
141
+
### Create the list of Tasks
174
142
You can now navigate back to your page view and create the list that will show all the tasks.
175
143
176
-
To do this you can add the list item in your canvas the same way you did for the project list.
177
-
178
-
In the same way that you connected your Project list to the data variable you had created, you need to click on the repeated data, then Data and variables, then data variable and then choose the variable you have created previously.
179
-
180
-
144
+
In the same way that you connected your Project list to the data variable you had created:
181
145
146
+
1. Click on the repeated data.
147
+
2. Click on Data.
148
+
3. Click on variables then data variable.
149
+
4. Choose the variable you have created previously.
150
+
182
151
183
-
### Linking the Project page and the Task Page
184
-
The last step to complete is the link between
185
-
the Project page and the Task page.
186
152
187
-
Click on the list item and open the logic function of this item.
153
+
### Link the Project page and the Task Page
154
+
The last step to complete is the link between the Project page and the Task page.
188
155
189
-
You must then add the “Open Page” item from the tab on the bottom left.
190
-
191
-
192
-
193
-
Drag this item onto your logic canvas to be able to use it.
194
-
195
-
196
-
197
-
Connect the “Component tap” to the Open page item. This will allow us to open the task page when you click on a certain project.
198
-
199
-
156
+
1. Click on the list item.
157
+
2. Open the logic function of this item.
158
+
3. Add the **Open Page** item from the tab on the bottom left.
159
+
4. Drag this item onto your logic canvas.
160
+
161
+
5. Connect the **Component tap** to the Open page item. This will allow us to open the task page when you click on a certain project.
162
+
200
163
201
164
You can now link the page that you 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.
202
165
203
-
You now need to give it a ProjectID parameter as you created a page parameter on your TaskPage.
204
-
205
-
To do this click on the “X” to change what variable it will give. you then click on “Data item in repeat” and then you choose “current” and then ID. This will allow us to pass the ID of the project you have clicked on to the next page.
166
+
Give it a ProjectID parameter as you created a page parameter on your TaskPage:
206
167
207
-
168
+
1. Click on the **X** to change what variable it will give.
169
+
2. Click on **Data item in repeat**
170
+
3. Choose **current** and then ID. This will allow to pass the ID of the project you have clicked on to the next page.
171
+
208
172
209
173
You should end up with the same parameters that were shown above. Now the linking to these pages is done!
0 commit comments