Page History

There following questions and steps are to help you plan and develop a plugin to fulfill a custom requirement.

Table of Contents

1.

...

ปัญหาคืออะไร?

You have a custom requirement and you found that none of the built-in plugins provided by Joget Workflow nor plugins available in Marketplace are able to fulfill your requirement.

Example ตัวอย่างที่ 1: Download a PDF version of a form when click on a button in a list.

Example ตัวอย่างที่ 2: Provide a Gantt Chart view of your collected form data.

Example ตัวอย่างที่ 3: Hash variable is convenient in used, but it does not provide the ability to do condition checking.

2.

...

วิธีการแก้ไขปัญหา?

Refer to the Plugin Types that supported by Joget Workflow, find the most appropriate plugin type that can help you to fulfill the custom requirement.

Example ตัวอย่างที่ 1: Develop a Datalist Action plugin to display a button for generate form PDF.

Example ตัวอย่างที่ 2: Develop an Userview Menu plugin that can use to display form data as Gantt Chart.

Example ตัวอย่างที่ 3: Develop a Hash Variable plugin that can do Bean Shell scripting.

...

Find out what are the information needed by your plugin to function/work. Look at it from the user's perspective; how are you going to use the plugin. Then, look at it from a developer's perspective; to make the plugin reusable in more use cases.

You can refer to Plugin Properties Options ตัวเลือกคุณสมบัติปลั๊กอิน on what type of input field you can provide to your plugin user.

Example ตัวอย่างที่ 1: To develop a PDF Download Datalist Action plugin, we can consider providing the following as input.

1. Form ID : The form that will be used to generate the PDF file.
2. Record ID : Use the id of the datalist row or a column value to load the record.
3. File Name : File name of the the generated PDF file.
4. Formatting options : Options to format and customise the PDF output.

Example 2ตัวอย่างที่ 2: To develop an Gantt Chat Userview Menu plugin, we can consider providing the following as input.

1. Datalist Binder : We can reuse datalist binder in our plugin to retrieve the data needed by the Gantt Chart.
2. Mapping : A field to map the columns that will be returned from the datalist binder to the data needed by the Gantt Chart.
3. Styling : Options to style the Gantt Chart.

Example 3ตัวอย่างที่ 3: Hash Variable plugin does not provide interface for user to configure, but to develop a Bean Shell Hash Variable plugin, we need somewhere to put our Bean Shell script. We can reuse the Environment Variable to store our scripts. So the Hash Variable syntax will be a prefix with environment variable key.

...

How and what a normal user (Not the admin user who use the plugin to provide functionality) will use and see your plugin result.

Example 1ตัวอย่างที่ 1: When PDF Download Datalist Action is used as a datalist row action or column action, a normal user will see a link to download the PDF file in every rows of a datalist. Once the link is clicked, a PDF will be prompted to be downloaded.

When the plugin is used as a whole datalist action, a zip file containing all the generated PDF of every selected rows will be prompted to be downloaded.

Example 2ตัวอย่างที่ 2: A normal user can see a Gantt Chart when a menu using the Gantt Chart Userview Menu plugin is clicked. User may navigate or interact with the Gantt Chart.

Example 3ตัวอย่างที่ 3: The Bean Shell Hash Variable plugin is for the admin user. Once it is used, the Hash Variable will be replaced by the output return from the Bean Shell interpreter.

...

You may need to check out the document of Utility & Service Methods, JSON API, Javascript API and Bean Shell Programming Guide as well. These documents may contains some methods/examples that may help you in the development.

Example 1ตัวอย่างที่ 1: To develop the PDF Download Datalist Action plugin, we can reuse the methods in FormPdfUtil to generate a form as PDF. We can also refer to the source code of the Datalist Form Data Delete Action plugin as well. Other than that, we can refer to the Export Form Email Tool on what kind of plugin properties options we can provide in the plugin as the Export Form Email Tool are using the methods in FormPdfUtil as well.

