...
After verify the static HTML is working in our plugin, we can further enhanced it by adding data to the view. Now, modify your getRenderPage method and ganttChart.ftl template as below.
| Code Block | ||
|---|---|---|
| ||
|
| Code Block |
|---|
<link href="${request.contextPath}/plugin/org.joget.tutorial.GanttChartMenu/lib/jquery.gantt/css/style.css" rel="stylesheet" type="text/css" />
<script src="${request.contextPath}/plugin/org.joget.tutorial.GanttChartMenu/lib/jquery.gantt/js/jquery.fn.gantt.min.js"></script>
<div class="gantt_chart_menu_body">
<#if element.properties.title?? ><h3>${element.properties.title!}</h3></#if>
${element.properties.customHeader!}
<div class="gantt"></div>
<script>
$(function() {
"use strict";
$(".gantt").gantt({
source: ${data!},
months: [@@userview.ganttChart.months.label@@],
dow: [@@userview.ganttChart.dow.label@@]
itemsPerPage: ${element.properties.itemsPerPage!},
navigate: "${element.properties.navigate!}",
scale: "${element.properties.scale!}",
maxScale: "${element.properties.maxScale!}",
minScale: "${element.properties.minScale!}",
waitText: "@@userview.ganttChart.waitText@@".
onItemClick: function (data) {
${element.properties.onItemClick!}
},
onAddClick: function(datetime, rowId) {
${element.properties.onAddClick!}
},
onRender: function() {
${element.properties.onRender!}
},
useCookie: <#if element.properties.useCookie! == 'true'>true<#else>false</#if>,
scrollToToday: <#if element.properties.scrollToToday! == 'true'>true<#else>false</#if>
});
});
</script>
${element.properties.customFooter!}
</div> |
c. Manage the dependency libraries of your plugin
...