Skip to Content
Technical Articles
Author's profile photo Jayakrishnan Chandramohan

Handling Select and De-Select options with Input-Select Dialog(Multi Select) Control.

Introduction:

              In this blog i explained,how we can use select dialog in multi input control with multi select and  de-select options. I hope everyone aware of keeping value help property in SAPUI5 Input Control/Button.

           But When it comes to input with multi select – select dialog, it will be useful when you give an option to de select the values in the input field itself.But unfortunately,if you use input with multi select-Select  Dialog fragment i will not come by default.(In MultiComboBox control it come by default,as it having key-value pair items).

           Even if you set multi select true, user need to delete each characters on the input,and it will not apply on the select dialog items. You can enable Clear option to clear all the selected items, but it will not allow you to specific selection and de-selection with respect to input control.

     Content:

           I took the SAPUI5 Explored example for this scenario. I use Product.json as my JSON Model.

View.xml:

I used Multi Input Control along with Token(sap.m.Token). By default it comes with Close option.

         

 

<mvc:View controllerName="sap.m.sample.SelectDialog.C" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m">
   <l:VerticalLayout class="sapUiContentPadding" width="100%">
		<l:content>
			<MultiInput id="id_mi_plant" width="500px" tokenUpdate="onTokenUpdate" showValueHelp="true" valueHelpOnly="true" valueHelpRequest="onHandleValuehelp"></MultiInput>
		</l:content>
  </l:VerticalLayout>
</mvc:View>

 

        Fragment.xml:

 

<core:FragmentDefinition xmlns="sap.m" xmlns:core="sap.ui.core">
	<SelectDialog noDataText="No Products Found" title="Select Product" search="handleSearch" confirm="handleValueHelpClose"
		cancel="handleValueHelpClose" multiSelect="true" showClearButton="true"
		items="{ path : '/ProductCollection', sorter : { path : 'Name', descending : false } }">
		<StandardListItem  selected="{selected}" title="{Name}" description="{ProductId}" icon="{ProductPicUrl}" iconDensityAware="false"
			iconInset="false" type="Active"/>
	</SelectDialog>
</core:FragmentDefinition>

 

        Controller.js:

 

sap.ui.define([
	'jquery.sap.global',
	'sap/m/MessageToast',
	'sap/ui/core/Fragment',
	'sap/ui/core/mvc/Controller',
	'sap/ui/model/Filter',
	'sap/ui/model/json/JSONModel'
], function (jQuery, MessageToast, Fragment, Controller, Filter, JSONModel) {
	"use strict";

	var CController = Controller.extend("sap.m.sample.SelectDialog.C", {

		onInit: function () {
			// set explored app's demo model on this sample
			var oModel = new JSONModel(sap.ui.require.toUrl("sap/ui/demo/mock") + "/products.json");
			this.getView().setModel(oModel);
		},

		onExit: function () {
			if (this._oDialog) {
				this._oDialog.destroy();
			}
		},

	

		onHandleValuehelp: function () {

			var aInput = this.byId("id_mi_plant").getTokens();

			var oModel = this.getView().getModel();
			var aProducts = oModel.getProperty("/ProductCollection");

			if (!this._oValueHelpDialog) {
				this._oValueHelpDialog = sap.ui.xmlfragment("sap.m.sample.SelectDialog.ValueHelp", this);
				this.getView().addDependent(this._oValueHelpDialog);
			}
//comparing the input values to the model data and when the condtions matches,set the property as true
			for (var inputValue = 0; inputValue < aInput.length; inputValue++) {
				for (var type = 0; type < aProducts.length; type++) {
					if (aProducts[type].Name === aInput[inputValue].getText()) {
						aProducts[type].selected = true;
					}
				}
				oModel.setProperty("/ProductCollection", aProducts);
			}
			this._oValueHelpDialog.open();
		},

		handleValueHelpClose: function (oEvent) {
//remove all tokens before you close the value help
			this.byId("id_mi_plant").removeAllTokens();
			var oSelectedItems = oEvent.getParameter("selectedItems"),
				oInput = this.byId("productInput");
			var aTitle = [];
			for (var title = 0; title < oSelectedItems.length; title++) {
				var text = oSelectedItems[title].getTitle();
				aTitle.push(text);
			}
//adding the selected values to the tokens.
			for (var plant = 0; plant < aTitle.length; plant++) {
				this.byId("id_mi_plant").addToken(new sap.m.Token({
					text: aTitle[plant]
				}));
			}

		

			if (!oSelectedItems) {
				oInput.resetProperty("value");
			}
		}
	});

	return CController;

});

 

 

 

     Working Screenshot:

 

 

 

 

 