Example 2ตัวอย่างที่ 2: To develop a Gantt Chart Userview Menu plugin, we can refer to the source code of all the Userview Menu plugin. From there, we can have a better understanding on how to make a template for a plugin using FreeMaker syntax.

Example 3ตัวอย่างที่ 3: To develop Bean Shell Hash Variable plugin, we can refer to the source code of all the Hash Variable plugin and Bean Shell plugin. Especially, we can refer to Environment Variable Hash Variable plugin on how to retrieve environment variable using a variable key. We can also refer to Bean Shell Tool or Bean Shell Form Binder plugin on what to execute the script with Bean Shell interpreter.

...

Create a property file with the plugin class name in "[Plugin project directory]/src/main/resources/message" directory.

Example: For a plugin named "GanttChartMenu", we need to create a "GanttChartMenu.properties" file under "[Plugin project directory]/src/main/resources/message" directory.

Sample content for GanttChartMenu.properties file

Code Block

language	java

org.joget.sample.GanttChartMenu.pluginLabel=Gantt Chart
org.joget.sample.GanttChartMenu.pluginDesc=To display form data in Gantt Chart layout
userview.ganttChart.label.title=Title
userview.ganttChart.label.week=Week

Use getMessage(String key, String pluginName, String translationPath) of PluginManager or AppPluginUtil to retrieve i18n label.

Example: Use the getMessage method in getLabel and getDescription methods to return i18n label and description.

Code Block

language	java

public String getLabel() {
    return AppPluginUtil.getMessage("org.joget.sample.GanttChartMenu.pluginLabel", getClassName(), "message/GanttChartMenu");
}
public String getDescription() {
    return AppPluginUtil.getMessage("org.joget.sample.GanttChartMenu.pluginDesc", getClassName(), "message/GanttChartMenu");
}

Pass a translation file path to readPluginResource(String pluginName, String resourceUrl, Object[] arguments, boolean removeNewLines, String translationFileName) method of AppUtil to provide the plugin properties option with i18n label. We can use "@@message.key@@" in the JSON of Plugin Properties Options ตัวเลือกคุณสมบัติปลั๊กอิน.

Example: For property options of a GanttChartMenu plugin, the following shows the sample code implementation of getPropertyOptions method and the GanttChartMenu.json file

Code Block

language	java

public String getPropertyOptions() {
    return AppUtil.readPluginResource(getClassName(), "/properties/GanttChartMenu.json", null, true, "message/GanttChartMenu");
}

Code Block

language	js

[{
    title : '@@userview.ganttChart.edit@@',
    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',
        value : '@@userview.ganttChart.label.value@@'
    }]
}]

Pass a translation file path to getPluginFreeMarkerTemplate(Map data, final String pluginName, final String templatePath, String translationPath) method of PluginManager whenever retrieving a HTML template. Once we passed a translation file path, we can use "@@message.key@@" in the freemarker template to retrieve i18n label.

Example: For getRenderPage method of a GanttChartMenu plugin, the following show the sample code implementation of getRenderPage method and the "GanttChartMenu.ftl" FreeMarker template.

Code Block

language	java

    public String getRenderPage() {
        Map model = new HashMap();
        model.put("request", getRequestParameters());
        model.put("element", this);
        
        PluginManager pluginManager = (PluginManager)AppUtil.getApplicationContext().getBean("pluginManager");
        String content = pluginManager.getPluginFreeMarkerTemplate(model, getClasstName(), "/templates/GanttChartMenu.ftl", "message/GanttChartMenu");
        return content;
    }

Code Block

language	xml

<div>
    <h1>@@userview.ganttChart.label.title@@ : ${element.properties.title!}</h1>
</div>

Postfix the plugin class name with an underscore and language code to create a message resource bundle property file for other language.

...

Page tree

Versions Compared

Old Version 2

New Version 3

Key

1.

ปัญหาคืออะไร?

2.

วิธีการแก้ไขปัญหา?