Gantt Chart in SAP UI5

[former_member633105]

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!