Solved: Unable to get the data of selected Item from a lis...

Hi everyone,

I have two combo boxes, a listbox and a search button into my dashboard. Two combo box contains : Years, Months and listbox contains: Submeter lists.

While I pressed on the Search button, it will show me a chart into the dashboard based on my selection. Instead of listbox, I am able to show the chart into dashboard(using single selection: Year, Month, Submeter) using Search button.

My requirement is to select a year, month from combobox but two submeters from the listbox.

I am retrieving data from SAP HANA using xso data service, converting itself into a json model and added combobox and listbox variables using getSelectedKey():

var strUrl="http://<host ip>/workshop/sessiona/aa/services/monthly_historical.xsodata/MONTH?$filter=substringof(%27"+Year .getSelectedKey()+"%27,%20YEAR)%20and%20substringof(%27"+Month.getSelectedKey()+"%27,%20MONTH1)%20and%20%20SUBMETER%20eq%20"+Submeter .getSelectedKey()+"&$format=json";

How could it will be possible to store multiple values into a variable(Submeter) when user will choose n no of submeters ?

SAP Managed Tags:
SAPUI5

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Accepted Solutions (1)

Hi Sandip,

to store multiple values to a single variable,

You need to define the variable as array then it is possible to store the multiple values.

for example if you define

var submeter = [ ] //empty array

Then you need to pass the values to the array which you selected from the combobox.

Thanks,

Deepak Raj.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hi Deepak,

Thanks for giving me the idea. Is it possible to multi select the list items from a single combo box?

Thanks & Regards,

Sandip Das Adhikari

Hi Sandip,

If you want to select multiple values at a time then you need to use MULTICOMBOBOX.

Please refer the following link for the multicombobox:

SAPUI5 Explored

This link lead you the example of the multicombobox.

Thanks,

Deepak.

Hi Deepak,

Thank you so much. It was helpful. Following this link, now able to select single/multiple values from the submeter combo box(type: multi combobox) and clear the previously selected items when user open to select options. Now unable to pass the selected submeter value. I attached two snapshots: i) dashboard view, ii) error message

Here are my code details:: cmbCoEmSelMonth --> multi combobox for submeter

var cmbCoEmSelMonth = new sap.m.MultiComboBox("cmbCoEmSelMonth",{

id: "cmbCoEmSelMonth",

allowMultiSelect : true,

placeholder : 'SUBMETER',

items: [

new sap.ui.core.ListItem({text: "1002 : 161363 - Eau glacÃ©e 30m3", key: "1002"}),

new sap.ui.core.ListItem({text: "1003 : EM535 - ChaudiÃ¨re", key: "1003"}),

new sap.ui.core.ListItem({text: "1004 : 5776 - GLATT", key: "1004"}),

new sap.ui.core.ListItem({text: "1005 : 12M02 - Fermenteur 100m3", key: "1005"})

]

});

//Multiselect fn

cmbCoEmSelMonth.onAfterRenderingPicker = function(){

if(sap.m.MultiComboBox.prototype.onAfterRenderingPicker){

sap.m.MultiComboBox.prototype.onAfterRenderingPicker.apply(this);

}

cmbCoEmSelMonth.clearSelection();

};

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Added this mulitcombobox variable into the chart's url--

cmbCoEmSelMonth1 -->Year

cmbCoEmSelMonth2 -->month

cmbCoEmSelMonth3 -->Submeter

myButCoEmSelMonth --> Search button

onClickCoEmSelMonthGraph(); --> Search button fn

Chart's url::

var strUrlCoEm1 ="http://52.166.150.196/workshop/sessiona/new_powerdale/services/monthly_historical.xsodata/MONTH?$fil..."+cmbCoEmSelMonth1 .getSelectedKey()+"%27,%20YEAR)%20and%20substringof(%27"+cmbCoEmSelMonth2.getSelectedKey()+"%27,%20MONTH1)%20and%20%20SUBMETER%20eq%20"+cmbCoEmSelMonth .getSelectedKey()+"&$format=json";

When the submeter box type is combobox then the chart's url is working based on Search button but when I changed it into multi combobox then getting the error message, which one I have attached.

Please help me out to solve this issue.

Thanks & Regards,

Sandip Das Adhikari

cmbCoEmSelMonth -->Submeter

The error you are getting is

cmbCoEmSelMonth.getSelectedKey() is not a fuction.

It refers that "cmbCoEmSelMonth" doesn't have any properties,

