Skip to Content
Oct 30, 2015 at 01:54 PM

Sap.m.Page contents not shown when used inside ux3 OverlayDialog


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 is displayed correctly) , Below are the snippets of the source code


  <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"
  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  //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,
                                                     backgroundRepeat: true});



  <body class="sapUiBody" role="application">
  <div id="content"></div>

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("");//,false,"sbetha","sap1234");
  //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%",
                                                          new sap.m.Label({text:"Abc"}) 

Calling open function on button click

Btn_Filter: function(){

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: [