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.
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.
Why not use a MultiComboBox?
It does the same, needs less code and OData binding can be done in the XML view.
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.
Hi Jayakrishnan,
Yes. It's useful blog when we have more data.
Hi Jayakrishnan Chandramohan
Nice blog, this approach will be applicable for sap.m.TableSelectDialog ?
Thanks,
Vinothkumar T
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.
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.
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.
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?