Gantt Chart Drag and Drop feature

Hello Colleagues,

The sample examples on Gantt Chart provided by SAP showcase how to implement drag and drop of shapes along the horizontal axis, however it may be a challenge for some citizen developers to extend this feature to enable users to drag the shapes anywhere in the chart and not just horizontally.

This is a quick blog which will show you how to implement the same in a gantt chart with tree table.

Download the sample code provided on Basic Gantt ChartOpen the BasicGanttChart.view.xml file and update the event handler name as shown below.

Now implement the event handler in your controller code. The complete controller code is attached as a .txt file.

onShapeDrag: (oEvent) => {
const oChartData = oController
.getView()
.byId(“GanttChartContainer”)
.getModel(“test”)
.getData();

const sourcePath = oController
.getView()
.byId(“ganttView”)
.getSelectedShapes()[“order”][0][“objectInfoRef”][“contextObj”][
“sPath”
];

const targetPath =
oEvent.getParameters()[“targetData”][“objectInfo”][“contextObj”][
“sPath”
];

const oSourceShapeData = oController
.getView()
.byId(“ganttView”)
.getSelectedShapes()[“order”][“0”][“shapeData”];

const oTargetShapeData =
oEvent.getParameters()[“targetData”][“shapeTimestamp”];

oController._travelTreeAndDelete(
oChartData,
sourcePath,
oSourceShapeData
);
oController._travelTreeAndUpdate(
oChartData,
targetPath,
oTargetShapeData
);

oController
.getView()
.byId(“GanttChartContainer”)
.getModel(“test”)
.setData(oChartData);
},
_travelTreeAndDelete: (oData, sPath, oShapeData) => {
const oArr = sPath.split(“/”);
for (let idx = 1; idx < oArr.length; idx++) {
oData = oData[`${oArr[idx]}`];
}

for (let [idx, item] of oData[“order”].entries()) {
if (
item[“startTime”] === oShapeData[“startTime”] &&
item[“endTime”] === oShapeData[“endTime”]
) {
oController._deletedLevel = item[“level”];
oData[“order”].splice(idx, 1);
}
}
},
_travelTreeAndUpdate: (oData, sPath, oShapeData) => {
const oArr = sPath.split(“/”);
for (let idx = 1; idx < oArr.length; idx++) {
oData = oData[`${oArr[idx]}`];
}

Now run your application. You will be able to drag and drop shapes anywhere in the chart and not restricted to the horizontal axis only.

Thank you for visiting this blog. If you have any requests on enhancing this further, feel free to drop a comment below.

Hello Colleagues,The sample examples on Gantt Chart provided by SAP showcase how to implement drag and drop of shapes along the horizontal axis, however it may be a challenge for some citizen developers to extend this feature to enable users to drag the shapes anywhere in the chart and not just horizontally.This is a quick blog which will show you how to implement the same in a gantt chart with tree table.Download the sample code provided on Basic Gantt ChartOpen the BasicGanttChart.view.xml file and update the event handler name as shown below.Now implement the event handler in your controller code. The complete controller code is attached as a .txt file. onShapeDrag: (oEvent) => {
const oChartData = oController
.getView()
.byId(“GanttChartContainer”)
.getModel(“test”)
.getData();

const sourcePath = oController
.getView()
.byId(“ganttView”)
.getSelectedShapes()[“order”][0][“objectInfoRef”][“contextObj”][
“sPath”
];

const targetPath =
oEvent.getParameters()[“targetData”][“objectInfo”][“contextObj”][
“sPath”
];

const oSourceShapeData = oController
.getView()
.byId(“ganttView”)
.getSelectedShapes()[“order”][“0”][“shapeData”];

const oTargetShapeData =
oEvent.getParameters()[“targetData”][“shapeTimestamp”];

oController._travelTreeAndDelete(
oChartData,
sourcePath,
oSourceShapeData
);
oController._travelTreeAndUpdate(
oChartData,
targetPath,
oTargetShapeData
);

oData[“order”].push({
startTime: sap.gantt.misc.Format.dateToAbapTimestamp(
new Date(oShapeData[“startTime”])
),
endTime: sap.gantt.misc.Format.dateToAbapTimestamp(
new Date(oShapeData[“endTime”])
),
level: oController._deletedLevel,
});
}, Now run your application. You will be able to drag and drop shapes anywhere in the chart and not restricted to the horizontal axis only.Thank you for visiting this blog. If you have any requests on enhancing this further, feel free to drop a comment below. Read More Technology Blogs by Members articles

#SAP

#SAPTechnologyblog