Skip to Content

Archived discussions are read-only. Learn more about SAP Q&A

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





Thanks a lot Sai , it worked.

@Moderator - Dont know why , I am unable to see Correct Answer and Helpful Answer buttons for this post.

0 View this answer in context
Not what you were looking for? View more on this topic or Ask a question