Please check the properties for the "cmbCoEmSelMonth" in the console you may get a solution.

if possible please paste a screenshot of your code.

Thanks,

Deepak.

Hi Deepak,

Here I have copied my code,

//year

var cmbCoEmSelMonth1 = new sap.ui.commons.ComboBox({

placeholder : 'YEAR',

items: [

new sap.ui.core.ListItem({text: "2014", key: "2014"}),

new sap.ui.core.ListItem({text: "2015", key: "2015"}),

new sap.ui.core.ListItem({text: "2016", key: "2016"}),

]

}

);

//Month

var cmbCoEmSelMonth2 = new sap.ui.commons.ComboBox({

placeholder : 'MONTH',

items: [

new sap.ui.core.ListItem({text: "January", key: "JAN-"}),

new sap.ui.core.ListItem({text: "February", key: "FEB-"}),

new sap.ui.core.ListItem({text: "March", key: "MARCH-"}),

new sap.ui.core.ListItem({text: "April", key: "APRIL-"}),

new sap.ui.core.ListItem({text: "May", key: "MAY-"}),

new sap.ui.core.ListItem({text: "June", key: "JUNE-"}),

new sap.ui.core.ListItem({text: "July", key: "JULY-"}),

new sap.ui.core.ListItem({text: "August", key: "AUG-"}),

new sap.ui.core.ListItem({text: "September", key: "SEPT-"}),

new sap.ui.core.ListItem({text: "October", key: "OCT-"}),

new sap.ui.core.ListItem({text: "November", key: "NOV-"}),

new sap.ui.core.ListItem({text: "December", key: "DEC-"}),

]

});

//submeter combobox

var cmbCoEmSelMonth = new sap.m.MultiComboBox("cmbCoEmSelMonth",{

id: "cmbCoEmSelMonth",

allowMultiSelect : true,

placeholder : 'SUBMETER',

items: [

new sap.ui.core.ListItem({text: "1002 : 161363 - Eau glacÃ©e 30m3", key: "1002"}),

new sap.ui.core.ListItem({text: "1003 : EM535 - ChaudiÃ¨re", key: "1003"}),

new sap.ui.core.ListItem({text: "1004 : 5776 - GLATT", key: "1004"}),

new sap.ui.core.ListItem({text: "1005 : 12M02 - Fermenteur 100m3", key: "1005"}),

new sap.ui.core.ListItem({text: "1006 : ER005 - Eau de refroidissement", key: "1006"}),

new sap.ui.core.ListItem({text: "1007 : TCP MF-UF", key: "1007"}),

new sap.ui.core.ListItem({text: "1008 : Soutirage Enzymes", key: "1008"}),

new sap.ui.core.ListItem({text: "1009 : Chromato", key: "1009"}),

new sap.ui.core.ListItem({text: "1010 : Compresseur HP GA50VSD (50 kW)", key: "1010"}),

new sap.ui.core.ListItem({text: "1011 : Compresseur HP GA37+ (41,3 kW)", key: "1011"}),

new sap.ui.core.ListItem({text: "1012 : Pilote LP1", key: "1012"}),

new sap.ui.core.ListItem({text: "1013 : TPBT02 - BÃ¢timent Administratif", key: "1013"}),

new sap.ui.core.ListItem({text: "1014 : 122100 eau glacÃ©e 100mÂ³", key: "1014"}),

new sap.ui.core.ListItem({text: "1015 : 12M02 - Fermenteur 100m3", key: "1015"}),

new sap.ui.core.ListItem({text: "1016 : AC002 - TD air comprimÃ© HP-BP", key: "1016"}),

new sap.ui.core.ListItem({text: "1017 : CA1020 - Fermenteur 36m3", key: "1017"}),

new sap.ui.core.ListItem({text: "1018 : NOVASEP", key: "1018"}),

new sap.ui.core.ListItem({text: "1019 : Filtration Rhodia", key: "1019"}),

new sap.ui.core.ListItem({text: "1020 : MCC0030 - Acide tartrique", key: "1020"}),

new sap.ui.core.ListItem({text: "1021 : MCC-0010 Ligne 100m3", key: "1021"}),

new sap.ui.core.ListItem({text: "1022 : Westfalia SÃ©parator", key: "1022"}),

new sap.ui.core.ListItem({text: "1023 : 93351 MÃ©lange Guerin Systems", key: "1023"}),

new sap.ui.core.ListItem({text: "1024 : SÃ¨chage aÃ©romatic GEA", key: "1024"}),

new sap.ui.core.ListItem({text: "1025 : DÃ©part pour compresseur BP ZE4VSD (315 kW)", key: "1025"}),

new sap.ui.core.ListItem({text: "1026 : DÃ©part pour compresseur BP ZE4(1) (315 kW)", key: "1026"}),

new sap.ui.core.ListItem({text: "1027 : DÃ©part pour compresseur BP ZE4(2) (315 kW)", key: "1027"}),

new sap.ui.core.ListItem({text: "1028 : 122100 eau glacÃ©e 100m3", key: "1028"}),

new sap.ui.core.ListItem({text: "1029 : TPBT01 - Usine 36 m3", key: "1029"})

]

});

