Hello Everyone!!

In this blog post I am going to explain about SAP UI5 Gantt Chart.

Gantt Charts in SAP UI5 are a useful way of showing what work is scheduled to be done on a specific day. They also help us to view the start date and end date of a project in one simple view.

Gnatt chart in SAP UI5 consists of three areas :

•  Chart area
•  Table area
•  Global toolbar.

This is a beginner’s guide on how to create a simple Gantt chart in SAPUI5.

Step 1 :

Create a sample Project in Web IDE :

Step 2 :

View.view.xml : Using this code we have created an XML view

<mvc:View controllerName="com.chart.controller.View1" height="100%" xmlns:axistime="sap.gantt.axistime" xmlns:config="sap.gantt.config"
xmlns:m="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:table="sap.ui.table" xmlns="sap.gantt.simple">
<m:Page id="page" title="{i18n>ProjectStatus}">
<m:Button class="sapUiTinyMargin sapUiSizeCompact" icon="sap-icon://delete" press="onDeleteTask" text="{i18n>Delete}" type="Reject"/>
<m:Button class="sapUiTinyMargin sapUiSizeCompact" icon="sap-icon://download" press="onExportPDF" text="{i18n>Export}" type="Emphasized"/>
<GanttChartWithTable id="sGanttchart">
<axisTimeStrategy>
<axistime:FullScreenStrategy>
<axistime:totalHorizon>
<config:TimeHorizon endTime="20201129000000" startTime="20201029000000"/>
</axistime:totalHorizon>
<axistime:visibleHorizon>
<config:TimeHorizon endTime="20201129000000" startTime="20201029000000"/>
</axistime:visibleHorizon>
</axistime:FullScreenStrategy>
</axisTimeStrategy>
table>
<table:TreeTable enableColumnReordering="true" minAutoRowCount="12"
rows="{ path: '/Projects', parameters: { arrayNames: ['Activities'], numberOfExpandedLevels: 1 } }" 
selectionBehavior="RowSelector"
selectionMode="Single" 
visibleRowCountMode="Auto">
<table:columns>
<table:Column label="{i18n>ProjectName}" template="text"/>
</table:columns>
<table:rowSettingsTemplate>
<GanttRowSettings rowId="{id}">
<shapes1>
<BaseConditionalShape activeShape="{= ${type} === 'chevron' ? 1 : 0}">
<BaseChevron endTime="{endTime', formatter: '.sTimeConverter'}" fill="{fill}"									
time="{path: 'startTime', formatter: '.sTimeConverter'}"/>
<BaseChevron endTime="{path: 'endTime', formatter: '.sTimeConverter'}" fill="{fill}"			
time="{path: 'startTime', formatter: '.sTimeConverter'}"/>
</shapes>
</BaseConditionalShape>
</shapes1>
</GanttRowSettings>
</table:rowSettingsTemplate>
</table:TreeTable>
</table>
</GanttChartWithTable>
</m:Page>
</mvc:View>

Step 3 :

I have Binded some sample JSON Data to the table and Chart .

Data.Json :  

{
	"Projects": {
		"Activities": [{
				"id": "line1",
				"text": "Project - 1",
				"type": "chevron",
				"fill": "grey",
				"startTime": "20201101090000",
				"endTime": "20201127090000"
			}, {
				"id": "line2",
				"text": "Project - 2",
				"type": "chevron",
				"fill": "orange",
				"startTime": "20201101090000",
				"endTime": "20201127090000"
			}, {
				"id": "line3",
				"text": "Project - 3",
				"type": "chevron",
				"fill": "red",
				"startTime": "2020110090000",
				"endTime": "20201127090000"
			}, {
				"id": "line4",
				"text": "Project - 4",
				"type": "chevron",
				"fill": "green",
				"startTime": "2020110090000",
				"endTime": "20201127090000"
			}

		]
	}
}

Step 4 :

Style.css  :  Implementing CSS in Style.css File.

.sapMIBar.sapMHeader-CTX{
	background:#084073 !important;
}
.sapMShellAppWidthLimited .sapMShellCentralBox {
    width: 100% !important;
    margin-left: 0px !important;
    left: 0px !important;
}
.sapMPageHeader::before {
    border-top: 0px !important;
}
.sapMTB {
    background: #fff;
}
.sapGanttChartWithTableHeader {
    background-color: #fff !important;
}

Step 5 :

Now the above JSON data I am going to bind  with JSON Model .

Controller Part : 

		onInit: function () {
			var oModel = new JSONModel("model/Data.json");
			this.getView().setModel(oModel);
		},

and now the output is –

showDisplayTypeButton :

To show or hide display type menu on the toolbar

Here is the code for refrence.

<GanttChartContainer >
<toolbar>
<ContainerToolbar showDisplayTypeButton="true" />
</toolbar>
</GanttChartContainer>

Delete Task :

In the project, you may want to remove Tasks that are no longer necessary or relevant . To delete Project Simply select row and click on the Delete button.

Controller Part :

Here is the code for refrence.

	onDeleteTask: function(oEvent) {
			var oGantt = this.getView().byId("sGanttchart");
			var oTable = oGantt.getTable();
			var aSelectedRows = oTable.getSelectedIndices();
		    oTable.getBinding().getModel().getData().Projects.Activities.splice(aSelectedRows[0],1);
            oTable.getBinding().getModel().setData( oTable.getBinding().getModel().getData());
            oTable.getModel().refresh(true);
		}

Export PDF:

In SAP UI5 Gantt Printing control enables you to export your Gantt chart as a PDF document.

Controller Part :

	onExportPDF: function() {
                       var that = this;
			var oGantt = that.getView().byId("sGanttchart");
			var oGanttPrinting = new GanttPrinting({
				ganttChart: oGantt
			});
			oGanttPrinting.open();
		},

and now the output is –

Thank you for reading.

I Hope this will be helpful. Please let me know if you have questions or comments or let me know about things that I have missed out.

@Spandana vaddi.

Happy weekend!