readme updated

.vscode/teched.code-snippets

@@ -0,0 +1,57 @@
+{
+	"2.2 Table Building Block": {
+		"scope": "cds",
+		"prefix": "#teched",
+		"body": [",\n    UI.LineItem  : [\n        {\n            $Type : 'UI.DataField',\n            Value : TravelID,\n        },\n        {\n            $Type : 'UI.DataField',\n            Value : TravelStatus_code,\n            Criticality : TravelStatus.criticality,\n        },\n        {\n            $Type : 'UI.DataField',\n            Value : BeginDate,\n        },\n        {\n            $Type : 'UI.DataField',\n            Value : EndDate,\n        },\n        {\n            $Type : 'UI.DataField',\n            Value : to_Agency_AgencyID,\n        },\n        {\n            $Type : 'UI.DataField',\n            Value : to_Customer_CustomerID,\n        },\n        {\n            $Type : 'UI.DataField',\n            Value : TotalPrice,\n        },\n        {\n            $Type : 'UI.DataFieldForAction',\n            Label : '{i18n>AcceptTravel}',\n            Action : 'TravelService.acceptTravel',\n        },\n        {\n            $Type : 'UI.DataFieldForAction',\n            Label : '{i18n>RejectTravel}',\n            Action : 'TravelService.rejectTravel',\n        },\n    ]"]
+	},
+	"3.1 Dynamic Page Layout": {
+		"scope": "xml",
+		"prefix": "#teched",
+		"body": ["    <f:DynamicPage id=\"FilterBarDefault\" class=\"sapUiResponsiveContentPadding\">\n        <f:title>\n            <f:DynamicPageTitle id=\"_IDGenDynamicPageTitle1\">\n                <f:heading>\n                    <Title id=\"_IDGenTitle1\" text=\"Travel\" level=\"H2\" />\n                </f:heading>\n                <f:snappedContent>\n                    <Panel headerText=\"{i18n>FilterStatus}\">\n                        <Text text=\"{fbConditions>/filtersTextInfo}\" class=\"sapUiTinyMargin\" />\n                    </Panel>\n                </f:snappedContent>\n            </f:DynamicPageTitle>\n        </f:title>\n        <f:header>\n            <f:DynamicPageHeader id=\"_IDGenDynamicPageHeader1\" pinnable=\"true\">\n                <VBox id=\"_IDGenVBox1\">\n                    <macros:FilterBar \n                        metaPath=\"@com.sap.vocabularies.UI.v1.SelectionFields\" \n                        id=\"FilterBar\" \n                        filterChanged=\".handlers.onFiltersChanged\" />\n                </VBox>\n            </f:DynamicPageHeader>\n        </f:header>\n        <f:content>\n            <macros:Table \n            id=\"myTable\" \n            filterBar=\"FilterBar\" \n            metaPath=\"@com.sap.vocabularies.UI.v1.LineItem\" />\n        </f:content>\n    </f:DynamicPage>"]
+	},
+	"3.2.1 onAfterRendering": {
+		"scope": "javascript,typescript",
+		"prefix": "#teched",
+		"body": ["             onAfterRendering: function (oEvent) {\n                var oView = this.getView();\n                var mFBConditions = new JSONModel({\n                    filtersTextInfo: oView.byId(\"FilterBar\").getActiveFiltersText()\n                });\n                oView.setModel(mFBConditions, \"fbConditions\");\n            },"]
+	},
+	"3.2.2 onFiltersChanged": {
+		"scope": "javascript,typescript",
+		"prefix": "#teched",
+		"body": ["            handlers: {\n                onFiltersChanged: function (oEvent) {\n                    var oSource = oEvent.getSource();\n                    var mFBConditions = oSource.getModel(\"fbConditions\");\n                    mFBConditions.setProperty(\"/filtersTextInfo\", oSource.getActiveFiltersText());\n                }             \n            }"]
+	},
+	"3.3.1 i18n.properties": {
+		"scope": "properties",
+		"prefix": "#teched",
+		"body": ["HighestPrice=Open Travels Highest Total Price (Thousands)\nFilterStatus=Table Filter Status"]
+	},
+	"3.3.2 f:snappedContent": {
+		"scope": "xml",
+		"prefix": "#teched",
+		"body": ["<Panel id='pn1' headerText='{i18n>HighestPrice}'>\n    <VBox id='vb1'>\n        <HeaderContainer scrollStep=\"200\" showDividers=\"false\" id=\"container1\" content=\"{\n            path:'/Travel', \n            parameters : {\n                $filter : 'TravelStatus_code eq 'O' and IsActiveEntity eq false or SiblingEntity/IsActiveEntity eq null',\n                $orderby : 'TotalPrice desc'\n            }\n        }\">\n            <GenericTile id='gt1' header=\"Travel {TravelID}\" subheader=\"{Description}\" press=\".handlers.onPressed\" class=\"sapUiTinyMarginTop tileLayout\">\n                <TileContent id='tc1' unit=\"{CurrencyCode_code}\" footer=\"{to_Customer/LastName}\">\n                    <NumericContent id='nc1' withMargin=\"false\" value=\"{TotalPrice}\" valueColor=\"Good\" scale=\"k\" />\n                </TileContent>\n            </GenericTile>\n        </HeaderContainer>\n    </VBox>\n</Panel>\n<Panel id='pn2' headerText=\"{i18n>FilterStatus}\">\n    <Text id='filterInfo1' text=\"{fbConditions>/filtersTextInfo}\" class=\"sapUiTinyMargin\" />\n</Panel>"]
+	},
+	"3.3.3 onPressed": {
+		"scope": "javascript,typescript",
+		"prefix": "#teched",
+		"body": [",\nonPressed: function (oEvent) {\n    var oContext = oEvent.getSource().getBindingContext();\n    this.routing.navigate(oContext);\n}"]
+	},
+	"6.3 CustomSection.fragment.xml": {
+		"scope": "xml",
+		"prefix": "#teched",
+		"body": ["<core:FragmentDefinition\n xmlns:core='sap.ui.core'\n xmlns='sap.m'\n xmlns:l='sap.ui.layout'\n xmlns:macros='sap.fe.macros'\n>\n<VBox core:require=\"{handler: 'sap/fe/cap/managetravels/ext/fragment/CustomSection'}\">  \n <MessageStrip\n   text='All bookings for travel {TravelID} got confirmed by the agency.'\n   showIcon='true'\n   class='sapUiSmallMarginBottom'>\n </MessageStrip>     \n <l:Grid hSpacing='1' containerQuery='true'\n   defaultSpan='L12 M12 S12'>\n  <l:content>\n  <macros:Table metaPath='to_Booking/@com.sap.vocabularies.UI.v1.LineItem'\n     id='bookingTable'/>\n  </l:content>\n </l:Grid>\n</VBox>\n</core:FragmentDefinition>"]
+	},
+	"7.3.1 l:dependents": {
+		"scope": "xml",
+		"prefix": "#teched",
+		"body": ["  <l:dependents>\n    <core:Fragment fragmentName=\"sap.fe.cap.managetravels.ext.fragment.Popover\" type=\"XML\"/>            \n  </l:dependents>   "]
+	},
+	"7.3.2 CustomSection.js": {
+		"scope": "javascript,typescript",
+		"prefix": "#teched",
+		"body": ["sap.ui.define([\"sap/ui/model/json/JSONModel\"], function (JSONModel) {\n    \"use strict\";\n    return {\n        onChartSelectionChanged: function (oEvent) {\n            var oView = this.editFlow.getView();\n            var oPopupModel = oView.getModel(\"popup\");\n            var oPopover = oEvent.getSource().getParent().getDependents()[0];            \n            if (oEvent.getParameter(\"selected\")) {\n                if (!oPopupModel) {\n                    oPopupModel = new JSONModel();\n                    oView.setModel(oPopupModel, \"popup\");\n                }\n                oPopupModel.setData(oEvent.getParameter(\"data\")[0].data, true);\n                // open popover at selected chart segment\n                oPopover.openBy(\n                    oEvent.getParameter(\"data\")[0].target\n                );\n            }\n        }\n    };\n});"]
+	},
+	"8.1 editFlow onBeforeSave": {
+		"scope": "javascript,typescript",
+		"prefix": "#teched",
+		"body": [",\neditFlow: {\n  onBeforeSave: function() {\n      //Check on green flights\n      if (!this.getView().getBindingContext().getProperty('GoGreen')){                          \n        return new Promise(async function(fnResolve, fnReject) {\n          var mSettings = {\n            id: "myFragment",\n            name: "sap.fe.cap.managetravels.ext.fragment.Trees4Tickets",\n            controller: this.base.getView().getController(),\n            contextPath: "/Travel",\n            initialBindingContext: this.getView().getBindingContext()\n          }\n          var oApproveDialog = await this.base.getExtensionAPI().loadFragment(mSettings);\n          oApproveDialog.setBindingContext(this.getView().getBindingContext());\n          let buttons = oApproveDialog.getButtons();\n          let saveButton = buttons.find(obj => obj.sId === "myFragment--Save");\n          saveButton.attachPress(function() {\n                    oApproveDialog.close();\n                    oApproveDialog.destroy();                   \n                    fnResolve();  }.bind(this));\n\n          let cancelButton = buttons.find(obj => obj.sId === "myFragment--Cancel");\n          cancelButton.attachPress(function() {\n                    oApproveDialog.close(); \n                    oApproveDialog.destroy();                 \n                    fnReject(); }.bind(this));\n            oApproveDialog.open();\n        }.bind(this));\n      }           \n  }\n}"]
+	}
+}