//Multiselect fn

cmbCoEmSelMonth.onAfterRenderingPicker = function(){

if(sap.m.MultiComboBox.prototype.onAfterRenderingPicker){

sap.m.MultiComboBox.prototype.onAfterRenderingPicker.apply(this);

//sap.ui.getCore().byId('').setSelected('').setSelectedKey('');

}

cmbCoEmSelMonth.clearSelection();

};

//Search button

var myButCoEmSelMonth = new sap.ui.commons.Button();

myButCoEmSelMonth.setText("Search");

myButCoEmSelMonth.attachPress(function() {

onClickCoEmSelMonthGraph();

});

//Mx layout to hold combo boxes and search button

var cellCoEmSelMonth = new c.layout.MatrixLayoutCell({});

cellCoEmSelMonth.addContent(oLblCoEmSelMonth);

cellCoEmSelMonth.addContent(cmbCoEmSelMonth1);

cellCoEmSelMonth.addContent(cmbCoEmSelMonth2);

cellCoEmSelMonth.addContent(cmbCoEmSelMonth);

cellCoEmSelMonth.addContent(myButCoEmSelMonth);

//Layout for drop down boxes, button, textpanel, multiselect checkbox

layoutCoEm1.createRow(cellCoEmSelMonth);

//Search fn starts from here

