It is easy to write a Search Help/Value Help/Suggestion Help when there is a simple Input filed.

If you want to replicate the same especially, when the input field is inside a table, it becomes difficult.  We cannot bind two models to the same element.

My blog will help you how to achieve it.

Below screen shots demonstrates the picture view

First Row of Supplier Name is through suggestion help.  On selecting the Suggestion help the Supplier ID gets Populated as 0

1.PNG

Second Row of Supplier Name is by Clicking  Value Help

2.PNG

Dialog Box opens to select the Supplier Name.  On selecting the Value the Supplier Id gets populated in the Supplier ID column

3.PNG

After selecting the value the value is filled in the second row of Supplier Name.

4.PNG

Like wise to demonstrate for Categories I have added three rows by clicking on Add Row button thrice.

5.PNG

Type a key on the 3rd row of Categories Code Text and the Suggestion List comes up with Category Text (Category Id).  Select on Suggestion List and one Suggestion List of Categories Code Text and the Categories Code gets populated in the 3rd row of Categories Code.

6.PNG

Like Wise for 4th Row of Categories Code Text, Click on Value Help and the Dialog box opens with suggestion values.  Select on value.

7.PNG

8.PNG

Similarly fill all the Values by selecting either by typing the keys or selecting from dialog boxes.

9.PNG

After filling the values check the rows to be deleted.

10.PNG

Click on Delete Button to delete the selected Rows.  The Updkz is set to “D” for the rows selected when the user clicks on Delete Button and the rows gets deleted.  The Updkz column is hidden and can be seen in the Task.view.xml code.

11.PNG

Click on Release button to get the values of Planned Start Date and Planned End Date.  The User Status also changes.

12.PNG

I have used the services from below link “http://services.odata.org/V2/OData/OData.svc“.  This does not require user authentication.

The first two rows of Categories Code Text fields are read only and if one does not want to remain, one can change the code by deleting the code in init method of Task.controller.js.

Note:- I have written code such that first two rows cannot be deleted as the value of Updkz will be “” and they are not set to “D” upon clicking Delete Button.  One can change the code if their requirement does not require it.

If the the Supplier Name is change then the Corresponding row of Supplier ID is set to Blank/Empty.

If the Categories Code Text is change then the corresponding row of Categories Code ID is set to Blank/Empty.

The main trick to achieve this functionality is “I have created two input fields which are hidden in (Task.view.xml code in  newtask folderid=”QI_ANT_LIST_NAME_TEXT_INPUT” , id=”QI_ANT_TASK_CODE_INPUT”)”

Project Structure

13.PNG

===========================================================================================================

Index.html Code

===========================================================================================================

<!DOCTYPE HTML>

<html>

  <head>

  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

  <meta http-equiv=’Content-Type’ content=’text/html;charset=UTF-8’/>

  <script

            src=”https://sapui5.hana.ondemand.com/resources/sap-ui-core.js

            id=”sap-ui-bootstrap”

            data-sap-ui-libs=”sap.m”

            data-sap-ui-theme=”sap_bluecrystal”

            data-sap-ui-compatVersion=”edge”

            data-sap-ui-resourceroots='{“taskHandler”: “”}’>

  </script>

  <!– only load the mobile lib “sap.m” and the “sap_bluecrystal” theme –>

  <script>

           sap.ui.getCore().attachInit(function() {

               new sap.m.Shell({

                   app: new sap.ui.core.ComponentContainer({

                            height : “100%”,

                            name : “taskHandler”

                   })

            }).placeAt(“content”);

       });

  </script>

  </head>

  <body class=”sapUiBody” role=”application”>

  <div id=”content”></div>

  </body>

</html>

===========================================================================================================

Component.js Code

===========================================================================================================

