Skip to content

Commit 5b7f95d

Browse files
committed
exercises
1 parent 034179b commit 5b7f95d

File tree

9 files changed

+16
-162
lines changed

9 files changed

+16
-162
lines changed

README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ The use of SAP Fiori elements with OData V4 and SAP Cloud Application Programmin
1111
improve the efficiency of developing SAP Fiori apps.\
1212
In this session you will get hands-on experience developing a standard list report or object page app\
1313
using SAP Fiori elements, and then extend it using the flexible programming model.\
14-
Learn how to use the new features provided with SAP Fiori Tools to simplify how you add annotations\
14+
Learn how to use the new features provided with SAP Fiori tools to simplify how you add annotations\
1515
and to personalize the appearance of your app.
1616

1717
## Requirements
@@ -34,7 +34,7 @@ There are no special requirements to follow the exercises in this repository.
3434
- [Exercise 1.2 Adding an App Preview Script](/exercises/ex1#exercise-12-adding-an-app-preview-script)
3535
- [Exercise 1.3 Starting the App](/exercises/ex1#exercise-13-starting-the-app)
3636

37-
- [Exercise 2 Enhancing the UI by Using the SAP Fiori Tools Page Map](exercises/ex2#exercise-2-enhancing-the-ui-by-using-the-sap-fiori-tools-page-map)
37+
- [Exercise 2 Enhancing the UI by Using the SAP Fiori tools Page Map](exercises/ex2#exercise-2-enhancing-the-ui-by-using-the-sap-fiori-tools-page-map)
3838
- [Exercise 2.1 Enable Data Load During Start of the App](exercises/ex2#exercise-21-enable-data-load-during-start-of-the-app)
3939
- [Exercise 2.2 Change Sequence of a Table Column in the List Report](exercises/ex2#exercise-22-change-sequence-of-a-table-column-in-the-list-report)
4040
- [Exercise 2.3 Adding Criticality to a Table Column](exercises/ex2#exercise-23-adding-criticality-to-a-table-column)

exercises/ex0/00_00_0081.png

-145
This file was deleted.

exercises/ex0/images/00_00_0010.png

-4.44 KB
Loading

exercises/ex0/images/wsopen.png

73.1 KB
Loading

exercises/ex1/README.md

+1-2
Original file line numberDiff line numberDiff line change
@@ -150,10 +150,9 @@ Make yourself familiar with the application:
150150
- Click on **Edit** on the object page to create a **draft version** of the displayed object and to set the UI to edit mode.
151151
- Change the value of an input field to automatically **update the draft** when input field focus is changed, or when you navigate back to the List Report.
152152
- The draft is saved back to the active instance by pressing **Save** on the bottom of the Object Page.
153-
- In edit mode, the List Report shows a **draft indicator** in the corresponding line item.
154153

155154
## Summary
156155

157156
You've now successfully generated and tested the Fiori elements app.
158157

159-
Continue to - [Exercise 2 - Configuring the UI by Using the SAP Fiori Tools Page Map](../ex2/README.md)
158+
Continue to - [Exercise 2 - Configuring the UI by Using the SAP Fiori tools Page Map](../ex2/README.md)

exercises/ex1/images/img_011.png

5.62 KB
Loading

exercises/ex1/images/img_012.png

12.6 KB
Loading

exercises/ex2/README.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
# Exercise 2 Enhancing the UI by Using the SAP Fiori Tools Page Map
1+
# Exercise 2 Enhancing the UI by Using the SAP Fiori tools Page Map
22

3-
In this exercise, you will learn how to use some of the new configuration features provided by the **SAP Fiori Tools Page Map**.
3+
In this exercise, you will learn how to use some of the new configuration features provided by the **SAP Fiori tools Page Map**.
44
## Exercise 2.1 Enable Data Load During Start of the App
55

66
When starting the app, per default the user has to press the
@@ -78,8 +78,8 @@ We will now configure the **display text** and the **text arrangement** in order
7878
An additional property **Text Arrangement** is now shown in the properties pane.\
7979
\(15\) Expand the drop-down box.
8080

81-
\(16\) Select list entry **Text First**.\
82-
With it, column **Agency** will now show values in format **<display text\> (<identifier\>)**.
81+
\(16\) Make sure that list entry **Text First** is selected.\
82+
With it, column **Agency** will show values in format **<display text\> (<identifier\>)**.
8383

8484
![tools - SAP Business Application Studio - Google Chrome](images/img_006.png "tools - SAP Business Application Studio - Google Chrome")
8585

@@ -94,7 +94,7 @@ Switch to the preview browser tab.
9494
## Exercise 2.5 Change Form Field Order and Display Type
9595

9696
On the object page, in field group **Travel** we want to exchange the positioning of fields **Customer** and **Agency**.\
97-
For Field **Description**, in order to have long descriptions properly displayed in edit mode, we will switch the field's display type by using the SAP Fiori Tools Page Map.
97+
For Field **Description**, in order to have long descriptions properly displayed in edit mode, we will switch the field's display type by using the SAP Fiori tools Page Map.
9898

9999
![tools - SAP Business Application Studio - Google Chrome](images/TextArea.png "tools - SAP Business Application Studio - Google Chrome")
100100

@@ -136,9 +136,9 @@ Click button ![image](images/fieldicon30.png) in order to switch back to display
136136
## Exercise 2.6 Adding a new Field Group
137137

138138
For a **sustainability initiative**, the travel service has been extended to provide some additional fields for the new green flight offering which are not yet shown in the UI.\
139-
In this exercise, we will add a new **subsection Sustainability** to section **Travel** of the object page by using the **Add Form Section** functionality of the **SAP Fiori Tools Page Map**.
139+
In this exercise, we will add a new **subsection Sustainability** to section **Travel** of the object page by using the **Add Form Section** functionality of the **SAP Fiori tools Page Map**.
140140

141-
\(27\) In the SAP Fiori Tools Page Map's **page editor** for the object page,
141+
\(27\) In the SAP Fiori tools Page Map's **page editor** for the object page,
142142
expand **Page Layout - Sections - Travel - Subsections** and click icon **Add Sections** ![icon](images/fieldicon20.png).
143143

144144
![tools - SAP Business Application Studio - Google Chrome](images/img_014.png "tools - SAP Business Application Studio - Google Chrome")

exercises/ex4/README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Exercise 4 - Flexible Programming Model: Extending the App with Fiori Elements Building Blocks
22

3-
In this exercise, we will replace the object page table section **Bookings** with a **custom section** by using the **SAP Fiori Tools Page Map**.\
3+
In this exercise, we will replace the object page table section **Bookings** with a **custom section** by using the **SAP Fiori tools Page Map**.\
44
In the custom section, we will combine **freestyle UI5 controls** with **SAP Fiori elements building blocks** offered by the **flexible programming model**.
55

66
## Flexible Programming Model Overview
@@ -20,16 +20,16 @@ showing how to properly use building blocks in SAP Fiori elements extension poin
2020

2121
## Exercise 4.1 Remove existing Section via Page Map
2222

23-
The **SAP Fiori Tools Page Map** provides several ways of configuring the app and also allows to add and remove UI elements.\
24-
\(1\) In the SAP Business Application Studio, click the corresponding tile on the **Application Info** tab in order to open the SAP Fiori Tools Page Map.\
23+
The **SAP Fiori tools Page Map** provides several ways of configuring the app and also allows to add and remove UI elements.\
24+
\(1\) In the SAP Business Application Studio, click the corresponding tile on the **Application Info** tab in order to open the SAP Fiori tools Page Map.\
2525
If closed, you can reopen the Application Info tab via menu **View->Find Command...->Fiori: Open Application Info**.
2626

2727
![mydevspace - SAP Business Application Studio - Google Chrome](images/img_0.png "mydevspace - SAP Business Application Studio - Google Chrome")
2828

29-
Alternatively, we can open the SAP Fiori Tools Page Map via context menu on the folder **app** in the **Explorer** pane\
29+
Alternatively, we can open the SAP Fiori tools Page Map via context menu on the folder **app** in the **Explorer** pane\
3030
or via menu **View -> Find Command... -> Fiori: Show Page Map**
3131

32-
\(2\) On the SAP Fiori Tools Page Map tile **Object Page**, click icon ![icon](images/fieldicon00.png) (**Configure Page**).
32+
\(2\) On the SAP Fiori tools Page Map tile **Object Page**, click icon ![icon](images/fieldicon00.png) (**Configure Page**).
3333

3434
![mydevspace - SAP Business Application Studio - Google Chrome](images/img_000.png "mydevspace - SAP Business Application Studio - Google Chrome")
3535

@@ -204,7 +204,7 @@ Switch to the preview browser tab of the app.
204204

205205
## Summary
206206

207-
You've now successfully added a **custom section** via the **SAP Fiori Tools Page Map**, and used the **table building block** in the extension.\
207+
You've now successfully added a **custom section** via the **SAP Fiori tools Page Map**, and used the **table building block** in the extension.\
208208
You have tested the building block's **editing and navigation behaviour**, and defined a **side effect** showing that editing data in the table influences data shown in other areas of the app.
209209

210210
Continue to - [Exercise 5 - Adding a Micro Chart to the Table Building Block](../ex5/README.md)

0 commit comments

Comments
 (0)