<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<meta charset="UTF-8">
	<title>Dialog Control</title>
	<script
		id="sap-ui-bootstrap"
		src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
		data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-libs="sap.m"
    data-sap-ui-xx-bindingSyntax="complex"
		data-sap-ui-resourceroots='{
				"sap.ui.demo.dlg": "./"
			}'>
	</script>
	<script>
				new sap.m.Shell("ShellId",{title: "Dialog Control",
					showLogout: false,
					app: new sap.ui.core.ComponentContainer({
						name: "sap.ui.demo.dlg"		
					})
				}).placeAt("content");
	</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
// Code goes here

/* Styles go here */

jQuery.sap.declare("sap.ui.demo.dlg.Component");  
sap.ui.core.UIComponent.extend("sap.ui.demo.dlg.Component", {  
   createContent : function () {  
  // create root view  
	  var oView = sap.ui.view({  
		  id : "app",  
		  viewName : "sap.ui.demo.dlg.DialogHome",  
		  type : "JS",  
	  });  
	  
	var dataObject = [
    {
      "icon" : "inbox",
      "number" : "89",
      "title" : "Approve Leave Requests",
      "info" : "Overdue",
      "infoState" : "Error"
    },
    {
      "type" : "Create",
      "title" : "Create Leave Requests",
      "info" : "28 Days Left",
      "infoState" : "Success"
    },
    {
      "icon" : "travel-expense-report",
      "number" : "281",
      "numberUnit" : "euro",
      "title" : "Travel Reimbursement",
      "info" : "1 day ago"
    },
    {
      "icon" : "loan",
      "number" : "2380",
      "numberUnit" : "euro",
      "title" : "My Salary",
      "info" : "8 days ago"
    },
    {
      "icon" : "lab",
      "number" : "1",
      "numberUnit" : "Invention",
      "title" : "Test Lab Reports",
      "info" : "8 Days Ago"
    },
    {
      "type" : "Create",
      "title" : "Create Purchase Order",
      "info" : "890€ Open Budget",
      "infoState" : "Success"
    },
    {
      "icon" : "stethoscope",
      "number" : "3",
      "title" : "Yearly Health Check",
      "info" : "3 year overdue",
      "infoState" : "Error"
    }
  ];
	
	var model = new sap.ui.model.json.JSONModel();
		model.setData({
			modelData: {
			productsData : []
			}
			});
		oView.setModel(model);
		oView.getModel().setProperty("/modelData/TileCollection", dataObject); 
       
return oView;  
  }  
});  
sap.ui.jsview("sap.ui.demo.dlg.DialogHome", {  
  /** 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 routingdemo.App 
  */  
  getControllerName : function() {  
  return "sap.ui.demo.dlg.DialogHome";  
  },  
  /** 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 routingdemo.App 
  */  
  createContent : function(oController) {  
  this.setDisplayBlock(true);  
	this.app = new sap.m.App("mainApp",{initialPage:"FirstDialogPage"});

		var page = sap.ui.xmlview("FirstDialogPage", "sap.ui.demo.dlg.FirstDialogPage");
		this.app.addPage(page);
  return this.app;  
  }  
});
sap.ui.controller("sap.ui.demo.dlg.DialogHome", {

/**
* 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 zui5_sample.Home
*/
//	onInit: function() {
//
//	},

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zui5_sample.Home
*/
//	onBeforeRendering: function() {
//
//	},

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zui5_sample.Home
*/
//	onAfterRendering: function() {
//
//	},

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zui5_sample.Home
*/
//	onExit: function() {
//
//	}

});
<mvc:View
  height="100%"
  controllerName="sap.ui.demo.dlg.FirstDialogPage"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
  <Page
    title="Products"
    enableScrolling="false" >
    <TileContainer
      id="container"
      tileDelete="handleTileDelete"
      tiles="{/modelData/TileCollection}">
      <StandardTile
        icon="sap-icon://{icon}"
        type="{type}"
        number="{number}"
        numberUnit="{numberUnit}"
        title="{title}"
        info="{info}"
        infoState="{infoState}"
        press="onPress" />
    </TileContainer>
    <footer>
      <Toolbar>
        <ToolbarSpacer/>
          <Button text="Edit" press="handleEditPress" />
          <Button text="Busy state" press="handleBusyPress" />
        <ToolbarSpacer/>
      </Toolbar>
    </footer>
  </Page>
</mvc:View>
sap.ui.controller("sap.ui.demo.dlg.FirstDialogPage", {

/*
* 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 table_v01.Main
*/

	onInit: function() {

	},
	
	onPress: function(oEvent){
var oSelectedItem = oEvent.getSource();
var oBindingPath = oSelectedItem.getBindingContext().sPath;
var oModel = this.getView().getModel().getProperty(oBindingPath);
this.getView().getModel().setProperty("/modelData/DialogData", oModel);
  var app = sap.ui.getCore().byId("mainApp");
		var page = app.getPage("SecondDialogPage");
	if(page)
	{
	  page.destroy();
	}
	var page = new sap.ui.xmlview("SecondDialogPage", "sap.ui.demo.dlg.SecondDialogPage");
		app.addPage(page);

	app.to(page,"slide",{});
	}

});
<mvc:View
  height="100%"
  controllerName="sap.ui.demo.dlg.SecondDialogPage"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m">
  <Page id="oPage"
    title="Dialog Open"
    class="sapUiContentPadding"
    showNavButton="true"
    navButtonPress="onPress">
    <headerContent>
      <Button icon="sap-icon://action" tooltip="Share" />
    </headerContent>
    <subHeader>
      <Toolbar>
        <SearchField />
      </Toolbar>
    </subHeader>
    <content>
      <VBox>
        <Text text="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat" />
      </VBox>
    </content>
    <footer>
      <Toolbar>
        <ToolbarSpacer/>
        <Button text="Accept" type="Accept" />
        <Button text="Reject" type="Reject" />
        <Button text="Edit" />
        <Button text="Delete" />
      </Toolbar>
    </footer>
  </Page>
</mvc:View>
sap.ui.controller("sap.ui.demo.dlg.SecondDialogPage", {

/*
* 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 table_v01.Main
*/

	onInit: function() {

	  var oDialog = new sap.m.Dialog({icon:"sap-icon://popup-window"
	    ,title:"Dialog Opened"
	    ,content:[new sap.m.Text({text:"Easier Web Development"})]
	    ,endButton:new sap.m.Button({text:"OK"
	    ,press:function(){
	      oDialog.close();
	      }})
	  });
	  oDialog.open();
	},
	
	onAfterRendering:function(){

	},
	
	onPress:function(){
	 var app = sap.ui.getCore().byId("mainApp");
		app.back();
	}

});