Conclusion:

I hope you can find this blog useful, and you can utilize this solution in your development.

Also, being at a initial stage, it is pretty open for further improvements and collaboration, so I appreciate any suggestions.

Thank you!

Best Regards!

JK.

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Mahesh Palavalli
      Mahesh Palavalli

      Nice and Thanks for sharing Jayakrishnan Chandramohan ,

      You can check this scenario where if the table has growing set(scroll to load will fetch new items and the last selected item maybe part of the newly loaded items after scrolling down in the list)  or if user searches for data again(new data will be added and old data removed) in the popup then it should select those records again.. I think if you set the growing & threshold it will become more complex .

       

      BR,

      Mahesh

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan
      Blog Post Author

      Thank you Mahesh. 🙂

      Yes, as you mentioned ,when it comes to Growing option it will become more complex. As of now the it would suit for JSON Model.

      But in OData Consumption, i guess unless we take a copy of the particular entityset collection into JSON model at run time, it will be very tough to handle.

      Author's profile photo Wolfgang Flatscher
      Wolfgang Flatscher

      Why not use a MultiComboBox?

      It does the same, needs less code and OData binding can be done in the XML view.

      Author's profile photo Jayakrishnan Chandramohan
      Jayakrishnan Chandramohan
      Blog Post Author

      Hey Flatscher,

      Yes, you are correct. But when we have more data we can use this control,and it provide search option too. ComboBox it is advisable for 10 or less than 10 items.

      Author's profile photo Ramesh Prasad
      Ramesh Prasad

      Hi Jayakrishnan,

       

      Yes. It's useful blog when we have more data.

      Author's profile photo Vinothkumar T
      Vinothkumar T

      Hi Jayakrishnan Chandramohan

      Nice blog, this approach will be applicable for sap.m.TableSelectDialog ?

       

      Thanks,

      Vinothkumar T

      Author's profile photo Mallikarjuna B
      Mallikarjuna B

      Hi Jayakrishnan,

       

      Its very nice blog and when i try the same , getting no data found in the popup .

      Could you please help me what is wrong .

      My OnInit function code as follows.

      onInit: function () {

      var oModel = new JSONModel(sap.ui.require.toUrl("App.ZDemo.model") + "/products.json");
      this.getView().setModel(oModel);

      }

      my json resides under model folder.

      Thank you.

      Author's profile photo Mallikarjuna B
      Mallikarjuna B

      Thank you..!.

      Found that , instead of sap.ui.require.toUrl , i have used jQuery.sap.getResourcePath("App/ZDemo/model/products.json");  And it loaded my json file.

      Author's profile photo Mallikarjuna B
      Mallikarjuna B

      Hi Jayakrishnan,

      I have implemented same with OData but , previous selection are not stored/saved and even when click of Cancel press the selected values are cleared , also , when add - additional selections... only latest tokens are added and old one's are removed.

      I used selectDialog instead of fragment.

      My F4Help code :

      var oModelDemand = this.getView().getModel("TestModel");
      var handleClose = function (oEvent) {

      that.byId("id_Input").removeAllTokens();
      var oSelectedItems = oEvent.getParameter("selectedItems"),
      oInput = that.byId("productInput");
      var aTitle = [];
      for (var title = 0; title < oSelectedItems.length; title++) {
      var text = oSelectedItems[title].getTitle();
      aTitle.push(text);
      }
      //adding the selected values to the tokens.
      for (var plant = 0; plant < aTitle.length; plant++) {
      that.byId("id_Input").addToken(new sap.m.Token({
      text: aTitle[plant]
      }));
      }

      if (!oSelectedItems) {
      oInput.resetProperty("value");
      }

      SelectDialog Code :

      title: "Select",
      multiSelect : true,
      rememberSelections :true,
      showClearButton : true,
      titleAlignment : "Center",
      items: {
      path: "/results",
      template: new sap.m.StandardListItem({
      title: "{Entity}",
      customData: [new sap.ui.core.CustomData({
      key: "Key",
      value: "{Entity}"
      })],
      active: true
      })

      Could you please suggest anyone , how selectDialog remembers the previous selections and it has to add/update with latest selections and not sure why values/tokens are cleared after click of Cancel from the dialog.

      Thank you in Advance.

      Author's profile photo sarvesh tiwari
      sarvesh tiwari

      Thanks Jayakrishnan Chandramohan for this blog.

      Can we add selectall option in valuehelp through which if user click on selectall checkbox then all input gets auto select and same for deselect?