README.md

@@ -38,8 +38,8 @@ There are no special requirements to follow the exercises in this repository.
   - [Exercise 3.3 - Add Generic Tile Slider](/exercises/ex3#exercise-33---add-generic-tile-slider)
 - [Exercise 4 - Page Map: Configuring the Object Page Layout](/exercises/ex4#exercise-4---page-map-configuring-the-object-page-layout)
   - [Exercise 4.1 - Add Actions to Object Page Header](/exercises/ex4#exercise-41---add-actions-to-object-page-header)
-  - [Exercise 4.2 - Adding Group and Form Sections](/exercises/ex4#exercise-31---adding-group-and-form-sections)
-  - [Exercise 4.3 - Adding a Table Section](/exercises/ex4#exercise-42---adding-a-table-section)
+  - [Exercise 4.2 - Adding Group and Form Sections](/exercises/ex4#exercise-42---adding-group-and-form-sections)
+  - [Exercise 4.3 - Adding a Table Section](/exercises/ex4#exercise-43---adding-a-table-section)
 - [Exercise 5 - Page Map: Add Micro Chart Table Column](/exercises/ex5#exercise-5---page-map-add-micro-chart-table-column)
 - [Exercise 6 - Flexible Programming Model: Extending the Object Page with a Custom Section and Building Blocks](/exercises/ex6#exercise-6---flexible-programming-model-extending-the-object-page-with-a-custom-section-and-building-blocks)
   - [Exercise 6.1 Remove existing Section via Page Map](/exercises/ex6#exercise-61-remove-existing-section-via-page-map)

exercises/ex0/README.md

@@ -71,7 +71,7 @@ Select folder path **/home/user/projects/teched2022-DT181/** and click **Ok**. T
 
 ![select ws folder](../ex0/images/00_00_0066.png)
 
-In the **Explorer** pane on the left side of SAP Business Application Studio, you can see the workspace content.
+In the **Explorer** pane on the left side of SAP Business Application Studio, you should see the workspace content.
 
 ![select ws folder](../ex0/images/wsopen.png)
 

exercises/ex1/README.md

@@ -73,8 +73,8 @@ In the wizard step **Project Attributes**, add the following attributes to the a
 - **Application Namespace**: sap.fe.cap\
 (namespace has to match exactly for some of the subsequent exercises to work properly)
 
-- **Minimum SAPUI5 version**: Choose version 1.107.1\
- (This is the minimum SAPUI5 version for some of the subsequent exercises to work properly)
+- **Minimum SAPUI5 version**: Choose version 1.108.0\
+ (Minimum SAPUI5 version for some of the subsequent exercises to work properly)
 
 - Select **Configure Advanced Options** then **Add javasript code assist libraries to your project**
 
@@ -138,9 +138,9 @@ for SAP Business Application Studio, then restart with **Preview Application** a
 
 ## Usage of Guided Answers Extension by SAP for Trouble Shooting
 
-If you are experiencing an issue when previewing your application you can use the **Guided Answers extension by SAP** within your
-IDE to help troubleshooting. The Guided Answers Extension by SAP is **interactive documentation** designed to help users by guiding them through tasks\
-via a series of questions. You simply answer the questions presented to you to find the correct solution to your problem.\
+If you are experiencing an issue with the application preview you can use the **Guided Answers extension by SAP** within your IDE to\
+help with troubleshooting. The Guided Answers Extension by SAP is **interactive documentation** designed to help users by guiding them\
+through tasks via a series of questions. You simply answer the questions presented to you to find the correct solution to your problem.\
 You can access the Guided Answer extension by SAP through the IDE command palette using the command ‘SAP: Open Guided Answers’.
 
 ![](./images/ga1.png)

exercises/ex3/README.md

@@ -22,7 +22,10 @@ Take a look at the code pane on the right side.
 We apply the adopted code snippet to our main view.
 Switch back to the Business Application Studio and open file **main.view.xml**.
 
-(5) Add a declaration to the sap.f library to the header.
+(5) Add a declaration to the **sap.f** library to the header:
+```xml
+xmlns:f="sap.f"
+```
 
 (6) Replace the whole **\<Page\>** section with the adopted code snippet:
 
@@ -125,6 +128,8 @@ Switch to the preview browser tab.
 
 The target design of the app sketches an overview on open travels with a high total price in form of a tile slider in the custom page snapped header area. While this could be as well achieved by defining multiple tab views with a selection variant on a standard list report (and it is recommended to always evaluate what can be achieved with the standard means Fiori elements offers), customers might prefer an alternative design approach to meet their requirements, which can be achieved with the Flexible Programming Model.
 
+![](./images/sketchdetail.png)
+
 (16) Open the [Custom Page Sample](https://ui5.sap.com/test-resources/sap/fe/core/fpmExplorer/index.html#/customElements/customElementsOverview/customPageContent) in the **Flexible Programming Model Explorer**.
 
 (17) Click on a tile to navigate to a Fiori elements object page.

exercises/ex4/README.md

@@ -42,7 +42,7 @@ Define a text to be displayed as an action button label by entering (8) **Accept
 The popover informs about the number of missing text keys that were created.
 
 ![](./images/image15.png)
-## Exercise 3.1 - Adding Group and Form Sections
+## Exercise 4.2 - Adding Group and Form Sections
 
 In this exercise we will add a group section and several form sub sections. 
 
@@ -168,7 +168,7 @@ defined in file **app/field-control.cds** [line 86 ff.](/app/field-control.cds#8
 
 ![](./images/image55.png)
 
-## Exercise 4.2 - Adding a Table Section
+## Exercise 4.3 - Adding a Table Section
 
 We will now add a table section by using the Page Map.
 

exercises/ex8/README.md

@@ -79,7 +79,7 @@ The override function is called when pressing the Save button on the object page
 
 For more examples on overriding the edit flow API, you can check the [Flexible Programming Model Explorer](https://sapui5.hana.ondemand.com/test-resources/sap/fe/core/fpmExplorer/index.html#/controllerExtensions/controllerExtensionsOverview/basicExtensibility).
 
-## Exercise 7.2 Move XML Fragment to App Folder
+## Exercise 8.2 Move XML Fragment to App Folder
 
 The **xml fragment** containing the dialog definition is provided with the project.\
 We need to move it to the corresponding app's sub folder in order to make usage of it: