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

[Jayakrishnan]

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.