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">
<config:TimeHorizon endTime="20201129000000" startTime="20201029000000"/>
<config:TimeHorizon endTime="20201129000000" startTime="20201029000000"/>
<table:TreeTable enableColumnReordering="true" minAutoRowCount="12"
rows="{ path: '/Projects', parameters: { arrayNames: ['Activities'], numberOfExpandedLevels: 1 } }" 
<table:Column label="{i18n>ProjectName}" template="text"/>
<GanttRowSettings rowId="{id}">
<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'}"/>

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.


	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");


and now the output is –




showDisplayTypeButton :


To show or hide display type menu on the toolbar


Here is the code for refrence.

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



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().setData( oTable.getBinding().getModel().getData());


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


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!

Tags: SAPUI5
jooman neshat


Author Since: April 23, 2021

0 0 votes
Article Rating
Notify of
Inline Feedbacks
View all comments
Would love your thoughts, please comment.x