sap.ui.define([

  “sap/ui/core/UIComponent”,

  “sap/ui/Device”,

  “taskHandler/model/models”

], function(UIComponent, Device, models) {

  “use strict”;

  return UIComponent.extend(“taskHandler.Component”, {

  metadata: {

  includes: [“css/custom.css”],

  routing: {

  config: {

  routerClass: “sap.m.routing.Router”,

  viewType: “XML”,

  viewPath: “taskHandler.newtask”,

  targetControl: “idApp”,

  targetAggregation: “content”,

  clearTarget: false,

  },

  dependencies : {

  libs : [

  “sap.m”

  ],

  components : [

  “taskHandler.view.Table”

  ]

  },

  routes : [

                    {

                             pattern: “”,

                             view: “Task”,

                             viewId:”idTask”,

                             name: “taskPages”,

                             targetAggregation:”pages”

              

                    }  ]

  }

  },

  /**

  * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.

  * @public

  * @override

  */

  init: function() {

  // call the base component’s init function

  UIComponent.prototype.init.apply(this, arguments);

  // set the device model

  this.setModel(models.createDeviceModel(), “device”);

  this.getRouter().initialize();

  },

  createContent : function() {

  var oView = sap.ui.view({

  id : “idApp”,

  viewName : “taskHandler.newtask.App”,

  type : “XML”,

  viewData : { component : this }

  });

  var i18nModel = new sap.ui.model.resource.ResourceModel({ bundleUrl : “i18n/messageBundle.properties” });

  oView.setModel(i18nModel, “i18n”);

  var deviceModel = new sap.ui.model.json.JSONModel(

  {

  isPhone : jQuery.device.is.phone,

  isNoPhone : !jQuery.device.is.phone,

  listMode : (jQuery.device.is.phone) ? “None”

  : “SingleSelectMaster”,

  listItemType : (jQuery.device.is.phone) ? “Active”

  : “Inactive”

  });

  deviceModel.setDefaultBindingMode(“OneWay”);

  oView.setModel(deviceModel, “device”);

  return oView;

  },

  getContentDensityClass : function() {

  if (this._sContentDensityClass === undefined) {

  // check whether FLP has already set the content density class; do nothing in this case

  if (jQuery(document.body).hasClass(“sapUiSizeCozy”) || jQuery(document.body).hasClass(“sapUiSizeCompact”)) {

  this._sContentDensityClass = “”;

  } else if (!Device.system.phone) { // apply “compact” mode if touch is not supported

  this._sContentDensityClass = “sapUiSizeCompact”;

  } else {

  // “cozy” in case of touch support; default for most sap.m controls, but needed for desktop-first controls like sap.ui.table.Table

  this._sContentDensityClass = “sapUiSizeCozy”;

  }

  }

  return this._sContentDensityClass;

  }

  });

});

========================================================================================================

Helper.js Code from Utils folder

========================================================================================================

(function() {

  ‘use strict’;

  jQuery.sap.declare(“taskHandler.utils.Helper”);

  (function($){

   $.isBlank = function(obj){

     return(!obj || (typeof(obj) == “string” && $.trim(obj) === “”) || (typeof(obj) == “string” && $.trim(obj) === “undefined”) ||

      ($.isPlainObject(obj) && $.isEmptyObject(obj)) ||

      ($.isArray(obj) && obj.length == 0)

        );

   };

  })(jQuery);

  taskHandler.utils.Helper = {

  createF4HelpSelectDialog: function(C, f, a) {

  // var b = sap.ui.xmlfragment(f, C);

  // this.getView().getController()

  // var b = sap.ui.xmlfragment(“taskHandler.newtask.” + f, this.getView().getController());

  /*

   this.getView().addDependent(this.dialog);

           var i18nModel = new sap.ui.model.resource.ResourceModel({

                 bundleUrl : “i18n/i18n.properties”

             });

         dialog.setModel(i18nModel, “i18n”);  */

  var b = sap.ui.xmlfragment(“taskHandler.fragments.” + f, C);

  b.setModel(a);

  if (jQuery.device.is.phone) {

  b._dialog.setStretch(true)

  }

  return b

  },

  getCollectionPerRes: function(a, c) {

  this.result = [];

  var m = c && c.getView().getModel();

  if (!m) {

  m = new sap.ui.model.odata.ODataModel(“proxy/http/services.odata.org/V2/OData/OData.svc”, true);

  }

  this.arBatchConfig = a;

  if (a.length === 1) {

  this.ProcessingMode=”Read”;

  m.setUseBatch(false);

  this.modelReadOperation(m, “Suppliers”);

  }

  return this.result;

  },

  getCollectionTask: function(a, c) {

  this.result = [];

  var m = c && c.getView().getModel();

  if (!m) {

  m = new sap.ui.model.odata.ODataModel(“proxy/http/services.odata.org/V2/OData/OData.svc”, true);

  }

  this.arBatchConfig = a;

  if (a.length === 1) {

  this.ProcessingMode=”Read”;

  m.setUseBatch(false);

  this.modelReadOperation(m, “Categories”);

  }

  return this.result;

  },

  modelReadOperation: function(m, p) {

  return m.read(p, null, null, false, $.proxy(this.fnBatchSuccess, this), $.proxy(this.fnBatchError, this))

  },

  fnBatchSuccess : function(oData, oResponse, oErrResponse) {

  var data, obj;

  for ( var i = 0; i < this.arBatchConfig.length; i++) {

  switch (this.ProcessingMode) {

  case “Batch”:

  data = oResponse.data.__batchResponses.length > 0 &&

  oResponse.data.__batchResponses[i].data &&

  oResponse.data.__batchResponses[i].data.results &&

  oResponse.data.__batchResponses[i].data.results.length > 0 &&

  oResponse.data.__batchResponses[i].data.results;

  break;

  case “Read”:

  data = oResponse.data.results;

  break;

  case “Change”:

  data = oResponse.data.__batchResponses[i].__changeResponses && oResponse.data.__batchResponses[i].__changeResponses.length > 0 && oResponse.data.__batchResponses[i].__changeResponses[i].data;

  break;

  }

  // data conversion if needed

  if (this.arBatchConfig[i].arConversionRules) {

  data = this.convertCollection(data, this.arBatchConfig[i].arConversionRules);

  }

  // set prefix if needed

  if (this.arBatchConfig[i].itemsPrefix) {

  obj = {};

  obj[this.arBatchConfig[i].itemsPrefix] = data;

  this.result.push(obj);

  } else if (this.ProcessingMode === ProcessingModeEnum.Batch){

  this.result.push(data);

  } else {

  this.result = data;

  };

  }

  if (oErrResponse && oErrResponse.length > 0) {

  var oJson = oErrResponse[0].response.body;

  var oNewJ = $.parseJSON(oJson);

  this.result = {};

  this.result.error = oNewJ.error.message.value;

  jQuery.sap.log.error(“Error occurs during batch processing: ” + oNewJ.error.message.value);

  throw {message : oNewJ.error.message.value, details : oNewJ.error.message.value};

  };

  },

  convertCollection : function(arODataProperties, arExpected) {

  var arResult = [];

  if (!arODataProperties) {

  return arResult;

  }

  $.each(arODataProperties, function(index, arODataProperty) {

  var obj = {};

  if (arExpected && $.isArray(arExpected) && arExpected.length > 0) {

  for ( var i = 0; i < arExpected.length; i++) {

  obj[arExpected[i].output] = arODataProperty[arExpected[i].source];

  }

  } else {

  obj = arODataProperty;

  }

  arResult.push(obj);

  });

  return arResult;

  },

  fnBatchError : function(oError) {

  this.result.error = oError.message;

  jQuery.sap.log.error(“Error occurs during batch processing: ” + oError.message);

  sap.ca.ui.message.showMessageBox({

  type : sap.ca.ui.message.Type.ERROR,

  message : oError.message,

  details : oError.response.statusText

  });

  },

  convertToISODateTime: function(d) {

  if ($.isBlank(d)) {

  return

  }

  var a = new Date(d),

  t = a.getTimezoneOffset();

  a.setHours(a.getHours() – ~~(t / 60));

  a.setMinutes(a.getMinutes() – (t / 60 – ~~(t / 60)) * 60);

  return a.toISOString()

  },

  isValidDate: function(d) {

  if ($.isBlank(d) || isNaN(Date.parse(d))) {

  return false

  }

  return true

  }

  }

}());

