Hello All,
I am a novice to SAPUI5 and web development so please bear with me as this could be a very basic question about SAPUI5.
I am trying to develop a simple view (CalcView.js)which is of type javascript. I need to place 8 drop down boxes in this view. I am able to created one of these drop downs using var oPropertyType = new sap.ui.commons.DropdownBox syntax which is populated based on the data received from a REST call.
When I create just one of the drop down and write 'return oDropDown1' at the end of the createcontent method of this view, all works fine and I can see this drop down. Here is where the challenge starts for me. When I now create more than 1 drop downs how do I get them to appear on the page? In this case return statement won't work as I now have to return more than 1 control (drop downs) back.
I have structured my project such that I have index.html which looks like this...
My Application.js looks like this...
jQuery.sap.declare("Application"); jQuery.sap.require("sap.ui.app.Application"); sap.ui.app.Application.extend("Application", { init : function() { var model = new sap.ui.model.odata.ODataModel("proxy/sap/opu/odata/sap/ZCONSUMPTIONCALC_SRV/", true, "VORANIJ", "desktop1",null,true, true); var imgModel = new sap.ui.model.json.JSONModel("model/img.json"); sap.ui.getCore().setModel(model); sap.ui.getCore().setModel(imgModel, "img"); }, main : function() { // create app view and put to html root element var root = this.getRoot(); sap.ui.jsview("app", "view.App").placeAt(root); } });
My Appview.js looks like this...
sap.ui.jsview("view.App", { /** * Specifies the Controller belonging to this View. In the case that it is * not implemented, or that "null" is returned, this View does not have a * Controller. * * @memberOf view.App */ getControllerName : function() { return "view.App"; }, /** * Is initially called once after the Controller has been instantiated. It * is the place where the UI is constructed. Since the Controller is given * to this method, its event handlers can be attached right away. * * @memberOf view.App */ createContent : function(oController) { var shell = new sap.ui.ux3.Shell({ appTitle : "Consumption Calculator", appIcon : "img/BG_Logo.png", showFeederTool : false, showInspectorTool : false, showSearchTool : false, showLogoutButton : false, worksetItems : [ new sap.ui.ux3.NavigationItem({ text : "" }) ] }); var view = sap.ui.view({ id : "idCalculator", viewName : "view.Calculator", type : sap.ui.core.mvc.ViewType.JS }); shell.setContent(view); this.oShell = shell; return this.oShell; } });
And finally my Calculator view (the one in question) looks like this...
sap.ui.jsview("view.Calculator", { /** * Specifies the Controller belonging to this View. In the case that it is * not implemented, or that "null" is returned, this View does not have a * Controller. * * @memberOf view.Calculator */ getControllerName : function() { return "view.Calculator"; }, /** * Is initially called once after the Controller has been instantiated. It * is the place where the UI is constructed. Since the Controller is given * to this method, its event handlers can be attached right away. * * @memberOf view.Calculator */ createContent : function(oController) { var oPropertyType = new sap.ui.commons.DropdownBox({ id : "proptype", tooltip : "Property Type", width : "350px" }); var oItemPropType = new sap.ui.core.ListItem(); oItemPropType.bindProperty("key", "Characteristic"); oItemPropType.bindProperty("text", "Description"); oItemPropType.bindProperty("enabled", "enabled"); var oFiltPropType = new sap.ui.model.Filter("Group_I",sap.ui.model.FilterOperator.EQ,"PROPERTY"); oPropertyType.bindItems("/UI_Values",oItemPropType,null,oFiltPropType); var oLabPropTyp = new sap.ui.commons.Label("LabelPropTyp",{ text: "Property Type:", labelFor: oPropertyType}); return oPropertyType; } });
Any help around this will be really appreciated.
Regards,
Jay