Hi Experts,
After searching through the entire discussions and trying various suggestion, I am still not able to call a second view into a Shell Container on a button click in a sap.ui.commons application.
I am getting the error: " UI5 Cannot read property 'removeAllWorksetItems' of undefined "
Index.HTML
<script> sap.ui.localResources("inventory_dashboard"); var view1 = sap.ui.view({ id:"idInitial", viewName:"inventory_dashboard.Initial", type:sap.ui.core.mvc.ViewType.JS }); var view2 = sap.ui.view({ id:"idFirst", viewName:"inventory_dashboard.First", type:sap.ui.core.mvc.ViewType.JS }); var oShell = new sap.ui.ux3.Shell({ id: "shell", }); oShell.setContent(sap.ui.getCore().byId("idInitial")); oShell.placeAt("content"); //view.placeAt("content"); </script>
Initial.view.js
createContent : function(oController) { //create the ApplicationHeader control var oAppHeader = new sap.ui.commons.ApplicationHeader("appHeader"); //configure the branding area oAppHeader.setLogoSrc("http://www.sap.com/global/images/SAPLogo.gif"); oAppHeader.setLogoText("Inventory Dashboard"); //configure the welcome area oAppHeader.setDisplayWelcome(true); oAppHeader.setUserName("George"); //configure the log off area oAppHeader.setDisplayLogoff(true); //Create a matrix layout with 3 columns var oMatrix = new sap.ui.commons.layout.MatrixLayout({ layoutFixed: false, width: '100%', columns: 3 }); // oMatrix.setWidths('0px','0px','0px'); //Create a simple form within the layout var oLabel = new sap.ui.commons.Label({text: 'Company Code'}); var oInput = new sap.ui.commons.TextField({ id: 'coCodeTxt', value: 'US10', width: '100px' }); oLabel.setLabelFor(oInput); oMatrix.createRow(oLabel,'', oInput); oLabel = new sap.ui.commons.Label({text: 'Plant'}); oInput = new sap.ui.commons.TextField({ id: 'plantTxt', value: '1000', width: '100px' }); oLabel.setLabelFor(oInput); oMatrix.createRow(oLabel,'', oInput); // create a simple button with some text and a tooltip only var oButton = new sap.ui.commons.Button({ text : "ENTER", tooltip : "Press to Continue", press : function() { sap.ui.getCore().byId("shell").removeAllWorksetItems(); // sap.ui.getCore().byId("shell").removeAllContent(); sap.ui.getCore().byId("shell").setContent(sap.ui.getCore().byId("idFirst"),true); } }); // attach it to some element in the page oMatrix.createRow('',oButton,'' ); // Create a BorderLayout instance var oBorderLayout1 = new sap.ui.commons.layout.BorderLayout("BorderLayout1", { width: "100%", height: "200px", top: new sap.ui.commons.layout.BorderLayoutArea({ // size: "100%", visible: true, content: [ oAppHeader ] }), center: new sap.ui.commons.layout.BorderLayoutArea({ contentAlign: "center", visible: true, content: [ oMatrix ] }) }); // Attach the BorderLayout to the page oBorderLayout1.placeAt("content"); }
First.view.js
createContent : function(oController) { //create the ApplicationHeader control var oAppHeader = new sap.ui.commons.ApplicationHeader("appHeader"); //configure the branding area oAppHeader.setLogoSrc("http://www.sap.com/global/images/SAPLogo.gif"); oAppHeader.setLogoText("Inventory Dashboard"); //configure the welcome area oAppHeader.setDisplayWelcome(true); oAppHeader.setUserName("George"); //configure the log off area oAppHeader.setDisplayLogoff(true); return(oAppHeader); }
Kindly let me know where I'm going wrong or if you need more information. Below are the Debugger Screenshots: