Hi all,
I have created a button in my splittApp which on click , opens up ux3.OverlayDialog. Inside the OverlayDialog , i have created another sap.m.Page with a label as its content. But this label is not shown in the overlay container when it opens (though the title of this sap.m.page is displayed correctly) , Below are the snippets of the source code
index.html
<!DOCTYPE HTML><html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.m,sap.ui.ux3" data-sap-ui-theme="sap_bluecrystal"> </script> <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme --> <script> sap.ui.localResources("zerp_app"); //var app = new sap.m.App({initialPage:"idMain1"}); var View_Filter = sap.ui.view({id:"idFilter", viewName:"zerp_app.Filter",type:sap.ui.core.mvc.ViewType.JS}); var Page_PoHdr = sap.ui.view({id:"idMain1", viewName:"zerp_app.Main", type:sap.ui.core.mvc.ViewType.JS}); //SplitApp for Master and Detail var oSplit_App = new sap.m.SplitApp({masterPages:Page_PoHdr, backgroundImage:"Images/background1.jpg", backgroundRepeat: true}); //app.addPage(page); oSplit_App.placeAt("content"); </script> </head> <body class="sapUiBody" role="application"> <div id="content"></div> </body></html>
In Controller of main view , creating object of OverLayDialog (just creating object now calling open function yet) . In the below code , inside the content , the commented line sap.ui.getCore().byId("idFilter") is actually not displaying the view contents of the Filter view(its just showing the title of sap.m.Page - for idFilter) . But when i comment this and simple test with a new sap.m.Label() , it successfully shows this label inside the Dialog.
sap.ui.controller("zerp_app.Main", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zerp_app.Main
*/ onInit: function() { //OData model with webservice URL var oData_Hdr = new sap.ui.model.odata.ODataModel("http://migdev.milltec.com:8002/sap/opu/odata/sap/zprj_po_srv/");//,false,"sbetha","sap1234"); sap.ui.getCore().setModel(oData_Hdr,"Model_Hdr"); //Creating ux3 Dialog Overlay Container for Filter,Search and Sort Criteria var oDialog_Flt = new sap.ui.ux3.OverlayDialog("Dialog_Flt", { width: "100%", height: "100%", content:[//sap.ui.getCore().byId("idFilter") new sap.m.Label({text:"Abc"}) ] }); },Calling open function on button click
Btn_Filter: function(){ sap.ui.getCore().byId("Dialog_Flt").open(); }
Page/View for dialog which needs to be displayed inside OverlayDIalog
sap.ui.jsview("zerp_app.Filter", { /** 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 zerp_app.Filter */ getControllerName : function() { return "zerp_app.Filter"; }, /** 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 zerp_app.Filter */ createContent : function(oController) { var oPanel_Sort = new sap.m.Panel({headerText:"Sort Criteria", expandable: false }); var oPanel_Filter = new sap.m.Panel({headerText:"Filter Criteria", expandable: false }); var oLabel = new sap.m.Label({text:"Test"});
// return(oLabel); return new sap.m.Page("test",{ title: "Filter and Sort Options", content: [ oLabel ] });