Added everything for Step 5: Adding a Flag Button

wridgeu · May 23, 2020 · 2d014a4 · 2d014a4
1 parent 40f14cc
commit 2d014a4
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 18 deletions.
diff --git a/webapp/Component.js b/webapp/Component.js
@@ -22,6 +22,9 @@ sap.ui.define([
       // enable routing
       this.getRouter().initialize();
 
+			// allow saving values to the OData model
+			this.getModel().setDefaultBindingMode("TwoWay");
+
       // set the device model
       this.setModel(models.createDeviceModel(), "device");
     }

diff --git a/webapp/controller/Worklist.controller.js b/webapp/controller/Worklist.controller.js
@@ -3,11 +3,15 @@ sap.ui.define(
     "./BaseController",
     "sap/ui/model/json/JSONModel",
     "sap/m/library",
+    '../model/FlaggedType'
   ],
-  function (BaseController, JSONModel, mobileLibrary) {
+  function (BaseController, JSONModel, mobileLibrary, FlaggedType) {
     "use strict";
 
     return BaseController.extend("com.mrb.UI5-Testing.controller.Worklist", {
+      types : {
+        flagged: new FlaggedType()
+      },
       /**
        * Called when the worklist controller is instantiated.
        * @public

diff --git a/webapp/i18n/i18n.properties b/webapp/i18n/i18n.properties
@@ -23,6 +23,9 @@ TableCategoryColumnTitle=Category
 #XTIT: The title of the column containing the unit number and the unit of measure
 TableUnitNumberColumnTitle=Price
 
+#XTOL: tooltip for the flagged button
+flaggedTooltip=Mark this post as flagged
+
 #~~~ Object View ~~~~~~~~~~~~~~~~~~~~~~~~~~
 
 #XTIT: Object view title

diff --git a/webapp/model/FlaggedType.js b/webapp/model/FlaggedType.js
@@ -1,17 +1,39 @@
-sap.ui.define([
-	"sap/ui/model/SimpleType"
-], function (SimpleType) {
-	"use strict";
-	//Use data types if you need both formatting and parsing of a model value (two way instead of formatting - one way)
-	return SimpleType.extend("com.mrb.UI5-Testing.model.FlaggedType", {
-		//formats a model value to be displayed in the UI
-		formatValue: function () {
-		},
-		//parses a UI value to be stored in the model
-		parseValue: function () {
-		},
-		//checks a value for displaying validation errors
-		validateValue: function () {
-		}
-	});
-});
+sap.ui.define(["sap/ui/model/SimpleType"], function (SimpleType) {
+  "use strict";
+  //Use data types if you need both formatting and parsing of a model value (two way instead of formatting - one way)
+  return SimpleType.extend("com.mrb.UI5-Testing.model.FlaggedType", {
+    /**
+     * Formats the integer value from the model to a boolean for the pressed state of the flagged button
+     * General: "formats a model value to be displayed in the UI"
+     * @public
+     * @param {number} iFlagged the integer value of the formatted property
+     * @returns {boolean} 1 means true, all other numbers means false
+     */
+    formatValue: function (iFlagged) {
+      return iFlagged === 1;
+    },
+    /**
+     * Parses a boolean value from the property to an integer
+     * General: "parses a UI value to be stored in the model"
+     * @public
+     * @param {boolean} bFlagged true means flagged, false means not flagged
+     * @returns {number} true means 1 , false means 0
+     */
+    parseValue: function (bFlagged) {
+      if (bFlagged) {
+        return 1;
+      }
+      return 0;
+    },
+    /**
+     * Validates the value to be parsed
+     * General: checks a value for displaying validation errors
+     * @public
+     * Since there is only true and false, no client side validation is required
+     * @returns {boolean} true
+     */
+    validateValue: function () {
+      return true;
+    },
+  });
+});
diff --git a/webapp/view/Worklist.view.xml b/webapp/view/Worklist.view.xml
@@ -26,6 +26,7 @@
                     <Column width="33%" id="unitNumberColumn" hAlign="End">
                         <Text text="{i18n>TableUnitNumberColumnTitle}" id="unitNumberColumnTitle"/>
                     </Column>
+                    <Column width="80px" id="flaggedColumn" demandPopin="true" vAlign="Middle"/>
                 </columns>
                 <items>
                     <ColumnListItem vAlign="Middle">
@@ -35,6 +36,14 @@
                             <ObjectNumber number="{path: 'Price',formatter: '.formatter.numberUnit'}" 
                                           state="{path: 'Price',formatter: '.formatter.priceState'}" 
                                           unit="{Currency}" />
+                            <ToggleButton id="flaggedButton"
+                            tooltip="{i18n>flaggedTooltip}"
+                            icon="sap-icon://flag"
+                            pressed="{
+                                path: 'Flagged',
+                                type: '.types.flagged'
+                            }"
+                            class="sapUiMediumMarginBeginEnd"/>
                         </cells>
                     </ColumnListItem>
                 </items>