Skip to Content

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 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
          ]
  });
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Oct 30, 2015 at 02:03 PM

    Hi Amber,

    Try setting the height "100%" in createContent() of zero_app.FIlter view -

    this.setHeight("100%");
    

    Regards,

    Sai Vellanki.

    Add comment
    10|10000 characters needed characters exceeded