SAPUI5 GanttChartWithTable - Uncaught TypeError: Cannot read property 'length' of undefined

[sidak54]

Hi, I am trying to add Gantt Chart to my application and getting this error.

d3.js:18 Uncaught TypeError: Cannot read property 'length' of undefined

Here's my code:

View:

<gantt:GanttChartWithTable id="gantt" shapeSelectionMode="Multiple" disableShapeDoubleClickEvent="true">
    <gantt:axisTimeStrategy>
        <axistime:FullScreenStrategy>
            <axistime:totalHorizon>
                <config:TimeHorizon
                        startTime="{leadTimeViewData>startTime}"
                        endTime="{leadTimeViewData>endTime}"/>
            </axistime:totalHorizon>
            <axistime:visibleHorizon>
                <config:TimeHorizon
                        startTime="{leadTimeViewData>startTime}"
                        endTime="{leadTimeViewData>endTime}"/>
            </axistime:visibleHorizon>
        </axistime:FullScreenStrategy>
    </gantt:axisTimeStrategy>
    <gantt:table>
        <table:TreeTable
                selectionMode="Single"
                visibleRowCountMode="Auto"
                selectionBehavior="RowSelector"
                enableColumnReordering="true"
                rows="{ path: 'leadTimeViewData>/', parameters: { arrayNames: ['stages'], numberOfExpandedLevels: 1 } }">
            <table:columns>
                <table:Column label="Stage">
                    <table:template>
                        <m:Text text="{leadTimeViewData>name}"/>
                    </table:template>
                </table:Column>
            </table:columns>
            <table:rowSettingsTemplate>
                <gantt:GanttRowSettings>
                    <gantt:shapes1>
                        <shapes:Task time="{path: 'leadTimeViewData>startTime', formatter: '.formatter.formatterTimeStamp'}"
                                endTime="{path: 'leadTimeViewData>endTime', formatter: '.formatter.formatterTimeStamp'}"/>
                    </gantt:shapes1>
                </gantt:GanttRowSettings>
            </table:rowSettingsTemplate>
        </table:TreeTable>
    </gantt:table>
</gantt:GanttChartWithTable>

Model:

{
    endTime: "20210218132010",
    stages: [{
            duration: 9763,
            endTime: "20210218131956",
            fill: "green",
            id: 1,
            name: "Declarative: Checkout SCM",
            startTime: "20210218131947"
        },{
            duration: 13906,
            endTime: "20210218132010",
            fill: "green",
            id: 2,
            name: "Prepare Pipeline",
            startTime: "20210218131957"
    }],
    startTime: "20210218131947"
}

Formatter Function:

formatterTimeStamp: function(timestamp) {
    return Format.abapTimestampToDate(timestamp)
}

I tried debugging by placing a debugger at the start of my formatter function and logging the formatted timestamp but couldn't figure out why this error occurs. Not sure if this is helpful or not

Thanks

[former_member450774]

Hi,

You can use the below code for reference.

Declare xmlns:shp="sap.gantt.simple.shapes"

under GanttRowSettings, change the code to below format.

<GanttRowSettings> <shapes1> <BaseConditionalShape> <shapes> <shp:Task endTime="{endTime', formatter: '.sTimeConverter'}" time="{path: 'startTime', formatter: '.sTimeConverter'}"/> </shapes> </BaseConditionalShape> </shapes1> </GanttRowSettings>

Hope it helped you!

Rajesh

[sidak54]

Still get the same error.

[former_member450774]

Hi,

You can refer to the below blog for creating Gantt Chart.

https://blogs.sap.com/2020/07/29/simple-sapui5-application-to-display-gantt-chart/

Rajesh.