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
<!-- description --> Add a classic SAP UI app (like those typically run by SAP customers on the data center backends), to your site.
13
13
14
14
## Prerequisites
15
-
- You have created a destination in SAP BTP cockpit to the SAP Gateway Demo system
15
+
- You have created a destination in SAP BTP cockpit to the SAP Gateway Demo system
16
16
- You have subscribed to the SAP Build Work Zone, standard edition and created a site
17
+
- If you're working with Spaces and Pages, you've created a space and a page and assigned the space to a role as described in this tutorial: [Create a Space and a Page and Add Apps](https://developers.sap.com/tutorials/cp-portal-cloud-foundry-spaces-pages.html)
17
18
18
19
19
20
## You will learn
@@ -45,18 +46,22 @@ In this tutorial, you'll use the **Content Manager** in SAP Build Work Zone, sta
45
46
46
47
<!-- border -->
47
48
48
-
2. In the **PROPERTIES** tab, enter these values:
49
+
2. Enter a title for the app `Search POs`.
50
+
51
+
<!-- border -->
52
+
53
+
3. In the **Configuration** tab, enter these values:
49
54
50
55
| Field | Value
51
56
| :------------- | :-------------
52
-
| Title | `Search POs`
57
+
| Open App| `In place`
53
58
| System | Select the value `ES5` - if you're taking part in a workshop, please use your unique destination: `<unique_id>_ES5`.
4. In the **VISUALIZATION** tab, enter these values:
73
+
4. In the **Visualization** tab, enter these values:
69
74
70
75
| Field | Value
71
76
| :------------- | :-------------
72
77
| Subtitle | `Search for Purchase Orders`
73
-
| Icon | Click the browse icon, type `activity-2`. You'll see two icons. Click the first one and then click **OK**.
78
+
| Icon | Click the browse icon, type `activity-2`. You'll see two icons. Click the first one to add it to your tile.
74
79
75
80
Click **Save**.
76
81
@@ -81,24 +86,33 @@ In this tutorial, you'll use the **Content Manager** in SAP Build Work Zone, sta
81
86
### View the app that you created
82
87
83
88
84
-
Click the Content Manager icon in the left side panel to open the **Content Manager**.
89
+
Use the breadcrumbs at the top to go back to the **Content Manager**.
85
90
86
91
87
92
88
93
You can see your Web Dynpro ABAP app in the list:
89
94
90
95
91
96
92
-
To view the app in runtime, you must assign the app to a role. You also need to assign the app to a group so that it'll be visible in your site.
97
+
In the next steps, we'll make the app visible for users. To do this, we need to assign the app to a role (the same role that the user is assigned to). Depending on which view mode has been set in the **Site Settings** screen, we also need to add the app to a page if you're working in **Spaces and Pages - New Experience** mode. If you're working in **Groups** mode or in **Spaces and Pages** mode, then you'll assign your app to a group.
98
+
99
+
Here's a view of the **Site Settings** screen with the different view modes. In this tutorial we'll be working in the **Spaces and Pages - New Experience** mode.
93
100
94
-
This is described in the following steps.
101
+
95
102
103
+
If you're not sure what view mode is selected, go to the **Site Settings** screen as follows:
104
+
105
+
1. Open the Site Directory from the left panel and on the site tile, click the cog icon.
106
+
107
+
108
+
109
+
2. On the right side of the screen, under **View Mode**, you can see which mode you're working in. To change it, click **Edit** and then **Save** your changes.
96
110
97
111
98
112
### Assign the app to the Everyone role
99
113
100
114
101
-
>Content assigned to the `Everyone` role is visible to all users.
115
+
>To view the app in runtime, you must assign the app to a role. Content assigned to the `Everyone` role is visible to all users.
102
116
103
117
1. In the **Content Manager**, click the `Everyone` role.
104
118
@@ -108,44 +122,64 @@ This is described in the following steps.
108
122
109
123
110
124
111
-
3. Click the search box in the **Assignments** panel on the right, any available apps are shown in the list below.
125
+
3. Under the **Apps** tab, you'll see that your `Search POs` app has an **X** in the **Assignment Status** column. Click the toggle to assign the app to the `Everyone` role and click **Save**.
126
+
127
+
128
+
112
129
>If you have many apps, you can type some letters of your app name in the search bar, (for example, `se`) to search for the app.
113
130
114
-
4. Click the **+** icon next to the `Search POs` app to assign the app to the `Everyone` role. If you're taking part in a workshop, please use your unique app: `<unique_id>_Search POs`
131
+
### Add the App to Your Page
115
132
116
-
133
+
>**This step is only if you're working with Spaces and Pages.**
117
134
118
-
You'll see that the icon changes.
135
+
In a previous tutorial, you've already created a Space called `Home` and a Page called `Overview`. Now let's add the Web Dynpro app to the page.
A group is a set of one or more apps displayed together in your site. Assigning apps to groups, makes them visible to users of the site.
147
+
3. Click **Edit**.
128
148
129
-
1. Click the Content Manager icon to open the **Content Manager**.
149
+
130
150
131
-
2. Click **+ New**and select **Group**from the list to create a group.
151
+
4. Hover in the section containing the other apps, and click the **+**icon on the right.
132
152
133
-
<!-- border -->
153
+
134
154
135
-
3. Name the group `Purchase Orders`.
155
+
5. Select the `Search POs` app that you've just configured and click **Add**.
136
156
137
-
4. In the **Assignments** panel, click inside the search box on the right of the screen, to show all available apps. You should see the `Search POs`app. If you're taking part in a workshop, please use your unique app: `<unique_id>_Search POs`
157
+
138
158
139
-
5. In the list, click **+** to assign the `Search POs` app to your group. If you're taking part in a workshop, please use your unique app: `<unique_id>_Search POs`
159
+
6. Click **Save**. Your Web Dynpro is added to the `Overview` page to the same section as your other apps.
140
160
141
-
161
+
142
162
143
-
You'll see that the icon changes.
144
163
145
-
6. Click **Save**.
164
+
### Assign the app to a group
146
165
166
+
> **This step is only for those working in **Groups** view mode (defined in the **Site Settings** screen). If you're working with the new site experience and selected **Spaces and Pages - New Experience** mode, please skip this step**.
147
167
168
+
A group is a set of one or more apps displayed together in your site. Assigning apps to groups, makes them visible to users of the site.
169
+
170
+
1. Go back to the **Content Manager** using the breadcrumbs at the top of the screen.
171
+
172
+
173
+
174
+
2. Click **Create** and select **Group** from the list to create a group.
175
+
176
+
<!-- border -->
177
+
178
+
3. Name the group `Purchase Orders`.
179
+
180
+
4. Under the **Apps** tab, you'll see that your `Search POs` app has an **X** in the **Assignment Status** column. Click the toggle to assign the app to the `Purchase Orders` group and click **Save**. If you're taking part in a workshop, please use your unique app: `<unique_id>_Search POs`
148
181
182
+
149
183
150
184
151
185
### Launch the app
@@ -159,12 +193,14 @@ A group is a set of one or more apps displayed together in your site. Assigning
159
193
160
194
161
195
162
-
3.In the `Purchase Orders` group, click the Web Dynpro ABAP app called `Search POs` to launch it.
196
+
3. If you're working in spaces and pages mode, you'll see that the `Search POs`app is added to the `Overview` page in the `My Apps`section.
163
197
164
-
198
+
199
+
200
+
4. If you're working in groups mode, you'll see the `Purchase Orders` group that includes the Web Dynpro ABAP app called `Search POs`.
165
201
166
-
4. Enter your logon details if prompted to do so.
202
+
167
203
168
-
And this is what you'll see:
204
+
5. Click the app to launch it. This is what you'll see:
0 commit comments