Skip to Content

SAPUI5 - GANTT-Chart - Use OData-Service (XML) to visualize shapes

Hello experts,

can anybody help me using the SAPUI5 GANTT-Chart with Table?

https://sapui5.hana.ondemand.com/explored.html#/entity/sap.gantt.GanttChartContainer/samples

The example uses a json file to fill the tree table on the left side. With such a json it is easy to get the shapes on the right gantt-chart visualized.

But in our case we want to use an OData-Service with data from the ERP.

Extraction:

I've build the OData-Service to fill the tree table similiarly to this example: https://blogs.sap.com/2015/10/23/treetable-odata-binding/ --> I've used the annotaion-option to get the hierarchy.

This works to build the tree table hierarchy. But my problem is now, how to visualize the different shapes on every hierarchy-step in the gantt chart.

Code:

[...]
var oGanttChartContainer = this.getView().byId("GanttChartContainer"); 
var oGanttChartWithTable = oGanttChartContainer.getGanttCharts()[0]; 
var sPath =  var sServiceUrl = http://##URL##/ZGANTT_ODATA"; 
var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl, { useBatch : true }); 
[...]
GanttChartWithTable.bindRows({
   path : '/Auftraege1Set', 
   parameters : {    
      expand : "ChildNotes",    
      numberOfExpandedLevels : 2,    
      navigation : {
          'Auftraege1Set' : 'ChildNotes'
      }
}});
[...]

Has anybody experience with this?

How am i able to "connect" the shape correctly to visualize them in the GANTT-Chart?

I did not find an example like this here, maybe anybody could help me to get this done?

Thank you.

Regards

Björn

Add comment
10|10000 characters needed characters exceeded

  • Hello,

    the hierachy works for me.

    But can anybody help me to get the shapes visualized?

    We have this Structure in XML:

    The Entity Element has an association to himself to load the Tree - this works.

    Element

    - SubElements

    - [0] - Detail SubElement...

    - Orders

    - [0] - StartTime, EndTime,...

    - [1] - StartTime, EndTime,...

    But now: How am i able to visualize the shapes out of ther "Orders"-Array which is an association from Element to Order?

    Can anybody help me how to solve this with the Row-Binding?

    Thank you!!!

  • Get RSS Feed

5 Answers

  • avatar image
    Former Member
    Dec 12, 2016 at 02:21 PM

    If you download the code from same example, you will find the below lines, where the Gantt chart table is set property to get the shapes.

    oGanttChartWithTable.setShapeDataNames(["top", "order", "relationship"]);

    oGanttChartWithTable.setShapes(this._configShape());

    Downloaded example works perfectly for me.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Mar 23, 2017 at 08:33 AM

    Hello Björn,

    did you find any solution for your problem? I do have a similar...

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 03, 2018 at 03:25 PM

    Hello,

    did someone already figuered out how to use the gantt chart in combination with odata binding? Or is the only way to use it a json model in between of gantt chart and odata?

    Many thanks.

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 18, 2018 at 02:36 PM

    Hi Steffen,

    please provide code snipped of the data binding and shape definition.

    - Stephan

    Add comment
    10|10000 characters needed characters exceeded

  • Feb 19 at 12:27 PM

    Hi,

    did somebody find a solution how to bind an oData model to Gantt Chart? I had done the following - the table hierachie works fine but the shapes appear curious:

    First I build an oData Service with an entity "TimingAnno". To build the hierachie I have used annoation like in this example https://blogs.sap.com/2015/10/23/treetable-odata-binding/. If I call the service in the browser the structure looks like this:

    In the onInit function I created a GanttChartWithTable and bind the oData model on it.

    var oGantt = new sap.gantt.GanttChartContainer({ ganttCharts: [ new sap.gantt.GanttChartWithTable({
       columns: [ new sap.ui.table.Column({ label: "Id", template: "Aufgabenid" }), 
    	      new sap.ui.table.Column({ label: "Bezeichnung", template: "Aufgabenbez" }),
    	      new sap.ui.table.Column({ label: "Start", template: new sap.m.DatePicker({ value: {path: "Berstartstring"})}), 
    	      new sap.ui.table.Column({ label: "Ende", template: new sap.m.DatePicker({ value: {path: "Berendestring"})})
        ]})
    ]});
    			
    var oGanttTable = oGantt.getGanttCharts()[0],
        sServiceUrl = "/sap/opu/odata/sap/Z_PPM_Projekt_SRV/",
        oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);
    
    oGantt.setModel(oModel);
    oGanttTable.bindRows({
        path : "/TimingAnnoSet"
    });
    
    oGanttTable.setShapeDataNames(["top"]);
    oGanttTable.setShapes(this.configShape());
    oGantt.placeAt("content");
    

    In the configShape function I did the following but I am not sure what to write at "shapeDataName". If I write nothing in it I get shapes but the appearance is curious.

    configShape: function () {
       var aShapes = [];
       
       Rectangle.extend("sap.gantt.ppm.Rectangle", {
          getFill: function(oRawData) {
             switch (oRawData.level) {
                case "1": return "#FAC364";
                default: return "#5CBAE5";
              }
          }
        });
              
       var oTopShape = new sap.gantt.config.Shape({
    	key: "top",
    	shapeDataName: "",
    	shapeClassName: "sap.gantt.ppm.Rectangle",
    	level: 5,
    	shapeProperties: {
    		time: "{Berstartstring}",
    		endTime: "{Berendestring}",
    		height: 20,
    		isDuration: true,
    		enableDnD: true
    	}
       });
    			
       aShapes = [oTopShape];
       return aShapes;
    }
    

    And here is the result:

    The Tree Table is correct but the shapes in the gantt do not fit to the start and enddate in the related row of the tree table. Can someone help? Which value do I have to write at shapeDataName?

    Best regards

    Katrin

    Add comment
    10|10000 characters needed characters exceeded