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

          ]

  });

replied

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