<!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.120.17/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
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>
{
"_version": "1.48.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.120.17",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.gantt": {},
"sap.ui.table": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"resources": {
"js": [
],
"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": [{
"name": "home",
"pattern": "",
"target": "home",
"titleTarget": "home"
}],
"targets": {
"home": {
"viewId": "homeView",
"viewName": "Home",
"transition": "fade",
"viewLevel": 1
},
"notFound": {
"viewName": "Home",
"transition": "slide",
"viewLevel": 98
}
},
"config": {
"async": true,
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "demo.view",
"controlId": "rootApp",
"controlAggregation": "pages",
"transition": "slide",
"bypassed": {
"target": "notFound"
},
"homeRoute": "home"
}
}
}
}
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.getModel("test").setProperty("/listEntries", [{name: "1"}]);
this.getRouter().initialize();
},
});
});
sap.ui.define([
"sap/ui/core/mvc/Controller",
],
function (Controller) {
"use strict";
return Controller.extend("demo.controller.Home", {
onInit: function () {
const model = new sap.ui.model.json.JSONModel(sap.ui.require.toUrl("demo/data.json"));
this.getView().setModel(model);
},
fnTimeConverter: function (timestamp) {
return sap.gantt.misc.Format.abapTimestampToDate(timestamp);
},
typeToColor: function (type) {
switch (type) {
case "SVZ": return "#BFBFBF";
case "WEZ": return "#D9D9D9";
case "verplant": return "#F4B183";
case "unverplant": return "#C5E0B4";
case "freigegeben": return "#22BB67";
case "nicht freigegeben": return "#FF0000";
case "ANW": return "#B4C7E7";
case "ABW": return "#FFFFFE";
case "GABW": return "#02AFF0";
default: return "blue";
}
}
});
});
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
height="100%"
>
<App id="rootApp"/>
</mvc:View>
<mvc:View controllerName="demo.controller.Home"
height="100%"
xmlns="sap.gantt.simple"
xmlns:axistime="sap.gantt.axistime"
xmlns:config="sap.gantt.config"
xmlns:m="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:dnd="sap.ui.core.dnd"
xmlns:g="sap.gantt.simple"
xmlns:core="sap.ui.core"
xmlns:table="sap.ui.table"
xmlns:rm="sap.ui.table.rowmodes">
<m:VBox>
<table:TreeTable selectionMode="Single"
selectionBehavior="RowSelector"
enableColumnReordering="true"
rows="{path: '/root'}">
<table:columns>
<table:Column>
<m:Text text="Type"/>
<table:template>
<m:Text text="{text}"/>
</table:template>
</table:Column>
</table:columns>
<table:rowMode>
<rm:Auto minRowCount="12"/>
</table:rowMode>
<table:dragDropConfig>
<dnd:DragInfo groupName="OrdersTableToShape"
sourceAggregation="rows"/>
</table:dragDropConfig>
</table:TreeTable>
<GanttChartContainer>
<toolbar>
<ContainerToolbar showSearchButton="false"/>
</toolbar>
<GanttChartWithTable id="gantt"
shapeSelectionMode="Multiple"
shapeResize=".onShapeResize"
shapeContextMenu=".onShapeContextMenu"
visibleHorizonUpdate="visibleHorizonUpdate"
disableShapeDoubleClickEvent="true">
<axisTimeStrategy>
<axistime:ProportionZoomStrategy zoomLevel="5">
<axistime:totalHorizon>
<config:TimeHorizon startTime="20181029000000"
endTime="20181129000000"/>
</axistime:totalHorizon>
<axistime:visibleHorizon>
<config:TimeHorizon startTime="20181029000000"
endTime="20181129000000"/>
</axistime:visibleHorizon>
</axistime:ProportionZoomStrategy>
</axisTimeStrategy>
<table>
<table:TreeTable selectionMode="Single"
selectionBehavior="RowSelector"
enableColumnReordering="true"
rows="{
path: '/root',
parameters: {
arrayNames: ['children'],
numberOfExpandedLevels: 1
}
}">
<table:columns>
<table:Column>
<m:Text text="Type"/>
<table:template>
<m:Text text="{text}"/>
</table:template>
</table:Column>
</table:columns>
<table:rowMode>
<rm:Auto minRowCount="12"/>
</table:rowMode>
<table:rowSettingsTemplate>
<GanttRowSettings rowId="{id}"
shapes1="{path:'tasks', templateShareable:false, enableDnD:true,dnd:{droppable:true}}">
<shapes1>
<g:BaseRectangle time="{path: 'startTime', formatter: '.fnTimeConverter'}"
endTime="{path: 'endTime', formatter: '.fnTimeConverter'}"
height="15"
fill="{path: 'type', formatter: '.typeToColor'}"
stroke="#b4c7e7"
strokeWidth="{= ${type} === 'ABW' ? 2 : 0}"
title="{aaaCode}"
horizontalTextAlignment="Middle"
draggable="false"
selectable="true"
hoverable="true"
resizable="{= ${type} === 'verplant'}"
connectable="false">
<g:customData>
<core:CustomData key="ShapeType"
value="GPAVA" />
<core:CustomData key="AvailId"
value="{GPChartModel>AvailabilityId}" />
</g:customData>
</g:BaseRectangle>
</shapes1>
<dragDropConfig>
<dnd:DropInfo groupName="OrdersTableToShape"
targetAggregation="shapes1"
drop="onDropToAVGroup"/>
</dragDropConfig>
</GanttRowSettings>
</table:rowSettingsTemplate>
</table:TreeTable>
</table>
</GanttChartWithTable>
</GanttChartContainer>
</m:VBox>
</mvc:View>
{
"color": "sapUiLegend6",
"root": {
"children": [
{
"id": "line1",
"text": "Team Hans",
"tasks": [
{
"id": "shape1",
"startTime": "20181101090000",
"endTime": "20181101091000",
"type": "SVZ"
},
{
"id": "shape2",
"startTime": "20181101091000",
"endTime": "20181101093000",
"type": "WEZ"
},
{
"id": "shape3",
"startTime": "20181101093000",
"endTime": "20181101113000",
"type": "verplant"
},
{
"id": "shape4",
"startTime": "20181101113000",
"endTime": "20181101115000",
"type": "WEZ"
},
{
"id": "shape5",
"startTime": "20181101115000",
"endTime": "20181101120000",
"type": "SVZ"
},
{
"id": "shape6",
"startTime": "20181101120000",
"endTime": "20181101170000",
"type": "unverplant"
}
],
"generalTasks": [
{
"id": "shape1",
"startTime": "20181101090000",
"endTime": "20181101170000",
"type": "nicht freigegeben"
}
]
},
{
"id": "line2",
"text": "Hans Wurst",
"tasks": [
{
"id": "shape1",
"startTime": "20181101090000",
"endTime": "20181101170000",
"type": "ANW"
}
],
"generalTasks": [
{
"id": "shape1",
"startTime": "20181101090000",
"endTime": "20181101170000",
"type": "freigegeben"
}
]
},
{
"id": "line3",
"text": "Tony Montana",
"tasks": [
{
"id": "shape1",
"startTime": "20181101090000",
"endTime": "20181101110000",
"type": "ANW"
},
{
"id": "shape2",
"startTime": "20181101110000",
"endTime": "20181101120000",
"type": "ABW",
"aaaCode": "20"
},
{
"id": "shape3",
"startTime": "20181101120000",
"endTime": "20181101170000",
"type": "ANW"
}
]
},
{
"id": "line4",
"text": "Fips Asmussen",
"tasks": [
{
"id": "shape2",
"startTime": "20181101090000",
"endTime": "20181101170000",
"type": "ABW",
"aaaCode": "30"
}
]
}
]
}
}