<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Page</title>
		<script 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-compatVersion="edge"
			data-sap-ui-preload="async"
			data-sap-ui-bindingSyntax='complex'
			data-sap-ui-resourceroots='{"sap.otuniyi.sample": "./"}'
			data-sap-ui-frameOptions="trusted">
		</script>
		<script>
			sap.ui.getCore().attachInit(function() {
				new sap.m.Shell({
					showLogout: false,
					appWidthLimited: false,
					app: new sap.ui.core.ComponentContainer({
						name: "sap.otuniyi.sample",
						height: "100%",
						width: "100%",
						settings: {
							id: "sample"
						},
						propagateModel: true
					})
				}).placeAt("content");
			});
		</script>

	</head>

	<body id="content" style="margin: 0" class="sapUiBody">
	</body>

</html>
// Code goes here

/* Styles go here */

{
	"_version": "1.1.0",
	"sap.app": {
		"_version": "1.1.0",
		"id": "sap.otuniyi.sample",
		"type": "application",
		"i18n": "i18n.properties",
		"title": "",
		"description": "",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"dataSources": {
			"testModel": {
				"uri": "data.json",
				"type": "OData",
				"settings": {
					"odataVersion": "2.0",
					"localUri": "sap.otuniyi.sample/data.json",
					"annotations": []
				}
			}
		}
	},
	"sap.ui": {
		"_version": "1.1.0",
		"technology": "UI5",
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": ["sap_bluecrystal"]
	},
	"sap.ui5": {
		"_version": "1.1.0",

				"rootView": {
  "viewName": "sap.otuniyi.sample.App",
  "type": "XML",
  "async": true, 
  "id": "rootControl"

},
		"dependencies": {
			"minUI5Version": "1.30",
			"libs": {
				"sap.m": {}
			}
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"settings": {
					"bundleName": "sap.otuniyi.sample.i18n"
				}
			},
			"testModel": {
				"type": "sap.ui.model.json.JSONModel",
				"dataSource": "testModel"
			}
		},
		"resources": {
			"css": [{
				"uri": "style.css"
			}]
		},
		"routing": {
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewPath": "sap.otuniyi.sample",
				"controlId": "rootControl",
				"viewType": "XML",
				"async": true,
				"bypassed": {
					"target": ["master"]
				}
			},
			"routes": [{
				"name": "master",
				"pattern": "",
				"target": ["master"]
			}, {
				"name": "detail",
				"pattern": "masterList/:detailID:",
				"target": ["master", "detail"]
			}],
			"targets": {
				"master": {
					"viewName": "Master",
					"controlAggregation": "masterPages",
					"viewLevel": "0"
				},
				"detail": {
					"viewName": "Detail",
					"controlAggregation": "detailPages",
					"viewLevel": "1"
				}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		}
	}
}
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:layout="sap.ui.layout" controllerName="sap.otuniyi.sample.Detail"
	xmlns:semantic="sap.m.semantic" xmlns:core="sap.ui.core" xmlns:m="sap.m" xmlns:c="sap.suite.ui.microchart">
	<semantic:DetailPage id="page" navButtonPress="onNavBack">
		<semantic:content>
		  			<HBox>
			<Button text="Press ME!" press="openDialog"></Button>
			</HBox>
		</semantic:content>
	</semantic:DetailPage>
</mvc:View>
sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/Device", "sap/suite/ui/microchart/RadialMicroChart", "sap/m/Dialog", "sap/m/Button",
    "sap/viz/ui5/controls/VizFrame"
  ],
  function(Controller, Device, RadialMicroChart, Dialog, Button, VizFrame) {
    "use strict";

    return Controller.extend("sap.otuniyi.sample", {
      onInit: function() {
        this.getOwnerComponent().getRouter().getRoute("detail").attachPatternMatched(this._onRouteMatched, this);
      },
      _onRouteMatched: function(oEvent) {
        this._detailID = oEvent.getParameter("arguments").detailID;
        this.getView().bindElement("/masterList/" + this._detailID);
      },
      openDialog: function() {
        var that = this;
        var oModel = sap.ui.getCore().getModel("testModel");
        var dataset = new sap.viz.ui5.data.FlattenedDataset({

          measures: [{
            name: 'value',
            value: '{value}',
          }],
          data: {
            path: "/masterList",
          }
        });
        var oFeedValueAxis = new sap.viz.ui5.controls.common.feeds.FeedItem({
          "uid": "valueAxis",
          "type": "Measure",
          "values": ["value"]
        });

        if (!this.draggableDialog) {
          this.draggableDialog = new Dialog({
            title: "Charts",
            type: "Message",
            contentWidth: "900px",
            contentHeight: "700px",
            resizable: true,
            content: [
              new RadialMicroChart({
                percentage: 75,
                total: 100,
                size: "Responsive",
                valueColor: "Critical"
              }),
              new VizFrame("barChart", {
                uiConfig: {
                  applicationSet: "fiori"
                },
                vizType: "column",
                width: "100%",
                height: "446px",
                vizProperties: {
                  legend: {
                    visible: true
                  },
                  title: {
                    visible: true,
                    text: "Bar Chart"
                  },
                  valueAxis: {
                    title: {
                      visible: true,
                      text: "%"
                    }
                  },
                  categoryAxis: {
                    title: {
                      visible: false,
                      text: "Bar Chart"
                    }
                  }
                }
              }).setDataset(dataset).setModel(oModel).addFeed(oFeedValueAxis)
            ],

            beginButton: new Button({
              text: "Close",
              press: function() {
                this.draggableDialog.close();
              }.bind(this)
            })
          });
          this.getView().addDependent(this.draggableDialog);
        }
        this.draggableDialog.open();

      },

    });

  }, true);
sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/Device"], function(Controller, Device) {
	"use strict";

	return Controller.extend("sap.otuniyi.sample.Master", {
		onInit: function() {
			this.getOwnerComponent().getRouter().getRoute("master").attachPatternMatched(this._onRouteMatched, this);
		},
		_onRouteMatched: function(oEvent) {
			if (!Device.system.phone) {
				this.getOwnerComponent().getRouter()
					.navTo("detail", {
						detailID: 0
					}, true);
			}
		},
		onSelectionChange: function(oEvent) {
			var sdetailID = oEvent.getSource().getSelectedItem().getBindingContext().getProperty("detailID");
			this.getOwnerComponent().getRouter()
				.navTo("detail", {
					detailID: sdetailID
				}, !Device.system.phone);
		}
	});

}, true);
<mvc:View controllerName="sap.otuniyi.sample.Master" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m"
	xmlns:semantic="sap.m.semantic">
	<semantic:MasterPage id="page" title="Contents">
		<semantic:content>
			<List id="list" items="{/masterList}" mode="SingleSelectMaster" noDataText="No List Found" growing="true" growingScrollToLoad="true"
				selectionChange="onSelectionChange" updateFinished="onUpdateFinished">
				<items>
					<StandardListItem title="{titleName}" type="Active" press="onSelectionChange" icon="{icon}" description="{description}"/>
				</items>
			</List>
		</semantic:content>
	</semantic:MasterPage>
</mvc:View>
sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel"],
	function(UIComponent, JSONModel) {
		"use strict";
		return UIComponent.extend("sap.otuniyi.sample.Component", {

			metadata: {
				manifest: "json"
			},

			init: function() {
				var oModel = new JSONModel("data.json");
				this.setModel(oModel);

				UIComponent.prototype.init.apply(this, arguments);

				this.getRouter().initialize();
				this.getRouter().attachTitleChanged(function(oEvent) {
					document.title = oEvent.getParameter("title");
				});
			}
		});
	}, true);
{
	"masterList": [{
		"detailID": 0,
		"titleName": "Master 1",
		"description": "001",
		"icon": "sap-icon://alert",
		"value" : 40, 
		"titlesProperties": [{
			"subDetailID": 0,
			"imageURL": "https://blogs.sap.com/wp-content/uploads/2018/02/file.png",
			"caption": "Caption for Image 0"
		}, {
			"subDetailID": 1,
			"imageURL": "http://www.eweek.com/imagesvr_ez/b2bezp/2017/05/1088SAPApps.jpg?alias=article_hero",
			"caption": "Caption for Image 1"
		}, {
			"subDetailID": 2,
			"imageURL": "https://cdns.tblsft.com/sites/default/files/sap_0.png",
			"caption": "Caption for Image 2"
		}, {
			"subDetailID": 3,
			"imageURL": "https://blogs.sap.com/wp-content/uploads/2018/02/file.png",
			"caption": "Caption for Image 3"
		}]
	}, {
		"detailID": 1,
		"titleName": "Master 2",
		"description": "002",
		"icon": "sap-icon://alert",
		"value" : 40, 
		"titlesProperties": [{
			"subDetailID": 0,
			"imageURL": "https://zdnet1.cbsistatic.com/hub/i/r/2017/04/26/eafa2cae-0958-4fb9-b3ef-4d163a131fab/resize/370xauto/de25fbce832bfb55481e02f411d88be3/sap-cloud-logo.png",
			"caption": "Caption for Image 4"
		}]
	}, {
		"detailID": 2,
		"titleName": "Master 3",
		"description": "003",
		"icon": "sap-icon://alert",
		"value" : 40, 
		"titlesProperties": [{
			"subDetailID": 0,
			"imageURL": "https://en.wikipedia.org/wiki/SAP_SE#/media/File:SAP_2011_logo.svg",
			"caption": "Caption for Image 5"
		}, {
			"subDetailID": 1,
			"imageURL": "http://www.eweek.com/imagesvr_ez/b2bezp/2017/05/1088SAPApps.jpg?alias=article_hero",
			"caption": "Caption for Image 6"
		}]
	}]
}
<View xmlns="sap.m">
	<SplitApp id="rootControl"></SplitApp>
</View>