Skip to Content

“sap.gantt” is the new library introduced recently to create a Gantt Chart control in SAP UI5. This control is basically used to represent our data in graphical form and we can further perform other operations on it.

In this document , in Part I , we will see how to get started with the Gantt control. We will be creating a Gantt Chart with Table control.

In Part II ,  we will further create another chart and see how we can implement drag and drop functionality across the 2 charts.

Here is a screenshot of how the output will look like for Part I.

         G1.PNG

Here is a screenshot of how the output will look like for Part II.

       G6.PNG

Now let’s start with the coding part.

Part I :

First of all we need to include the library “sap.gantt”.

VIEW.XML :

In the view we first create a GanttChartContainer and add GanttChartWithTable as it’s aggregation. The table used in this control is a “sap.ui.table.Table” which is inbuilt. So inside the columns aggregation of GanttChartWithTable, we refer to “sap.ui.table” library controls like ‘Column’ and ‘template’. Here is a screenshot of the xml view code.

         G2.PNG

Note : I observed that it’s better to mention the height of GanttChartContainer, otherwise sometimes the output behaves differently.

CONTROLLER.JS :

Inside the controller we will now refer to our Gantt chart and create data and shapes for it. Here we do this in the onInit function.

Note that the data structure used for the chart is of the format :

               var oData1 = {

                                     “root”: {

                                                    “id”: “root”,

                                                    “level”: “root”,

                                                    “children”: []

                                               }

                                };

Inside the children array you can add the main data. Here is the sample data we used to create our chart :

                        G3.PNG

Now we assign this data to a json model and set it our control. The method used to add rows is “bindRows”. We also set shapeDataNames and set the shapes to our chart. Here we will be creating rectangle shape.

          G4.PNG

Note : The parameter of setShapeDataNames should be an array. If you miss this, then no output will be seen.

For creating shapes, sap.gantt has provided “sap.gantt.shape” class. You can explore it further. Here is the code for configShape function which sets the shapes to our gantt control :

           G5.PNG

The key and the shapeDataName is kept as “order”. This is what used while creating out data in the variable “oData1”.

time and endTime specify the shape’s start and end points.

enableDnD property enables the shape to be draggable and droppable.

So this is how you can create a basic Gantt chart. You can also refer to the snippix link:

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/#43447

Part II :

Once the first chart is created we will move further towards drag and drop functionality. We will create 2 charts for this. And we will make use of the event “shapeDragEnd”. This event is triggered when the shape drag ends.

VIEW.XML

In the previous view, we will simply add a new GanttChartWithTable control. in the code we will add the events as follows :

               <GanttChartWithTable id=”GanttChartWithTable1″ shapeDragEnd=”shapeDragEnd1″>

               <GanttChartWithTable id=”GanttChartWithTable2″ shapeDragEnd=”shapeDragEnd2″>

Here, shapeDragEnd1 event is triggered when the shape is dropped on 1st chart while shapeDragEnd2 event is triggered when the shape is dropped on 2nd chart.

CONTROLLER.JS :

Inside the controller we will now write the code to implement these 2 functions in addition to the previous code.

Also, don’t forget to create data and shape for the second chart.

First we’ll understand the code of shapeDragEnd1 function :

         G7.PNG

First of all when we drag the shape from 2nd to 1st chart, this ‘shapeDragEnd1‘ event gets triggered. So we will read the source and target of the event. An if condition if added to rule out the condition if the user drags and drops into the same chart. After this we need to add the dragged order data into the model of first chart and remove the same from the model of the second chart.

     var data = this.oGanttChartWithTable2.getSelectedShapes().order[0].objectInfoRef.data;

This variable ‘data’ holds the data of the selected shape.

While removing we use the variable flag to know the position of the selected data in the model.

Similarly the code of shapeDragEnd2 function :

     G8.PNG

So this is how we can implement drag and drop in between 2 Gantt charts. You can also refer to the snippix link:

http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/#27984

in this example , you can drag a single order from any chart to the other one.

Note : This snippix is implemented for drag and drop of a single order only. As a further research, you can try implementing it for multiple orders.

Hint : getSelectedShapes() function returns all the selected shapes.

Thanks for reading , hope it helped.

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Mahdi Jaberzadeh Ansari

    Dear Bhoomika Jain,

    I want to use the Gantt chart of SAPUI5. I found an example of Gantt Chart in the following link:

    https://sapui5.hana.ondemand.com/explored.html#/sample/sap.gantt.sample.BasicGanttChart/preview

    While the example works fine in their official website, I downloaded it and run inside of the WebIDE. But it throws the following error and its features like magnifier does not work.

    Uncaught (in promise) Error: "-Infinity%" is of type string, expected sap.ui.core.CSSSize for property "selectionPanelSize" of Element sap.gantt.GanttChartWithTable#__xmlview0--ganttView(…)
    

    As I understood this problem is not related to the controller. And even when I just load the XML view this error appears.

    Thanks in advance

    (0) 
    1. Bhoomika Jain Post author

      Hi Gregory,

      Currently we don’t drag-and-drop functionality for relationships provided by the standard control. However, you may try using ‘sap.ui.thirdparty.jqueryui’ libraries to explicitly set a draggable option for any control.

       

      (1) 
  2. Gyan Panigrahi

    Dear Bhoomika Jain,

    Thank you for this blog. I have tried this one but unable to see my charts. Table data are visible but charts are not. written the same code for configShape. Do i need to change some thing. i didn’t get any error.

    And i was wondering how can we make charts to appear in same row for single set. For example

    I have 2 types of job and time duration or start date end date for work in specific month so that I see charts for JAN ,Feb, and march duration against particular job in single row:

    JOB       JAN    FEB   MARCH

    A

    B

    could you please give your inputs on this.

    Thank you

    (0) 
    1. Bhoomika Jain Post author

      Hi Gyan,

      If you are trying to run the snippix link specified in part I : http://veui5infra.dhcp.wdf.sap.corp:8080/snippix/#43447 , it displays the tree table data but not the shapes in the chart. The reason being, gantt chart by default considers a time axis for displaying the data on chart if you don’t do it explicitly. This default time axis is from 1 year before today’s date to 1 year after today’s date. So in order to solve this, you need to change the start and end time for order array object to 2017.

      To make charts to appear in same row for single set:

      In the data for the chart, “order” is an array of objects and the data inside order is set to the chart. Currently we have only 1 object in each order array. To make multiple shapes appear in the same row, you just need to add more objects to this order array. Refer to the screenshot attached.

      (0) 
  3. Ashutosh Jha

    Hello Bhoomika Jain,

    I am unable to open the snippix link. Seems it is only accessible to people from SAP.

    Will it be possible for you to provide the snippix or the code snippet here itself. That way it will help us in enabling the Calendar defaults.

    Any other info to realize this functionality will also be of great help.

    Many Thanks,
    Ashutosh

     

     

    (0) 

Leave a Reply