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
]
});
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.