Skip to Content
Technical Articles

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.

5 Comments
You must be Logged on to comment or reply to a post.
  • 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

    • 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.

    • 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.