SapUI5. Средство поиска для поля на основе OData сервиса

Будем использовать следующие библиотеки

sap.ui.commons,sap.ui.ux3,sap.ui.table,sap.m

<!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="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons,sap.ui.ux3,sap.ui.table,sap.m"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("sapui5_f4_test");
				var view = sap.ui.view({id:"idmain_view1", viewName:"sapui5_f4_test.main_view", type:sap.ui.core.mvc.ViewType.JS});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

id="sap-ui-bootstrap"

data-sap-ui-libs="sap.ui.commons,sap.ui.ux3,sap.ui.table,sap.m"

data-sap-ui-theme="sap_bluecrystal">

</script>

sap.ui.localResources("sapui5_f4_test");

var view = sap.ui.view({id:"idmain_view1", viewName:"sapui5_f4_test.main_view", type:sap.ui.core.mvc.ViewType.JS});

view.placeAt("content");

</script>

</head>

</body>

</html>

Рисуем представление:

createContent : function(oController) {
		var oPanel = new sap.ui.commons.Panel({
			text: "F4Test"
		});
		
		var oMatrix = new sap.ui.commons.layout.MatrixLayout({
			width: "60%",
		});
		
		var oLabel = new sap.ui.commons.Label("labelId", {
			text: "Employeer"
		});
		
		var oInput = new sap.ui.commons.ValueHelpField("inputId",{
			valueHelpRequest: oController.OnF4Request
		});
		
		oMatrix.createRow(oLabel, oInput);
		
		oPanel.addContent(oMatrix);
		
		return oPanel;
	}

createContent : function(oController) {

var oPanel = new sap.ui.commons.Panel({

text: "F4Test"

});

var oMatrix = new sap.ui.commons.layout.MatrixLayout({

width: "60%",

});

var oLabel = new sap.ui.commons.Label("labelId", {

text: "Employeer"

});

var oInput = new sap.ui.commons.ValueHelpField("inputId",{

valueHelpRequest: oController.OnF4Request

});

oMatrix.createRow(oLabel, oInput);

oPanel.addContent(oMatrix);

return oPanel;

}

В контроллере напишем обработку для события OnF4Request с привязкой данных:

OnF4Request: function() {
		var oValueDialog = new sap.ui.ux3.ToolPopup({
			modal: true,
			inverted: false,
			title: "Заголовок средства поиска",
			opener: "inputId",
			closed: function(oEvent){
				var oCore = sap.ui.getCore();
			    var oInput = oCore.byId("inputId");
			    var oContext = oHelpTable.getContextByIndex(oHelpTable.getSelectedIndex());
			    
			    if (oContext) {
		            var oSel = oContext.getModel().getProperty(oContext.getPath());
		            oInput.setValue(oSel["Name"]);
		      };
			}
		});
		
		//таблица
		var oHelpTable = new sap.ui.table.Table({
			selectionMode: sap.ui.table.SelectionMode.Single,
			
			columns: [
				new sap.ui.table.Column({
					label: new sap.ui.commons.Label({ text: "Id" }),
					sortProperty: "Id",
					filterProperty: "Id",
					template: "Id",
				}),
				
				new sap.ui.table.Column({
					label: new sap.ui.commons.Label({ text: "Name" }),
					sortProperty: "Name",
					filterProperty: "Name",
					template: new sap.ui.commons.TextView().bindProperty("text", "Name"),
				}),
				
				new sap.ui.table.Column({
					label: new sap.ui.commons.Label({ text: "Addr" }),
					sortProperty: "Addr",
					filterProperty: "Addr",
					template: new sap.ui.commons.TextView().bindProperty("text", "Addr"),
				}),
				
				new sap.ui.table.Column({
					label: new sap.ui.commons.Label({ text: "Dest" }),
					sortProperty: "Dest",
					filterProperty: "Dest",
					template: new sap.ui.commons.TextView().bindProperty("text", "Dest"),
				}),
			]
		});
		
		//модель и привязка данных
		var oJsonModel = new sap.ui.model.json.JSONModel();
		var sUrl = "http://host:port/sap/opu/odata/SAP/service_name/";
		var oModel = new sap.ui.model.odata.ODataModel(sUrl, false);
		
		oModel.read("/EmployeeSet?", {
			context: null,
			urlParameters: null,
			async: true, 

			success: function(oData, response){
			 		oJsonModel.setData(oData); 
			}
		});
		  
		 oHelpTable.setModel(oJsonModel);
		 
		 oHelpTable.bindAggregation("rows", "/results");

		//Нижняя кнопка (для выхода)
		var oButtonOk = new sap.ui.commons.Button({
			text: "OK",
			press: function(oEvent){
				oEvent.getSource().getParent().close(); //закрываем окно
			}
		});
		
		oValueDialog.addContent(oHelpTable);
		oValueDialog.addButton(oButtonOk);
		
		oValueDialog.open();
	}

OnF4Request: function() {

var oValueDialog = new sap.ui.ux3.ToolPopup({

modal: true,

inverted: false,

title: "Заголовок средства поиска",

opener: "inputId",

closed: function(oEvent){

var oCore = sap.ui.getCore();

var oInput = oCore.byId("inputId");

var oContext = oHelpTable.getContextByIndex(oHelpTable.getSelectedIndex());

if (oContext) {

var oSel = oContext.getModel().getProperty(oContext.getPath());

oInput.setValue(oSel["Name"]);

};

}

});

//таблица

var oHelpTable = new sap.ui.table.Table({

selectionMode: sap.ui.table.SelectionMode.Single,

columns: [

new sap.ui.table.Column({

label: new sap.ui.commons.Label({ text: "Id" }),

sortProperty: "Id",

filterProperty: "Id",

}),

new sap.ui.table.Column({

label: new sap.ui.commons.Label({ text: "Name" }),

sortProperty: "Name",

filterProperty: "Name",

}),

new sap.ui.table.Column({

label: new sap.ui.commons.Label({ text: "Addr" }),

sortProperty: "Addr",

filterProperty: "Addr",

}),

new sap.ui.table.Column({

label: new sap.ui.commons.Label({ text: "Dest" }),

sortProperty: "Dest",

filterProperty: "Dest",

}),

]

});

//модель и привязка данных

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

var sUrl = "http://host:port/sap/opu/odata/SAP/service_name/";

var oModel = new sap.ui.model.odata.ODataModel(sUrl, false);

oModel.read("/EmployeeSet?", {

context: null,

urlParameters: null,

async: true,

success: function(oData, response){

oJsonModel.setData(oData);

}

});

oHelpTable.setModel(oJsonModel);

oHelpTable.bindAggregation("rows", "/results");

//Нижняя кнопка (для выхода)

var oButtonOk = new sap.ui.commons.Button({

text: "OK",

press: function(oEvent){

oEvent.getSource().getParent().close(); //закрываем окно

}

});

oValueDialog.addContent(oHelpTable);

oValueDialog.addButton(oButtonOk);

oValueDialog.open();

}