============================================================================================================

model.js code from model folder

============================================================================================================

sap.ui.define([

  “sap/ui/model/json/JSONModel”,

  “sap/ui/Device”

], function(JSONModel, Device) {

  “use strict”;

  return {

  createDeviceModel: function() {

  var oModel = new JSONModel(Device);

  oModel.setDefaultBindingMode(“OneWay”);

  return oModel;

  }

  };

});

============================================================================================================

PerResSelectDialog.fragment.xml code to populate for Supplier Details Dialog in fragments folder

============================================================================================================

<SelectDialog items=”{path : ‘/items’, sorter : { path : ‘category’, descending : false, group : true } }”

  id=”PerResSelectDialog” confirm=”confirmDefectSelectDialog” filterOperator=”Contains” filterPath=”title” cancel=”cancelDefectSelectDialog”

  liveChange=”searchDefectLocation” noDataText=”{i18n>QI_CATEGORY_DIALOG_EMPTY_MSG}” search=”searchDefectLocation” title=”Choose Supplier Name” xmlns=”sap.m”>

  <StandardListItem

           key = “{key}”

  codeGroup = “{codeGroup}”

  category = “{category}”

  title = “{title}”

  catalogType = “{catalogType}”/>

</SelectDialog>

============================================================================================================

TaskSelectDialog.fragment.xml code to populate for Category Details Dialog in fragments folder

============================================================================================================

<SelectDialog

    items = “{path : ‘/items’,

               sorter : { path : ‘category’,

                            descending : false,

                            group : true

                        }

            }”

    id=”TaskSelectDialog”

    confirm=”confirmTaskSelectDialog”

    filterOperator=”Contains”

    filterPath=”title”

    cancel=”cancelDefectSelectDialog”

  liveChange=”searchDefectLocation”

  noDataText=”{i18n>QI_CATEGORY_DIALOG_EMPTY_MSG}”

  search=”searchDefectLocation”

  title=”Choose a Category”

  xmlns=”sap.m”>

  <StandardListItem

           key = “{key}”

  codeGroup = “{codeGroup}”

  category = “{category}”

  title = “{title}”

  catalogType = “{catalogType}”/>

