...
By referring to the library demo, we can quickly come out a static HTML page like the picture below. As this is a Joget plugin tutorial, we will not go into the detail on coding the static HTML page. You can refer to static.zip. We will expect our userview page can display our collected data as the static HTML page.
5. Is there any resources/API that can be reuse?
...
In the properties definition options file, we will need to provide options as below. Please note that we can use "@@message.key@@" syntax to support i18n in our properties options.
| 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 : '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 : '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'
}]
}] |
After done the properties option to collect input, we can work on the main method of the plugin which is getRenderPage method. Normally, what I will do before go into detail to populate the data to the view, I will first put the static content for the getRenderPage to build and test the plugin first. It everything is fine, then only we try to add data to the view.
...