/Select Dialog Live and Search Example

## Select Dialog Live and Search Example
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <title>SAPUI5 Select Dialog Example</title>

    <!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
    <script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.ui.commons,sap.m"
                data-sap-ui-theme="sap_bluecrystal">
    </script>
    <script>

		//The basic Test Data
		var listData = {
			 Plants: [ {
					   plant: "Plant ABC",
					   id: "9001",
				  }, {
					   plant: "Plant DEF",
					   id: "9002",
				  }]
		};

		//The Template to use in the Dialog
		var itemTemplate = new sap.m.StandardListItem({
			title: "{plant}",
			description: "{id}",
			active: true
		})

		//Creation of the JSON Model for the Test Daya
		var oModelList = new sap.ui.model.json.JSONModel();
		oModelList.setData(listData);

		//Function to do the search update of the Select Dilaog List Items
		var doSearch = function(oEvent){
			var filter = [];
			var sVal = oEvent.getParameter("value");

			var itemsBinding = oEvent.getParameter("itemsBinding");

			var  selectFilter = new sap.ui.model.Filter("plant", sap.ui.model.FilterOperator.Contains , sVal);
			filter.push(selectFilter);

			// and apply the filter to the bound items, and the Select Dialog will update
			itemsBinding.filter(filter);

		};

		//Function to do the live update of the Select Dilaog List Items
		var doLiveChange = function(oEvent){

			var filter = [];
		   var sVal = oEvent.getParameter("value");

		   if(sVal !== undefined) {

			   var itemsBinding = oEvent.getParameter("itemsBinding");

			   var selectFilter = new sap.ui.model.Filter("plant", sap.ui.model.FilterOperator.Contains , sVal);
			   filter.push(selectFilter);

			   // and apply the filter to the bound items, and the Select Dialog will update
			   itemsBinding.filter(filter);
		   }
	   };


		//Create the Dialog and we attach this as helper
		var oSelectDialog = new sap.m.SelectDialog("PlantDialog", {
			title: "Plant Selection Helper",
			noDataText: "No Plant Information Found",
			search : doSearch,
			liveChange: doLiveChange
		});

		//Now set the model for Dialog and bind the Aggregration.
		oSelectDialog.setModel(oModelList);
		oSelectDialog.bindAggregation("items", "/Plants", itemTemplate);

		//Now Create a Input field to link to the Select Dialog
		var oInput = new sap.m.Input({
			 type: "Text",
			 placeholder: "Open Select Dialog to Locate Plant Information",
			 showValueHelp: true,
			 valueHelpRequest: function () {
				 oSelectDialog.open(oInput.getValue());
			}
		});


		//Now Create the Page to show it all
		var app = new sap.m.App("myApp", {initialPage:"page1"});

		var page1 = new sap.m.Page("page1", {
			 title:"Select Dialog Example",
			 content:[
				  new sap.m.VBox({
					   items: [ oInput ]
				  })
			 ]
		});

		app.addPage(page1).placeAt("uiArea");

    </script>

</head>
<body class="sapUiBody">
    <div id="uiArea"></div>
 </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<title>SAPUI5 Select Dialog Example</title>

	<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
	<script id="sap-ui-bootstrap"
	src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
	id="sap-ui-bootstrap"
	data-sap-ui-libs="sap.ui.commons,sap.m"
	data-sap-ui-theme="sap_bluecrystal">
	</script>
	<script>

	//The basic Test Data
	var listData = {
	Plants: [ {
	plant: "Plant ABC",
	id: "9001",
	}, {
	plant: "Plant DEF",
	id: "9002",
	}]
	};

	//The Template to use in the Dialog
	var itemTemplate = new sap.m.StandardListItem({
	title: "{plant}",
	description: "{id}",
	active: true
	})

	//Creation of the JSON Model for the Test Daya
	var oModelList = new sap.ui.model.json.JSONModel();
	oModelList.setData(listData);

	//Function to do the search update of the Select Dilaog List Items
	var doSearch = function(oEvent){
	var filter = [];
	var sVal = oEvent.getParameter("value");

	var itemsBinding = oEvent.getParameter("itemsBinding");

	var selectFilter = new sap.ui.model.Filter("plant", sap.ui.model.FilterOperator.Contains , sVal);
	filter.push(selectFilter);

	// and apply the filter to the bound items, and the Select Dialog will update
	itemsBinding.filter(filter);

	};

	//Function to do the live update of the Select Dilaog List Items
	var doLiveChange = function(oEvent){

	var filter = [];
	var sVal = oEvent.getParameter("value");

	if(sVal !== undefined) {

	var itemsBinding = oEvent.getParameter("itemsBinding");

	var selectFilter = new sap.ui.model.Filter("plant", sap.ui.model.FilterOperator.Contains , sVal);
	filter.push(selectFilter);

	// and apply the filter to the bound items, and the Select Dialog will update
	itemsBinding.filter(filter);
	}
	};


	//Create the Dialog and we attach this as helper
	var oSelectDialog = new sap.m.SelectDialog("PlantDialog", {
	title: "Plant Selection Helper",
	noDataText: "No Plant Information Found",
	search : doSearch,
	liveChange: doLiveChange
	});

	//Now set the model for Dialog and bind the Aggregration.
	oSelectDialog.setModel(oModelList);
	oSelectDialog.bindAggregation("items", "/Plants", itemTemplate);

	//Now Create a Input field to link to the Select Dialog
	var oInput = new sap.m.Input({
	type: "Text",
	placeholder: "Open Select Dialog to Locate Plant Information",
	showValueHelp: true,
	valueHelpRequest: function () {
	oSelectDialog.open(oInput.getValue());
	}
	});


	//Now Create the Page to show it all
	var app = new sap.m.App("myApp", {initialPage:"page1"});

	var page1 = new sap.m.Page("page1", {
	title:"Select Dialog Example",
	content:[
	new sap.m.VBox({
	items: [ oInput ]
	})
	]
	});

	app.addPage(page1).placeAt("uiArea");

	</script>

	</head>
	<body class="sapUiBody">
	<div id="uiArea"></div>
	</body>
	</html>
No results found