</SelectDialog>

================================================================================================================

App.controller.js code in  newtask folder

================================================================================================================

sap.ui.define([

  “sap/ui/core/mvc/Controller”

], function(Controller) {

  “use strict”;

  return Controller.extend(“taskHandler.newtask.App”, {

  onInit:function()

  {

  this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());

  }

  });

});

================================================================================================================

App.view.xml code in  newtask folder

================================================================================================================

<mvc:View controllerName=”taskHandler.newtask.App” xmlns:html=”http://www.w3.org/1999/xhtml” xmlns:mvc=”sap.ui.core.mvc” xmlns=”sap.m”>

  <App id=”idApp”>

  </App>

</mvc:View>

================================================================================================================

Task.controller.js code in  newtask folder

================================================================================================================

var selectedIndex1;

jQuery.sap.require(“sap.m.MessageBox”);

jQuery.sap.require(“sap.m.MessageToast”);

jQuery.sap.require(“taskHandler.utils.Helper”);

sap.ui

  .controller(

  “taskHandler.newtask.Task”,

  {

  /**

  * Called when a controller is instantiated and its View

  * controls (if available) are already created. Can be used

  * to modify the View before it is displayed, to bind event

  * handlers and do other one-time initialization.

  *

  * @memberOf newtask.Task

  */

  onInit : function() {

  var taskList = {};

  var taskObj = [];

  taskList[“myTasks”] = taskObj;

  var myTasksModel = new sap.ui.model.json.JSONModel();

  myTasksModel.setData(taskList);

  var tsModelData = myTasksModel.oData.myTasks;

  var taskData = {};

  taskData.taskCode = “0”;

  taskData.taskCodeText = “Food”;

  taskData.userStatus = “INIT”;

  taskData.perRes = “”;

  taskData.listName = “”;

  taskData.startDate = “”;

  taskData.endDate = “”;

  taskData.Updkz = “”;

  tsModelData.push(taskData);

  taskData = {};

  taskData.taskCode = “1”;

  taskData.taskCodeText = “Beverages”;

  taskData.userStatus = “INIT”;

  taskData.perRes = “”;

  taskData.listName = “”;

  taskData.startDate = “”;

  taskData.endDate = “”;

  taskData.Updkz = “”;

  tsModelData.push(taskData);

  this.getView().byId(“idTaskDetails”).setModel(

  myTasksModel);

  var items = this.getView().byId(“idTaskDetails”)

  .getItems();

  items[0].getAggregation(“cells”)[1].setEditable(false);

  items[1].getAggregation(“cells”)[1].setEditable(false);

  items[0].getAggregation(“cells”)[1].setEnabled(false);

  items[1].getAggregation(“cells”)[1].setEnabled(false);

  items[0].getAggregation(“cells”)[1].setValue(“Food”);

  items[1].getAggregation(“cells”)[1]

  .setValue(“Beverages”);

  this.perResGetRequest();

  this.taskGetRequest();

  },

  perResGetRequest : function() {

  this.colon = ” : “;

  this.openingBracket = ” (“;

  this.closingBracket = “)”;

  this.itemSet = new sap.ui.core.Item({

  key : “{key}” + this.colon + “{catalogType}”

  + this.colon + “{codeGroup}”,

  text : “{title}” + this.openingBracket

  + “{category}” + this.closingBracket,

  active : true

  });

  // Person Responsible

  this.oPerResInput = this

  .byId(“QI_ANT_LIST_NAME_TEXT_INPUT”);

  var aTask = [];

  var bPerRes = [ {

  output : “key”,

  source : “ID”

  }, {

  output : “title”,

  source : “Name”

  }, {

  output : “codeGroup”,

  source : “Name”

  }, {

  output : “category”,

  source : “Name”

  }, {

  output : “catalogType”,

  source : “Name”

  } ];

  aTask.push({

  indexCollection : 0,

  arConversionRules : bPerRes,

  itemsPrefix : “items”

  });

  var d = taskHandler.utils.Helper.getCollectionPerRes(

  aTask, this);

  this.l = d && d.length > 0 && d[0];

  this.mPerRes = new sap.ui.model.json.JSONModel();

  this.mPerRes.setData(this.l);

  this.getView().setModel(this.mPerRes, “perResModel”);

  this.oPerResInput.setModel(this.mPerRes);

  this.oPerResInput.bindAggregation(“suggestionItems”,

  “/items”, this.itemSet);

  this.selectedPerRes = new sap.m.StandardListItem({

  key : “{key}”,

  codeGroup : “{codeGroup}”,

  category : “{category}”,

  title : “{title}”,

  catalogType : “{catalogType}”,

  active : true

  });

  },

  onPerResSelect : function(e) {

  selectedIndex1 = parseInt(e.getSource().getId().split(

  “idTaskDetails-“)[1]);

  if (!this.PerResSelectDialog) {

  this.PerResSelectDialog = taskHandler.utils.Helper

  .createF4HelpSelectDialog(this,

  “PerResSelectDialog”,

  this.oPerResInput.getModel())

  }

  this.setInitialFilter(e.getSource()._lastValue,

  this.PerResSelectDialog)

  },

  filterDialog : function(v, i) {

  var f = [];

  var s = new sap.ui.model.Filter(“title”,

  sap.ui.model.FilterOperator.Contains, v);

  f.push(s);

  i.filter(f);

  },

  setInitialFilter : function(f, s) {

  f = f.split(this.openingBracket)[0];

  s.open(f);

  var i = s.getBinding(“items”);

  if (!$.isBlank(f)) {

  this.filterDialog(f, i)

  } else if (f === “” && i.aFilters.length > 0) {

  this.filterDialog(f, i)

  }

  },

  onSuggestionItemSelected : function(e) {

  var v = e.getParameter(“selectedItem”);

  if (v !== undefined) {

  var t = new sap.m.StandardListItem({

  key : “{key}”,

  codeGroup : “{codeGroup}”,

  category : “{category}”,

  title : “{title}”,

  catalogType : “{catalogType}”

  });

  var p = v.mProperties.key.split(this.colon);

  t.key = p[0];

  t.catalogType = p[1];

  t.codeGroup = p[2];

  p = v.mProperties.text.split(this.openingBracket);

  t.title = p[0];

  t.category = p[1].split(this.closingBracket)[0];

  //

  var items = this.getView().byId(“idTaskDetails”)

  .getItems();

  selectedIndex1 = parseInt(e.getSource().getId()

  .split(“idTaskDetails-“)[1]);

  items[selectedIndex1].getAggregation(“cells”)[4] = t.category;

  items[selectedIndex1].getAggregation(“cells”)[3]

  .setText(t.key);

  if (e.getSource() === this.oPerResInput) {

  this.selectedPerRes = t;

  }

  }

  },

  onSuggest : function(e) {

  var v = e.getParameter(“suggestValue”);

  selectedIndex1 = parseInt(e.getSource().getId().split(

  “idTaskDetails-“)[1]);

  if (v !== undefined) {

  this.byId(e.getSource().getId()).setModel(

  this.mPerRes);

  this.byId(e.getSource().getId()).bindAggregation(

  “suggestionItems”, “/items”, this.itemSet);

  this.filterDialog(v, e.getSource().getBinding(

  “suggestionItems”));

  if (e.getSource() === this.oPerResInput) {

  this.selectedPerRes = “”;

  }

  e.getSource().setValueState(

  sap.ui.core.ValueState.None)

  }

  },

  searchDefectLocation : function(e) {

  var v = e.getParameter(“value”);

  if (v !== undefined) {

  this.filterDialog(v, e.getSource().getBinding(

  “items”));

  }

  },

  cancelDefectSelectDialog : function(e) {

  },

  confirmDefectSelectDialog : function(e) {

  var s = e.getParameter(“selectedItem”);

  var items = this.getView().byId(“idTaskDetails”)

  .getItems();

  var i;

  var p = s.oBindingContexts.undefined.sPath.split(“/”);

  if (“PerResSelectDialog” === e.getSource().sId) {

  i = items[selectedIndex1].getAggregation(“cells”)[4];

  }

  if (s) {

  var p = s.oBindingContexts.undefined.sPath

  .split(“/”);

  var a = p[p.length – 1];

  i.setValue(s.getTitle());

  i.setValueState(sap.ui.core.ValueState.None);

  var b = s.oBindingContexts.undefined.oModel.oData.items[a];

  i.setValue(b.title);

  items[selectedIndex1].getAggregation(“cells”)[3]

  .setText(b.key);

  items[selectedIndex1].getAggregation(“cells”)[4] = b;

  }

  },

  onClickAddTask : function(e) {

  var myTasksModel = this.getView().byId(“idTaskDetails”)

  .getModel();

  var tsModelData = myTasksModel.oData.myTasks;

  var taskData = {};

  taskData.taskCode = “”;

  taskData.taskCodeText = “”;

  taskData.userStatus = “INIT”;

  taskData.perRes = “”;

  taskData.listName = “”;

  taskData.startDate = “”;

  taskData.endDate = “”;

  taskData.Updkz = “I”;

  tsModelData.push(taskData);

  this.getView().byId(“idTaskDetails”).setModel(

  myTasksModel);

  this.getView().byId(“idTaskDetails”).getModel()

  .refresh(true);

  },

  onClickDeleteTask : function(e) {

  var selectedList = this.getView().byId(“idTaskDetails”)

  .getSelectedItems();

  for (var i = 0; i < selectedList.length; i++) {

  if (selectedList[i].getAggregation(“cells”)[7]

  .getText() !== “”)

  selectedList[i].getAggregation(“cells”)[7]

  .setText(“D”);

  }

  if (selectedList.length > 0) {

  var items = this.getView().byId(“idTaskDetails”)

  .getItems();

  var taskList = {};

  var taskObj = [];

  taskList[“myTasks”] = taskObj;

  var myTasksModelNew = new sap.ui.model.json.JSONModel();

  myTasksModelNew.setData(taskList);

  var tsModelDataNew = myTasksModelNew.oData.myTasks;

  var count = 0;

  var taskArrValue = [];

  var listArrValue = [];

  for (var k = 0; k < items.length; k++) {

  if (items[k].getAggregation(“cells”)[7]

  .getText() === “”

  || items[k].getAggregation(“cells”)[7]

  .getText() === “I”) {

  var taskData = {};

  taskData.taskCode = items[k]

  .getAggregation(“cells”)[0]

  .getText();

  taskArrValue[count] = items[k]

  .getAggregation(“cells”)[1]

  .getValue();

  taskData.userStatus = items[k]

  .getAggregation(“cells”)[2]

  .getText();

  taskData.perRes = items[k]

  .getAggregation(“cells”)[3]

  .getText();

  listArrValue[count] = items[k]

  .getAggregation(“cells”)[4]

  .getValue();

  taskData.startDate = items[k]

  .getAggregation(“cells”)[5]

  .getText();

  taskData.endDate = items[k]

  .getAggregation(“cells”)[6]

  .getText();

  taskData.Updkz = items[k]

  .getAggregation(“cells”)[7]

  .getText();

  tsModelDataNew.push(taskData);

  count++;

  }

  }

  this.getView().byId(“idTaskDetails”).setModel(

  myTasksModelNew);

  this.getView().byId(“idTaskDetails”).getModel()

  .refresh(true);

  for (var n = 0; n < listArrValue.length; n++) {

  items[n].getAggregation(“cells”)[1]

  .setValue(taskArrValue[n]);

  items[n].getAggregation(“cells”)[4]

  .setValue(listArrValue[n]);

  }

  }

  },

  listChanged : function(e) {

  selectedIndex1 = parseInt(e.getSource().getId().split(

  “idTaskDetails-“)[1]);

  var items = this.getView().byId(“idTaskDetails”)

  .getItems();

  items[selectedIndex1].getAggregation(“cells”)[3]

  .setText(“”);

  items[selectedIndex1].getAggregation(“cells”)[4]

  .setValueState(sap.ui.core.ValueState.None);

  },

  onClickRelease : function(e) {

  var items = this.getView().byId(“idTaskDetails”)

  .getItems();

  var systemCurDate = taskHandler.utils.Helper

  .convertToISODateTime(new Date());

  var sysDate = new Date();

  sysDate.setDate(sysDate.getDate() + 61);

  var systemEndDate = taskHandler.utils.Helper

  .convertToISODateTime(sysDate);

  systemCurDate = systemCurDate.split(“T”);

  systemEndDate = systemEndDate.split(“T”);

  var systemCurTime = systemCurDate[1].split(“.”);

  systemCurTime = systemCurTime[0];

  systemCurDate = systemCurDate[0];

  systemEndDate = systemEndDate[0];

  if (items.length > 0) {

  for (var i = 0; i < items.length; i++) {

  items[i].getAggregation(“cells”)[2]

  .setText(“QARV”); // user status

  items[i].getAggregation(“cells”)[5]

  .setText(systemCurDate);

  items[i].getAggregation(“cells”)[6]

  .setText(systemEndDate);

  }

  }

  this.getView().byId(“idTaskDetails”).getModel()

  .refresh(true);

  },

  taskGetRequest : function() {

  var i = new sap.ui.core.Item({

  key : “{key}” + this.colon + “{catalogType}”

  + this.colon + “{codeGroup}”,

  text : “{title}” + this.openingBracket

  + “{category}” + this.closingBracket,

  active : true

  });

  this.oTaskInput = this.byId(“QI_ANT_TASK_CODE_INPUT”);

  var aTask = [];

  var bTask = [ {

  output : “key”,

  source : “ID”

  }, {

  output : “title”,

  source : “Name”

  }, {

  output : “codeGroup”,

  source : “Name”

  }, {

  output : “category”,

  source : “ID”

  }, {

  output : “catalogType”,

  source : “Name”

  } ];

  aTask.push({

  indexCollection : 0,

  arConversionRules : bTask,

  itemsPrefix : “items”

  });

  var dTask = taskHandler.utils.Helper.getCollectionTask(

  aTask, this);

  this.lTask = dTask && dTask.length > 0 && dTask[0];

  this.mTask = new sap.ui.model.json.JSONModel();

  this.mTask.setData(this.lTask);

  this.oTaskInput.setModel(this.mTask);

  this.oTaskInput.bindAggregation(“suggestionItems”,

  “/items”, this.itemSet);

  this.selectedTaskCode = new sap.m.StandardListItem({

  key : “{key}”,

  codeGroup : “{codeGroup}”,

  category : “{category}”,

  title : “{title}”,

  catalogType : “{catalogType}”,

  active : true

  });

  },

  onTaskSelect : function(e) {

  selectedIndex1 = parseInt(e.getSource().getId().split(

  “idTaskDetails-“)[1]);

  if (!this.TaskSelectDialog) {

  this.TaskSelectDialog = taskHandler.utils.Helper

  .createF4HelpSelectDialog(this,

  “TaskSelectDialog”, this.oTaskInput

  .getModel())

  }

  this.setInitialFilter(e.getSource()._lastValue,

  this.TaskSelectDialog)

  },

  taskChanged : function(e) {

  selectedIndex1 = parseInt(e.getSource().getId().split(

  “idTaskDetails-“)[1]);

  var items = this.getView().byId(“idTaskDetails”)

  .getItems();

  items[selectedIndex1].getAggregation(“cells”)[0]

  .setText(“”);

  items[selectedIndex1].getAggregation(“cells”)[1]

  .setValueState(sap.ui.core.ValueState.None);

  },

  onSuggestionItemSelectedTask : function(e) {

  var v = e.getParameter(“selectedItem”);

  if (v !== undefined) {

  var t = new sap.m.StandardListItem({

  key : “{key}”,

  codeGroup : “{codeGroup}”,

  category : “{category}”,

  title : “{title}”,

  catalogType : “{catalogType}”

  });

  var p = v.mProperties.key.split(this.colon);

  t.key = p[0];

  t.catalogType = p[1];

  t.codeGroup = p[2];

  p = v.mProperties.text.split(this.openingBracket);

  t.title = p[0];

  t.category = p[1].split(this.closingBracket)[0];

  var items = this.getView().byId(“idTaskDetails”)

  .getItems();

  selectedIndex1 = parseInt(e.getSource().getId()

  .split(“idTaskDetails-“)[1]);

  items[selectedIndex1].getAggregation(“cells”)[0]

  .setText(t.category);

  items[selectedIndex1].getAggregation(“cells”)[1] = t.title;

  if (e.getSource() === this.oTaskInput) {

  this.selectedTaskCode = t;

  }

  }

  },

  onSuggestTask : function(e) {

  var v = e.getParameter(“suggestValue”);

  selectedIndex1 = parseInt(e.getSource().getId().split(

  “idTaskDetails-“)[1]);

  if (v !== undefined) {

  this.byId(e.getSource().getId()).setModel(

  this.mTask);

  this.byId(e.getSource().getId()).bindAggregation(

  “suggestionItems”, “/items”, this.itemSet);

  this.filterDialog(v, e.getSource().getBinding(

  “suggestionItems”));

  if (e.getSource() === this.oTaskInput) {

  this.selectedTaskCode = “”;

  }

  e.getSource().setValueState(

  sap.ui.core.ValueState.None)

  }

  },

  confirmTaskSelectDialog : function(e) {

  var s = e.getParameter(“selectedItem”);

  var items = this.getView().byId(“idTaskDetails”)

  .getItems();

  var i;

  var p = s.oBindingContexts.undefined.sPath.split(“/”);

  if (“TaskSelectDialog” === e.getSource().sId) {

  i = items[selectedIndex1].getAggregation(“cells”)[1];

  }

  if (s) {

  var p = s.oBindingContexts.undefined.sPath

  .split(“/”);

  var a = p[p.length – 1];

  i.setValue(s.getTitle());

  i.setValueState(sap.ui.core.ValueState.None);

  var b = s.oBindingContexts.undefined.oModel.oData.items[a];

  i.setValue(b.title);

  items[selectedIndex1].getAggregation(“cells”)[0]

  .setText(b.category);

  items[selectedIndex1].getAggregation(“cells”)[1] = b;

  }

  }

  // ///////////////////////////////////////////////////////////////

  /**

  * Similar to onAfterRendering, but this hook is invoked before

  * the controller’s View is re-rendered (NOT before the first

  * rendering! onInit() is used for that one!).

  *

  * @memberOf newtask.Task

  */

  // onBeforeRendering: function() {

  //

  // },

  /**

  * Called when the View has been rendered (so its HTML is part

  * of the document). Post-rendering manipulations of the HTML

  * could be done here. This hook is the same one that SAPUI5

  * controls get after being rendered.

  *

  * @memberOf newtask.Task

  */

  // onAfterRendering: function() {

  //

  // },

  /**

  * Called when the Controller is destroyed. Use this one to free

  * resources and finalize activities.

  *

  * @memberOf newtask.Task

  */

  // onExit: function() {

  //

  // }

  });