function onClickCoEmSelMonthGraph (){

//Chart's code

var oTextViewCOEM = new sap.ui.commons.TextView({

semanticColor: sap.ui.commons.TextViewColor.Positive,

design: sap.ui.commons.TextViewDesign.H3,

textAlign:sap.ui.core.TextAlign.Center,

busy: true

});

oTextViewCOEM.setText("Loading Data");

var LoadingImage =new sap.ui.commons.Image({

src: "http://52.166.150.196/workshop/sessiona/new_powerdale/ui/Busy2.gif",

});

var oModelCoEm1 = new sap.ui.model.json.JSONModel();

var strUrlCoEm1 ="http://52.166.150.196/workshop/sessiona/new_powerdale/services/monthly_historical.xsodata/MONTH?$fil..."+cmbCoEmSelMonth1 .getSelectedKey()+"%27,%20YEAR)%20and%20substringof(%27"+cmbCoEmSelMonth2.getSelectedKey()+"%27,%20MONTH1)%20and%20%20SUBMETER%20eq%20"+cmbCoEmSelMonth .getSelectedKey()+"&$format=json";

oModelCoEm1.loadData(strUrlCoEm1);

var oDatasetCoEm1 = new sap.viz.ui5.data.FlattenedDataset({

dimensions : [

{

axis : 1,

name : 'DATE',

value : "{DATE1}"

}

measures : [

{

name : 'ENERGY kWh',

value : '{ENERGY}'

}

data : {

path : "/d/results"

}

});

var oColumnCoEm1 = new sap.viz.ui5.Column({

width : "100%",

height : "500px",

plotArea : {

'colorPalette' : ['#660033'],

drawingEffect : sap.viz.ui5.types.VerticalBar_drawingEffect.glossy,

isRoundCorner : true

xAxis: {

title: {

visible: true,

text : "TIME"

}

yAxis: {

title: {

visible: true,

text : "ENERGY Kwh"

}

title : {

visible : true,

text : 'Daily Energy Consumption For SUBMETER : ' + cmbCoEmSelMonth.getValue() + ' - ' + cmbCoEmSelMonth2.getValue() + '-' + cmbCoEmSelMonth1.getValue()

dataset : oDatasetCoEm1,

noData: LoadingImage,

selectData: function (oEvent){

var xAxisCO2EmiAll= (oEvent.getParameter("data")[0]).data[0].ctx.path.dii_a1;

var IDCO2EmiAll = oModelCoEm1.getProperty("/d/results/"+ xAxisCO2EmiAll +"/SUBMETER");

var SMCO2EmiAll = oModelCoEm1.getProperty("/d/results/"+ xAxisCO2EmiAll +"/DATE1");

var oTVCO2EmiAll = new sap.ui.commons.TextView();

oTVCO2EmiAll.setText("Loading Data");

var LoadingImage =new sap.ui.commons.Image({

src: "http://52.166.150.196/workshop/sessiona/new_powerdale/ui/Busy2.gif",

});

var myDlgCO2EmiAllMon = new sap.ui.commons.Dialog();

myDlgCO2EmiAllMon.setWidth("850px");

myDlgCO2EmiAllMon.setHeight("550px");

myDlgCO2EmiAllMon.open();

var panelCO2EmiAll = new sap.ui.commons.Panel({

// text : "",

content : [],

collapsed : false

});

panelCO2EmiAll.setText(SMCO2EmiAll +" : Energy Consumption" );

myDlgCO2EmiAllMon.addContent(panelCO2EmiAll);

// search function

var oModelCO2EmiAll = new sap.ui.model.json.JSONModel();

var strUrlCO2EmiAll = "http://52.166.150.196/workshop/sessiona/new_powerdale/services/hist.xsodata/DATE1?$orderby=TIME%20as..." + SMCO2EmiAll + "%27,%20DATE1)%20and%20SUBMETER%20eq%20"+IDCO2EmiAll+"&$format=json";

oModelCO2EmiAll.loadData(strUrlCO2EmiAll);

var oDatasetCO2EmiAll = new sap.viz.ui5.data.FlattenedDataset({

dimensions : [

{

axis : 1,

name : 'TIME',

value : "{TIME1}"

}

measures : [

{

name : 'ENERGY kWh',

value : '{ENERGY}'

}

data : {

path : "/d/results"

}

});

var oColumnCO2EmiAll = new sap.viz.ui5.Line({

width : "100%",

height : "450px",

plotArea : {

'colorPalette' : ['#FF3300']

xAxis: {

title: {

visible: true,

text : "TIME"

}

yAxis: {

title: {

visible: true,

text : "ENERGY"

}

legend: {

visible: false

title : {

visible : true,

text : 'Submeter - ' +cmbCoEmSelMonth .getValue() +' : ' + SMCO2EmiAll ,

dataset : oDatasetCO2EmiAll,

noData: LoadingImage,

selectData: function (oEvent){

var xAxisCO2EmiAllDay= (oEvent.getParameter("data")[0]).data[0].ctx.path.dii_a1;

var SMCO2EmiAllDay = oModelCO2EmiAll.getProperty("/d/results/"+ xAxisCO2EmiAllDay +"/NEW_DATE");

oColumnCO2EmiAllDay.setModel(oModelCO2EmiAllDay);

panelCO2EmiAllDay.destroyContent();

panelCO2EmiAllDay.setText("Date: " + SMCO2EmiAllDay);

panelCO2EmiAllDay.addContent(oColumnCO2EmiAllDay);

}

});

oColumnCO2EmiAll.setModel(oModelCO2EmiAll);

panelCO2EmiAll.destroyContent();

panelCO2EmiAll.addContent(oColumnCO2EmiAll);

//fncn close

}

});

oColumnCoEm1.setModel(oModelCoEm1);

panelCoEm1.destroyContent();

panelCoEm1.addContent(oColumnCoEm1);

}

aContent[id]=layoutCoEm1;

}

No need of the view code.

I want to see the controller code.

how you are getting the selected values from the multicombobox??

I need to check only that part,i didn't understood the previous comment it got bit clumsy to understand.

Hi Deepak,

I wrote the given below code to get the selected submeter value from the user selection.

//Multiselect fn for Submeter_MultiComboBox

cmbCoEmSelMonth.onAfterRenderingPicker = function(){

if(sap.m.MultiComboBox.prototype.onAfterRenderingPicker){

sap.m.MultiComboBox.prototype.onAfterRenderingPicker.apply(this);

sap.ui.getCore().byId('').setSelected('').setSelectedKey('');

}

cmbCoEmSelMonth.clearSelection();

};

Please correct me or modify the code if needed.

It is unable to set the picked value into the same variable (cmbCoEmSelMonth) after selection. Once I pressed the Search button(myButCoEmSelMonth) then the onClickCoEmSelMonthGraph() function unable to call the json url for chart:

var strUrlCoEm1 ="http://instance ip/workshop/sessiona/new_powerdale/services/monthly_historical.xsodata/MONTH?$filter=substringof(%27"+cmbCoEmSelMonth1 .getSelectedKey()+"%27,%20YEAR)%20and%20substringof(%27"+cmbCoEmSelMonth2.getSelectedKey()+"%27,%20MONTH1)%20and%20%20SUBMETER%20eq%20"+cmbCoEmSelMonth .getSelectedKey()+"&$format=json";

Previously, I din't wrote any fn() for single submeter selection.The url is working properly when the submeter box type is ComboBox.

Thanks & Regards,

Sandip Das Adhikari

Hi Sandip,

Please go through this example:

http://embed.plnkr.co/hJcggjLMhl1lTkPa4MvU/

Hope it will helps you.

Thanks,

Deepak.

Hi Deepak,

Thank you very much for the help.

According to your code, you are printing the selected submeter values into the console.

multi:function(evt){

var sel = evt.oSource.getSelectedKeys();

alert(sel);

console.log(sel);

}

As per the requirement, how can I bind those selected submeter values into the cmbCoEmSelMonth variable again??

Reasons to bind selected values into cmbCoEmSelMonth::

The Search button function is associated with these comboboxes: cmbCoEmSelMonth , cmbCoEmSelMonth1, cmbCoEmSelMonth2. Once user has pressed on the Search Button, then the given below json url is trying to pull the data from combo and multicombo box.

url:

var strUrlCoEm1 ="http://instance ip/workshop/sessiona/new_powerdale/services/monthly_historical.xsodata/MONTH?$filter=substringof(%27"+cmbCoEmSelMonth1.getSelectedKey()+"%27,%20YEAR)%20and%20substringof(%27"+cmbCoEmSelMonth2.getSelectedKey()+"%27,%20MONTH1)%20and%20%20SUBMETER%20eq%20"+cmbCoEmSelMonth.getSelectedKey()+"&$format=json";

Do you want to use bind the multicombobox values to the other combobox values.?

If yes just you can define like this:

var cmbCoEmSelMonth = cmbCoEmSelMonth + cmbCoEmSelMonth1 + cmbCoEmSelMonth2.

hope it works for you.

No, I dont want to bind the multi combobox values into other combo box. The other combo boxes holds the Year and Month and this multicombo holds submeters.

The requirement is that, User can select a month, year and multiple submeters at a time before pressing the search button.

Once the user has pressed the Search button, then the json url is started itself(by the help of ajax call) to store the user selected values(single year, single month & submeters) into cmbCoEmSelMonth1, cmbCoEmSelMonth2 cmbCoEmSelMonth using .getSelectedKey()

When the submeter(cmbCoEmSelMonth) combobox type is multicombobox, then the .getSelectedKey() is unable to store submeter values and throwing an error:

cmbCoEmSelMonth.getSelectedKey() is not a function.

it is getSelectedkeys() not getselectedKey()...

var searchitems = " variables which you are getting from the user selection".

now you have to pass this searchitems variable in the URL.

Sorry, Previously I did a type mistake.

Search button: myButCoEmSelMonth

var myButCoEmSelMonth = new sap.ui.commons.Button();

myButCoEmSelMonth.setText("Search");

myButCoEmSelMonth.attachPress(function() {

onClickCoEmSelMonthGraph();

});

The Search fn:: onClickCoEmSelMonthGraph();

Here is my json url for vizchart:

var strUrlCoEm1 ="http://instance ip/workshop/sessiona/new_powerdale/services/monthly_historical.xsodata/MONTH?$filter=substringof(%27"+cmbCoEmSelMonth1.getSelectedKey()+"%27,%20YEAR)%20and%20substringof(%27"+cmbCoEmSelMonth2.getSelectedKey()+"%27,%20MONTH1)%20and%20%20SUBMETER%20eq%20"+cmbCoEmSelMonth.getSelectedKey()+"&$format=json";

Answers (0)

Ask a Question

Top Q&A Solution Author

User

Count

Unable to get the data of selected Item from a listbox

Accepted Solutions (1)

Accepted Solutions (1)

Answers (0)

Iterating through JSONModel with multiple nested a...

Re: Connecting SAP CAP with SAP Cloud ALM

How to use CopyProvider on Table created by TypeSc...

How to execute/fire onPost when user press enter o...

Re: Connecting SAP CAP with SAP Cloud ALM