I am new to sapui5, i am trying to make an app with two views.one view with multicomboBox and another with dynamic table , after selection of items from multicomboBox i have to click submit button. on submit button click i have to navigate to another view and create a table with column name, column name will be selected values of multicomboBox.
i am using target to navigate and used xml view.
The problem is i am getting the selected items, how to pass the selected data to another view and create the table is the issue i am facing.
i am posting the views and controllers below. The below code is taken from sapui5 Explored, i have combined multicomboBox and Target Program. Thanks in advance
View1.xml
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:html="http://www.w3.org/1999/xhtml"
controllerName="sap.ui.core.sample.trial.targetsApp.controller.View1"
xmlns:form="sap.ui.layout.form">
<App>
<Page title="Example 1">
<MultiComboBox selectionChange="handleSelectionChange" selectionFinish="handleSelectionFinish" width="500px"
items="{
path: '/Collection',
sorter: { path: 'Name' }
}">
<core:Item key="{ProductId}" text="{Name}" />
</MultiComboBox>
<footer>
<Bar>
<contentRight>
<Button text="Submit" press="onToView2" />
</contentRight>
</Bar>
</footer>
</Page>
</App>
</mvc:View>
View2.xml
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:html="http://www.w3.org/1999/xhtml"
controllerName="sap.ui.core.sample.trial.targetsApp.controller.View2"
xmlns:form="sap.ui.layout.form">
<App>
<Page title="TableView"
showNavButton="true"
navButtonPress="onBack">
<footer>
<Bar>
<contentRight>
<Button text="Submit" press="onToView2" />
</contentRight>
</Bar>
</footer>
</Page>
</App>
</mvc:View>
controller for view1
sap.ui.define([
'jquery.sap.global',
'sap/m/MessageToast',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, MessageToast, Controller, JSONModel) {
"use strict";
var PageController = Controller.extend("sap.ui.core.sample.trial.targetsApp.controller.View1", {
onInit: function () {
// set explored app's demo model on this sample
var oModel = new JSONModel(jQuery.sap.getModulePath("sap.ui.demo.mock", "/products.json"));
this.getView().setModel(oModel);
},
onToView2 : function () {
this.getOwnerComponent().getTargets().display("page2");
},
handleSelectionChange: function(oEvent) {
var changedItem = oEvent.getParameter("changedItem");
var isSelected = oEvent.getParameter("selected");
var state = "Selected";
if (!isSelected) {
state = "Deselected"
}
MessageToast.show("Event 'selectionChange': " + state + " '" + changedItem.getText() + "'", {
width: "auto"
});
},
handleSelectionFinish: function(oEvent) {
var selectedItems = oEvent.getParameter("selectedItems");
var messageText = "Event 'selectionFinished': [";
for (var i = 0; i < selectedItems.length; i++) {
messageText += "'" + selectedItems[i].getText() + "'";
if (i != selectedItems.length-1) {
messageText += ",";
}
}
messageText += "]";
MessageToast.show(messageText, {
width: "auto"
});
},
handleNav: function(evt){
this.getOwnerComponent().getTargets().display("page2");
}
});
return PageController;
}, true);
controller for view2
sap.ui.define( ["sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";
return Controller.extend("sap.ui.core.sample.trial.targetsApp.controller.View2", {
onBack : function () {
this.getOwnerComponent().getTargets().display("page1");
}
});
},true);
Edited controller2.js
sap.ui.define( ["sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";
return Controller.extend("sap.ui.core.sample.trial.targetsApp.controller.View2", {
onInit:function(){
//console.log(sap.ui.getCore().AppContext.selectedArray);
//console.log(sap.ui.getCore().AppContext.selectedArray.length);
var oTable = new sap.m.Table();
for(var i = 0;i < sap.ui.getCore().AppContext.selectedArray.length;i++){
oTable.addColumn(new sap.m.Column({
demandPopin : true,
header:new sap.m.Text({text:sap.ui.getCore().AppContext.selectedArray[i]})
}));
}
//not working i want to place it in view2.xml
//oTable.placeAt("content");
},
displayPress : function(){
console.log(sap.ui.getCore().AppContext.selectedArray);
console.log(sap.ui.getCore().AppContext.selectedArray.length);
console.log(sap.ui.getCore().AppContext.selectedArray[0]);
console.log(sap.ui.getCore().AppContext.selectedArray[1]);
},
onBack : function () {
this.getOwnerComponent().getTargets().display("page1");
}
});
}, true);
edited view2.xml
<mvc:View
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:l="sap.ui.layout"
xmlns:html="http://www.w3.org/1999/xhtml"
controllerName="sap.ui.core.sample.trial.targetsApp.controller.View2"
xmlns:form="sap.ui.layout.form">
<App>
<Page title="TableView"
showNavButton="true"
navButtonPress="onBack">
<l:HorizontalLayout id="tableid">
</l:HorizontalLayout>
<footer>
<Bar>
<contentRight>
<Button text="Add New Rows" press="displayPress" />
<Button text="display" press="displayPress" />
</contentRight>
</Bar>
</footer>
</Page>
</App>
</mvc:View>