================================================================================================================

Task.view.xml code in  newtask folder

================================================================================================================

<core:View xmlns:core=”sap.ui.core” xmlns:mvc=”sap.ui.core.mvc” xmlns=”sap.m”

  controllerName=”taskHandler.newtask.Task” xmlns:html=”http://www.w3.org/1999/xhtml“>

  <Page title=”Title”>

  <content>

  <Input id=”QI_ANT_LIST_NAME_TEXT_INPUT” showValueHelp=”true” showSuggestion=”true” visible=”false”

  suggestionItemSelected=”onSuggestionItemSelected” editable=”true” suggest=”onSuggest”

  filterSuggests=”false” valueHelpRequest=”onPerResSelect” >

  </Input>

  <Input id=”QI_ANT_TASK_CODE_INPUT” showValueHelp=”true” showSuggestion=”true” visible=”false”

  suggestionItemSelected=”onSuggestionItemSelectedTask” editable=”true” suggest=”onSuggestTask”

  filterSuggests=”false” valueHelpRequest=”onTaskSelect” >

  </Input>

  <Table id=”idTaskDetails” inset=”false” items=”{/myTasks}” mode=”MultiSelect”>

  <headerToolbar>

  <Toolbar>

  <Button press=”onClickRelease” type=”Emphasized” text=”Release”/>

  <Button press=”onClickAddTask” type=”Emphasized” text=”Add New”/>

  <Button press=”onClickDeleteTask” type=”Emphasized” text=”Delete”/>

  </Toolbar>

  </headerToolbar>

  <columns>

  <Column demandPopin=”true” hAlign=”Center” minScreenWidth=”Tablet”>

  <Text text=”Categories Code”/>

  </Column>

  <Column demandPopin=”true” hAlign=”Center” minScreenWidth=”Tablet”  width=”19rem”>

  <Text text=”Categories Code Text”/>

  </Column>

  <Column demandPopin=”true” hAlign=”Center” minScreenWidth=”Tablet”>

  <Text text=”User Status”/>

  </Column>

  <Column demandPopin=”true” hAlign=”Center” minScreenWidth=”Tablet” width=”7rem”>

  <Text text=”Suppliers ID”/>

  </Column>

  <Column demandPopin=”true” hAlign=”Center” minScreenWidth=”Tablet”  width=”19rem”>

  <Text text=”Suppliers Name” />

  </Column>

  <Column demandPopin=”true” hAlign=”Center” minScreenWidth=”Tablet”>

  <Text text=”Planned Start Date”/>

  </Column>

  <Column demandPopin=”true” hAlign=”Center” minScreenWidth=”Tablet”>

  <Text text=”Planned End Date”/>

  </Column>

  <Column demandPopin=”true” hAlign=”Center” minScreenWidth=”Tablet” visible=”false”>

  <Text text=”Updkz”/>

  </Column>

  </columns>

  <items>

  <ColumnListItem>

  <cells>

  <Text text=”{taskCode}”/>

  <Input  showValueHelp=”true” editable=”true”  enabled=”true”  id=”task” value=”” width=”19rem”

  filterSuggests=”false” showSuggestion=”true”  liveChange=”taskChanged” suggestionItemSelected=”onSuggestionItemSelectedTask” suggest=”onSuggestTask” valueHelpRequest=”onTaskSelect”/>

  <Text text=”{userStatus}”/>

  <Text text=”{perRes}”/>

  <Input  showValueHelp=”true” editable=”true”  enabled=”true”  id=”lName” value=”” width=”19rem”

  filterSuggests=”false” showSuggestion=”true”  liveChange=”listChanged” suggestionItemSelected=”onSuggestionItemSelected” suggest=”onSuggest” valueHelpRequest=”onPerResSelect”/>

  <Text text=”{startDate}”/>

  <Text text=”{endDate}”/>

  <Text text=”{Updkz}”/>

  </cells>

  </ColumnListItem>

  </items>

  </Table>

  </content>

  </Page>

</core:View>

=================================================================================================================

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply