Added everything for Step 12: Aggregation Binding Using Templates

wridgeu · May 20, 2020 · c54bfd7 · c54bfd7
1 parent c1537fa
commit c54bfd7
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 3 deletions.
diff --git a/webapp/controller/Home.controller.js b/webapp/controller/Home.controller.js
@@ -9,7 +9,10 @@ sap.ui.define(
     return BaseController.extend("com.mrb.UI5-Data-Binding.controller.Home", {
       onInit: function () {
         // Create a JSON model from an object literal
-        var oModel, oMessageManager;
+        var oModel, oMessageManager, oProductModel;
+
+        oProductModel = new JSONModel();
+		    oProductModel.loadData("./model/Products.json");
 
         oModel = new JSONModel({
           firstName: "Harry",
@@ -29,6 +32,9 @@ sap.ui.define(
         //the go-to way for global definition would be to define the model within the manifest.json-file
         //and retrieve it via "this.getOwnerComponent().getModel();"
         this.getView().setModel(oModel);
+
+        //set loaded JSON file as model with name 'products'
+		    this.getView().setModel(oProductModel, "products");
 
         //MessageManager is a singleton
         oMessageManager = sap.ui.getCore().getMessageManager();

diff --git a/webapp/i18n/i18n.properties b/webapp/i18n/i18n.properties
@@ -12,6 +12,17 @@ salesToDate=Sales to Date
 # Screen titles
 panel1HeaderText=Data Binding Basics 
 panel2HeaderText=Address Details
+panel3HeaderText=Aggregation Binding
+
+# Product list
+productListTitle=Product List
+stockValue=Current Stock Value
+
+# Invoice List
+invoiceListTitle=Invoices
+statusA=New
+statusB=In Progress
+statusC=Done
 
 # E-mail
 sendEmail=Send Mail

diff --git a/webapp/i18n/i18n_de.properties b/webapp/i18n/i18n_de.properties
@@ -12,6 +12,17 @@ salesToDate=Verk\u00e4ufe bis zum heutigen Datum
 # Screen titles
 panel1HeaderText=Data Binding Grundlagen
 panel2HeaderText=Adressdetails
+panel3HeaderText=Aggregation Binding
+
+# Product list
+productListTitle=Artikelliste
+stockValue=Lagerbestand Wert
+
+# Invoice List
+invoiceListTitle=Rechnungen
+statusA=Neu
+statusB=Laufend
+statusC=Abgeschlossen
 
 # E-mail
 sendEmail=E-mail versenden

diff --git a/webapp/i18n/i18n_en.properties b/webapp/i18n/i18n_en.properties
@@ -12,6 +12,17 @@ salesToDate=Sales to Date
 # Screen titles
 panel1HeaderText=Data Binding Basics 
 panel2HeaderText=Address Details
+panel3HeaderText=Aggregation Binding
+
+# Product list
+productListTitle=Product List
+stockValue=Current Stock Value
+
+# Invoice List
+invoiceListTitle=Invoices
+statusA=New
+statusB=In Progress
+statusC=Done
 
 # E-mail
 sendEmail=Send Mail

diff --git a/webapp/model/Products.json b/webapp/model/Products.json
@@ -0,0 +1,57 @@
+{ "Products": [ {
+    "ProductID": 1,
+    "ProductName": "Chai",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "10 boxes x 20 bags",
+    "UnitPrice": "18.0000",
+    "UnitsInStock": 39,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 10,
+    "Discontinued": false
+   }, {
+    "ProductID": 2,
+    "ProductName": "Chang",
+    "SupplierID": 1,
+    "CategoryID": 1,
+    "QuantityPerUnit": "24 - 12 oz bottles",
+    "UnitPrice": "19.0000",
+    "UnitsInStock": 17,
+    "UnitsOnOrder": 40,
+    "ReorderLevel": 25,
+    "Discontinued": true
+   }, {
+    "ProductID": 3,
+    "ProductName": "Aniseed Syrup",
+    "SupplierID": 1,
+    "CategoryID": 2,
+    "QuantityPerUnit": "12 - 550 ml bottles",
+    "UnitPrice": "10.0000",
+    "UnitsInStock": 0,
+    "UnitsOnOrder": 70,
+    "ReorderLevel": 25,
+    "Discontinued": false
+   }, {
+    "ProductID": 4,
+    "ProductName": "Chef Anton's Cajun Seasoning",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "48 - 6 oz jars",
+    "UnitPrice": "22.0000",
+    "UnitsInStock": 53,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": false
+   }, {
+    "ProductID": 5,
+    "ProductName": "Chef Anton's Gumbo Mix",
+    "SupplierID": 2,
+    "CategoryID": 2,
+    "QuantityPerUnit": "36 boxes",
+    "UnitPrice": "21.3500",
+    "UnitsInStock": 0,
+    "UnitsOnOrder": 0,
+    "ReorderLevel": 0,
+    "Discontinued": true
+   }]
+ }
diff --git a/webapp/model/formatter.js b/webapp/model/formatter.js
@@ -1,6 +1,9 @@
 sap.ui.define([
-	"sap/m/library"
-], function (mobileLibrary) {
+	"sap/m/library",
+	"sap/ui/core/Locale",
+	"sap/ui/core/LocaleData",
+	"sap/ui/model/type/Currency"
+], function (mobileLibrary, Locale, LocaleData, Currency) {
 	"use strict";
 	return {
 		formatMail: function(sFirstName, sLastName) {
@@ -9,6 +12,14 @@ sap.ui.define([
 				sFirstName + "." + sLastName + "@example.com",
 				oBundle.getText("mailSubject", [sFirstName]),
 				oBundle.getText("mailBody"));
+		},
+		formatStockValue: function(fUnitPrice, iStockLevel, sCurrCode) {
+			var sBrowserLocale = sap.ui.getCore().getConfiguration().getLanguage();
+			var oLocale = new Locale(sBrowserLocale);
+			var oLocaleData = new LocaleData(oLocale);
+			var oCurrency = new Currency(oLocaleData.mData.currencyFormat);
+			return oCurrency.formatValue([fUnitPrice * iStockLevel, sCurrCode], "string");
+
 		}
 	};
 });
diff --git a/webapp/view/Home.view.xml b/webapp/view/Home.view.xml
@@ -38,5 +38,33 @@
         </l:VerticalLayout>
       </content>
     </Panel>
+    <Panel headerText="{i18n>panel3HeaderText}" class="sapUiResponsiveMargin" width="auto">
+      <content>
+        <List headerText="{i18n>productListTitle}" items="{products>/Products}">
+          <items>
+            <ObjectListItem title="{products>ProductName}" number="{
+							parts: [
+								{path: 'products>UnitPrice'},
+								{path: '/currencyCode'}
+							],
+							type: 'sap.ui.model.type.Currency',
+							formatOptions: { showMeasure: false }
+						}" numberUnit="{/currencyCode}">
+              <attributes>
+                <ObjectAttribute text="{products>QuantityPerUnit}"/>
+                <ObjectAttribute title="{i18n>stockValue}" text="{
+									parts: [
+										{path: 'products>UnitPrice'},
+										{path: 'products>UnitsInStock'},
+										{path: '/currencyCode'}
+									],
+									formatter: '.formatter.formatStockValue'
+								}"/>
+              </attributes>
+            </ObjectListItem>
+          </items>
+        </List>
+      </content>
+    </Panel>
   </Page>
 </mvc:View>