...
In this tutorial, we will following the guideline of developing a plugin to develop our Gantt Chart Userview Menu plugin. Please also refer to the very first tutorial How to develop a Bean Shell Hash Variable for more details steps.
...
The following of this tutorial is prepared with a Macbook Pro and Joget Source Code version 5.0.0. Please refer to Guideline of for developing a plugin for other platform command.
...
We should get "BUILD SUCCESS" message shown in our terminal and a "gantt_cahrtchart_menu" folder created in "plugins" folder.
Open the maven project with your favour favourite IDE. I will be using NetBeans.
...
Then, we have to do a UI for admin user to provide inputs for our plugin. In getPropertyOptions method, we already specify have already specifed our Plugin Properties Options definition file is locate at "/properties/ganttChartMenu.json". Let us create a directory "resources/properties" under "gantt_chart_menu/src/main" directory. After create the directory, create a file named "ganttChartMenu.json" in the "properties" folder.
...
| Code Block | ||
|---|---|---|
| ||
[{
title : '@@userview.ganttchart.config@@',
properties : [{
name : 'id',
label : 'Id',
type : 'hidden'
},
{
name : 'customId',
label : '@@userview.ganttchart.customId@@',
type : 'textfield',
regex_validation : '^[a-zA-Z0-9_]+$',
validation_message : '@@userview.ganttchart.invalidId@@'
},
{
name : 'label',
label : '@@userview.ganttchart.label@@',
type : 'textfield',
required : 'True'
},
{
name : 'title',
label : '@@userview.ganttchart.title@@',
type : 'textfield'
},
{
name : 'binder',
label : '@@userview.ganttchart.binder@@',
type : 'elementselect',
required : 'True',
options_ajax : '[CONTEXT_PATH]/web/property/json/getElements?classname=org.joget.apps.datalist.model.DataListBinderDefault',
url : '[CONTEXT_PATH]/web/property/json[APP_PATH]/getPropertyOptions'
},
{
label : '@@userview.ganttchart.mapping@@',
type : 'header'
},
{
name : 'category',
label : '@@userview.ganttchart.mapping.category@@',
type : 'textfield',
required : 'True'
},
{
name : 'task',
label : '@@userview.ganttchart.mapping.task@@',
type : 'textfield',
required : 'True'
},
{
name : 'activity',
label : '@@userview.ganttchart.mapping.activity@@',
type : 'textfield',
required : 'True'
},
{
name : 'fromDate',
label : '@@userview.ganttchart.mapping.fromDate@@',
type : 'textfield',
required : 'True'
},
{
name : 'toDate',
label : '@@userview.ganttchart.mapping.toDate@@',
type : 'textfield',
required : 'True'
},
{
name : 'dateFormat',
label : '@@userview.ganttchart.mapping.dateFormat@@',
type : 'textfield',
required : 'True',
value : 'yyyy-MM-dd'
},
{
name : 'taskId',
label : '@@userview.ganttchart.mapping.taskId@@',
type : 'textfield'
},
{
name : 'cssClass',
label : '@@userview.ganttchart.mapping.cssClass@@',
type : 'textfield'
}]
},
{
title : '@@userview.ganttchart.advanced@@',
properties : [
{
name : 'itemsPerPage',
label : '@@userview.ganttchart.itemsPerPage@@',
type : 'textfield',
required : 'True',
value : '20'
},
{
name : 'navigate',
label : '@@userview.ganttchart.navigate@@',
type : 'selectbox',
required : 'True',
value : 'scroll',
options : [{
value : 'buttons',
label : '@@userview.ganttchart.navigate.buttons@@'
},
{
value : 'scroll',
label : '@@userview.ganttchart.navigate.scroll@@'
}]
},
{
name : 'scale',
label : '@@userview.ganttchart.scale@@',
type : 'selectbox',
required : 'True',
value : 'days',
options : [{
value : 'hours',
label : '@@userview.ganttchart.scale.hours@@'
},
{
value : 'days',
label : '@@userview.ganttchart.scale.days@@'
},
{
value : 'weeks',
label : '@@userview.ganttchart.scale.weeks@@'
},
{
value : 'months',
label : '@@userview.ganttchart.scale.months@@'
}]
},
{
name : 'maxScale',
label : '@@userview.ganttchart.maxScale@@',
type : 'selectbox',
required : 'True',
value : 'months',
options : [{
value : 'hours',
label : '@@userview.ganttchart.scale.hours@@'
},
{
value : 'days',
label : '@@userview.ganttchart.scale.days@@'
},
{
value : 'weeks',
label : '@@userview.ganttchart.scale.weeks@@'
},
{
value : 'months',
label : '@@userview.ganttchart.scale.months@@'
}]
},
{
name : 'minScale',
label : '@@userview.ganttchart.minScale@@',
type : 'selectbox',
required : 'True',
value : 'monthshours',
options : [{
value : 'hours',
label : '@@userview.ganttchart.scale.hours@@'
},
{
value : 'days',
label : '@@userview.ganttchart.scale.days@@'
},
{
value : 'weeks',
label : '@@userview.ganttchart.scale.weeks@@'
},
{
value : 'months',
label : '@@userview.ganttchart.scale.months@@'
}]
},
{
name : 'useCookie',
label : '@@userview.ganttchart.useCookie@@',
type : 'checkbox',
options : [{
value : 'true',
label : ''
}]
},
{
name : 'scrollToToday',
label : '@@userview.ganttchart.scrollToToday@@',
type : 'checkbox',
options : [{
value : 'true',
label : ''
}]
},
{
name : 'onItemClick',
label : '@@userview.ganttchart.onItemClick@@',
type : 'codeeditor',
mode : 'javascript',
value : '//console.log(data); //data obj hold all the columns value of a row'
},
{
name : 'onAddClick',
label : '@@userview.ganttchart.onAddClick@@',
type : 'codeeditor',
mode : 'javascript',
value : '//console.log(datetime); //the DateTime in ms for the clicked Cell\n//console.log(rowId); //the row ID of clicked Cell'
},
{
name : 'onRender',
label : '@@userview.ganttchart.onRender@@',
type : 'codeeditor',
mode : 'javascript',
value : '//console.log("chart rendered");'
},
{
name : 'customHeader',
label : '@@userview.ganttchart.customHeader@@',
type : 'codeeditor',
mode : 'html'
},
{
name : 'customFooter',
label : '@@userview.ganttchart.customFooter@@',
type : 'codeeditor',
mode : 'html'
}]
}] |
...
c. Manage the dependency libraries of your plugin
Our plugin is using javax.servlet.http.HttpServletRequest and javax.servlet.http.HttpServletResponse class, so we will need to add jsp-api library using some libraries, we have to add all of them to our POM file.
| Code Block | ||
|---|---|---|
| ||
<!-- Change plugin specific dependencies here -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
</dependency>
<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20080701</version>
</dependency>
<dependency>
<groupId>displaytag</groupId>
<artifactId>displaytag</artifactId>
<version>1.2</version>
<exclusions>
<exclusion>
<artifactId>slf4j-api</artifactId>
<groupId>org.slf4j</groupId>
</exclusion>
<exclusion>
<artifactId>jcl104-over-slf4j</artifactId>
<groupId>org.slf4j</groupId>
</exclusion>
<exclusion>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-log4j12</artifactId>
</exclusion>
</exclusions>
</dependency>
<!-- End change plugin specific dependencies here --> |
...