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
contributors: [ Hitesh Parmar>https://github.com/hitesh-parmar, Joachim Fiess>https://github.com/jo-fiess ]
10
10
---
11
11
12
12
# Refine the List Report with Additional UI Elements
@@ -33,21 +33,21 @@ In this step, you will learn how to add filters to the List Report page of your
33
33
34
34
1. From the Application Information page, click on the **ListReport** page
35
35
36
-
<!-- border -->
36
+
37
37
38
38
The Page Editor view opens up listing all the major page elements in the application outline structure.
39
39
40
40
2. Press the **+** icon in the **Filter Fields** sub-node of the **Filter Bar** node on the outline. It becomes visible, once you hover over the sub-node.
> This is enabled by copying the `UI.SelectionFields` annotation to the local annotation file and updating it with `category_code` property in the background. You can press  (Navigate to source code) icon displayed in the **Filter Fields** sub-node on hover to see the updated annotation in the local annotation file.
53
53
@@ -68,27 +68,27 @@ In this step, you will learn how to enhance the value help defined in the projec
68
68
69
69
1. In the application preview, click on the value help icon in the **Category** filter to take a look at the current value help.
70
70
71
-
<!-- border -->
71
+
72
72
73
73
The default value help will look like this:
74
74
75
-
<!-- border -->
75
+
76
76
77
77
2. To enrich the current value help with a description property and get it displayed as a drop-down, proceed as follows:
78
78
79
79
- In the Page Editor, select the **Category** sub-node on the outline under **Filter Fields** to show the properties of this filter field.
80
80
81
81
- In the Properties pane displayed to the right of the outline, find the **Display Type** property. Currently it shows **Value Help (base layer)**, indicating that value help is defined in the layer lower than this app. To enhance the value help settings, choose **Value Help** instead.
- In the pop-up dialog, make sure **Display as Dropdown** is switched on, press **Add Column** under **Results List**, choose **desc** in the **Property** column and press **Apply**.
86
86
87
-
<!-- border -->
87
+
88
88
89
89
3. Application preview is refreshed and displays the **Category** filter as drop-down list and shows the value help with the description column.
90
90
91
-
<!-- border -->
91
+
92
92
93
93
94
94
### Configure the application to load data automatically
@@ -97,14 +97,14 @@ In this step, you will learn how to configure the application to load data autom
97
97
98
98
1. In the Page Editor, select the **table** node on the outline to show the properties of the table.
1. Open the object page of your application by clicking one of the incidents within the list report table. You´ll see the field group **Incident Details** on the **Incident Overview** section.
The Page Editor view opens up listing all the major page elements in the application outline structure.
38
38
39
39
3. Expand the nodes **Sections->Incident Overview->Subsections->Incident Details->Form**, press the **+** icon in the **Fields** sub-node and choose **Add Basic Fields**.
5. Application preview automatically refreshes (if started) to show the additional field **Incident Description** within the field group **Incident Details**.
@@ -56,24 +56,24 @@ In the previous step, you added a new field to an existing field group. Now you
56
56
57
57
1. In Page editor, expand the nodes **Sections->Incident Overview** if not already expanded, press the **+** icon in the **Subsections** sub-node and choose **Add Form Section**.
>The content of field **Fragment Name** represents one of the prepared artifacts located in the `ext` folder.
97
97
98
98
In the Page Editor, you can now see the new custom section **Maximum Processing Time**. When you select the new section you will see its parameters on the right part of the UI.
99
99
100
100
You have now finished the creation of the new custom section. Once the application preview is refreshed, check the new section displayed on the object page.
Now you are going to add a new column to the object page table **Incidents Process Flow** showing the criticality of the listed items.
107
107
108
108
1. In Page editor, expand the nodes **Sections->Incident Process Flow->Table**, press the **+** icon in the **Columns** sub-node and choose **Add Basic Columns**.
**Process Step Status** column is added at the bottom of the columns list section in the outline.
117
117
118
118
3. Drag the newly added column to the top of the columns list and drop it there.
119
119
120
-
<!-- border -->
120
+
121
121
122
122
4. Choose the **Process Step Status** column to display its properties in the Properties pane to the right of the outline. In the **Criticality** field, change the value to **criticality**.
At this point, your list report object page application is complete.
147
147
148
148
> To prepare your app for translation, you can generate the translation keys for all the language dependent fields in your app. For that, choose the globe button at the top of the screen and, once prompted, press **Create**.
149
149
150
-
<!-- border -->
150
+
151
151
152
152
Over the past four tutorials, you have used the SAP Business Technology Platform, SAP Fiori tools and SAP Fiori elements to build this application. You have learned how to:
0 commit comments