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
Second Row of Supplier Name is by Clicking Value Help
Dialog Box opens to select the Supplier Name. On selecting the Value the Supplier Id gets populated in the Supplier ID column
After selecting the value the value is filled in the second row of Supplier Name.
Like wise to demonstrate for Categories I have added three rows by clicking on Add Row button thrice.
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.
Like Wise for 4th Row of Categories Code Text, Click on Value Help and the Dialog box opens with suggestion values. Select on value.
Similarly fill all the Values by selecting either by typing the keys or selecting from dialog boxes.
After filling the values check the rows to be deleted.
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.
Click on Release button to get the values of Planned Start Date and Planned End Date. The User Status also changes.
I have used the services from below link “https://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 folder — id=”QI_ANT_LIST_NAME_TEXT_INPUT” , id=”QI_ANT_TASK_CODE_INPUT”)”
Project Structure
===========================================================================================================
Index.html Code
===========================================================================================================
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”: “”}’>
<!– only load the mobile lib “sap.m” and the “sap_bluecrystal” theme –>
===========================================================================================================
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
============================================================================================================
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}”/>
============================================================================================================
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}”/>
================================================================================================================
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
================================================================================================================
https://www.w3.org/1999/xhtml” xmlns:mvc=”sap.ui.core.mvc” xmlns=”sap.m”>
================================================================================================================
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
================================================================================================================
controllerName=”taskHandler.newtask.Task” xmlns:html=”https://www.w3.org/1999/xhtml“>
suggestionItemSelected=”onSuggestionItemSelected” editable=”true” suggest=”onSuggest”
filterSuggests=”false” valueHelpRequest=”onPerResSelect” >
suggestionItemSelected=”onSuggestionItemSelectedTask” editable=”true” suggest=”onSuggestTask”
filterSuggests=”false” valueHelpRequest=”onTaskSelect” >
filterSuggests=”false” showSuggestion=”true” liveChange=”taskChanged” suggestionItemSelected=”onSuggestionItemSelectedTask” suggest=”onSuggestTask” valueHelpRequest=”onTaskSelect”/>
filterSuggests=”false” showSuggestion=”true” liveChange=”listChanged” suggestionItemSelected=”onSuggestionItemSelected” suggest=”onSuggest” valueHelpRequest=”onPerResSelect”/>
=================================================================================================================
New NetWeaver Information at SAP.com
Very Helpfull
