<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/1.136.2/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"demo": "./"}'
data-sap-ui-xx-componentPreload="off"
data-sap-ui-xx-waitForTheme="true"
></script>
</head>
<body id="content" class="sapUiBody">
<div data-sap-ui-component
data-id="rootComponentContainer"
data-name="demo"
data-height="100%"
data-settings='{"id": "rootComponent"}'
></div>
</body>
</html>
<mvc:View controllerName="demo.controller.App"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:l="sap.ui.layout"
xmlns:f="sap.f"
displayBlock="true"
height="100%"
>
<App id="rootApp">
<l:ResponsiveSplitter>
<l:PaneContainer orientation="Vertical">
<l:PaneContainer>
<l:SplitPane>
<l:layoutData>
<l:SplitterLayoutData size="50%" />
</l:layoutData>
<Text text="Sector 1"/>
</l:SplitPane>
<l:SplitPane>
<f:FlexibleColumnLayout id="flexibleColumnLayout"
backgroundDesign="Solid"
layout="TwoColumnsBeginExpanded">
<f:beginColumnPages>
<Text text="Sector 2.1"/>
</f:beginColumnPages>
<f:midColumnPages>
<mvc:XMLView viewName="demo.view.Home"
height="100%"
async="true"/>
</f:midColumnPages>
</f:FlexibleColumnLayout>
</l:SplitPane>
</l:PaneContainer>
<l:SplitPane>
<VBox>
<Text text="Sector 3"/>
<Button text="OneColumn"
press=".onOneColumnButtonPress"/>
<Button text="TwoColumnsBeginExpanded"
press=".onTwoColumnsBeginExpandedButtonPress"/>
</VBox>
<l:layoutData>
<l:SplitterLayoutData size="50%" />
</l:layoutData>
</l:SplitPane>
</l:PaneContainer>
</l:ResponsiveSplitter>
</App>
</mvc:View>
<mvc:View xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:mc="sap.suite.ui.microchart"
xmlns:form="sap.ui.layout.form"
xmlns:l="sap.ui.layout"
xmlns:ux="sap.uxap"
displayBlock="true"
busyIndicatorDelay="0"
height="100%">
<ux:ObjectPageLayout flexEnabled="true">
<ux:sections>
<ux:ObjectPageSection title="Details1"
showTitle="false"
titleUppercase="false">
<ux:subSections>
<ux:ObjectPageSubSection>
<ux:blocks>
<Text text="datails ..."/>
</ux:blocks>
</ux:ObjectPageSubSection>
</ux:subSections>
</ux:ObjectPageSection>
<ux:ObjectPageSection title="Donut"
showTitle="false"
titleUppercase="false">
<ux:subSections>
<ux:ObjectPageSubSection>
<ux:blocks>
<form:SimpleForm editable="true"
labelSpanXL="4"
labelSpanM="5"
labelSpanL="6"
emptySpanXL="0"
maxContainerCols="1"
columnsL="1"
columnsXL="1"
singleContainerFullSize="false">
<form:content>
<Label text="Switch"/>
<HBox class="sapUiMediumMarginBottom"
alignItems="Center">
<Switch type="AcceptReject"/>
<core:Icon src="hint"
class="sapUiTinyMarginBegin"/>
<layoutData>
<l:GridData span="XL8 L6 M7 S12" />
</layoutData>
</HBox>
<Title text="2. Part"/>
<Label/>
<HBox height="160px">
<mc:InteractiveDonutChart id="workingTimeInteractiveDonutChart">
<mc:segments>
<mc:InteractiveDonutChartSegment label="Time1"
value="{global>/value1}"
displayedValue="12:00"/>
<mc:InteractiveDonutChartSegment label="Time2"
value="{global>/value2}"
displayedValue="15:00"/>
</mc:segments>
</mc:InteractiveDonutChart>
<layoutData>
<l:GridData span="XL8 L6 M7 S12" />
</layoutData>
</HBox>
<Label text="Text123"/>
<Input value="Test23243243"/>
</form:content>
</form:SimpleForm>
</ux:blocks>
</ux:ObjectPageSubSection>
</ux:subSections>
</ux:ObjectPageSection>
</ux:sections>
</ux:ObjectPageLayout>
</mvc:View>
sap.ui.define([
"sap/ui/core/UIComponent"
], function(UIComponent) {
"use strict";
return UIComponent.extend("demo.Component", {
metadata: {
manifest: "json"
},
init: function() {
UIComponent.prototype.init.apply(this, arguments);
this.setModel(new sap.ui.model.json.JSONModel({
value1: 40,
value2: 60
}), "global")
this.getRouter().initialize();
},
});
});
{
"_version": "1.10.0",
"start_url": "index.html",
"sap.app": {
"id": "demo",
"type": "application",
"title": "Demo",
"description": "Sample Code",
"applicationVersion": {
"version": "1.0.0"
}
},
"sap.ui": {
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
"sap_belize_hcw",
"sap_belize_hcb",
"sap_belize_plus",
"sap_belize",
"sap_fiori_3"
]
},
"sap.ui5": {
"dependencies": {
"minUI5Version": "1.46.7",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.uxap": {},
"sap.ui.unified": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"resources": {
"js": [
],
"css": [
{"uri": "style.css"}
]
},
"models": {
"test": {
"type": "sap.ui.model.json.JSONModel"
}
},
"rootView": {
"viewName": "demo.view.App",
"id": "rootView",
"type": "XML",
"displayBlock": true,
"height": "100%",
"async": true
},
"routing": {
"routes": [],
"config": {
"async": true,
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "demo.view",
"controlId": "rootApp",
"controlAggregation": "pages",
"transition": "slide"
}
}
}
}
sap.ui.define(['sap/ui/core/mvc/Controller'], function (Controller) {
'use strict';
return Controller.extend('demo.controller.App', {
onOneColumnButtonPress: function () {
this.getView().byId("flexibleColumnLayout").setLayout("OneColumn")
},
onTwoColumnsBeginExpandedButtonPress: function () {
const randomNumber = Math.floor(Math.random() * 101);
this.getView().byId("flexibleColumnLayout").setLayout("TwoColumnsBeginExpanded")
this.getView().getModel("global").setProperty("/value1", randomNumber);
this.getView().getModel("global").setProperty("/value2", 100- randomNumber);
},
});
});