...
In this tutorial, we will follow the guideline for developing a plugin to develop our Hyperlink Options Filter plugin. Please also refer to the very first tutorial วิธีการพัฒนา Bean Shell Hash Variable for more details steps.
1. What is the problem?
We want to have a filter similar to the following.
...
We will develop a ปลั๊กอินประเภทตัวกรองข้อมูล (Datalist Filter Type Plugin) to render our Hyperlink Options Filter.
3. What is the input needed for your plugin?
To develop a Hyperlink Options Filter plugin, we will need to provide some inputs as following.
- The options to populate as links
- Whether or not to show the data count of each options.
4. What is the output and expected outcome of your plugin?
A list of hyperlinks which will list all the options with its data count. When click the hyperlink will filter the datalist.
5. Are there any resources/API that can be reused?
Refer to ปลั๊กอินประเภทตัวกรองข้อมูล (Datalist Filter Type Plugin).
6. Prepare your development environment
We need to always have our Joget Workflow Source Code ready and builded by following this guideline.
...
Open the maven project with your favourite IDE. I will be using NetBeans.
7. Just code it!
a. Extending the abstract class of a plugin type
Create a "HyperlinkOptionsFilter" class under "org.joget" package. Then, extend the class with org.joget.apps.datalist.model.DataListFilterTypeDefault abstract class. Please refer to ปลั๊กอินประเภทตัวกรองข้อมูล (Datalist Filter Type Plugin).
b. Implement all the abstract methods
As usual, we have to implement all the abstract methods. We will using AppPluginUtil.getMessage method to support i18n and using constant variable MESSAGE_PATH for message resource bundle directory.
...
| Code Block | ||
|---|---|---|
| ||
<div id="${name!}_container" style="display:none;margin:5px 0;">
<input id="${name!}" name="${name!}" type="hidden" value="${value!?html}" />
<#if element.properties.showLabel! == "true" >
<label><strong>${label!?html} :</strong></label>
</#if>
<#list options?keys as key>
<a ref="${key?html}" href="${key?html}" class="<#if value! == key >active</#if>"><span><#if value! == key ><strong></#if>${options[key]!?html}<#if value! == key ></strong></#if></span></a>
</#list>
<script type="text/javascript">
$(document).ready(function(){
<#if element.properties.displayFull! == "true" >
$('#${name!}_container').insertBefore($('#${name!}_container').closest(".filters"));
</#if>
$('#${name!}_container').show();
$('#${name!}_container a').click(function(){
var value = $(this).attr("ref");
$(this).parent().find("input").val(value);
$(this).closest("form").submit();
return false;
});
});
</script>
</div> |
c. Manage the dependency libraries of your plugin
We need to include "commons-collections" library in our POM file.
| Code Block |
|---|
<!-- Change plugin specific dependencies here -->
<dependency>
<groupId>commons-collections</groupId>
<artifactId>commons-collections</artifactId>
<version>3.2.1</version>
</dependency>
<!-- End change plugin specific dependencies here --> |
d. Make your plugin internationalization (i18n) ready
We are using i18n message key in getLabel and getDescription method. We will use i18n message key in our properties options definition as well. Then, we will need to create a message resource bundle properties file for our plugin.
...
| Code Block |
|---|
org.joget.HyperlinkOptionsFilter.pluginLabel=Hyperlink Options org.joget.HyperlinkOptionsFilter.pluginDesc=Show options as Hyperlink to perform filter. HyperlinkOptionsFilter.all=All HyperlinkOptionsFilter.config=Configure Hyperlink Options Filter HyperlinkOptionsFilter.options=Options HyperlinkOptionsFilter.value=Value HyperlinkOptionsFilter.label=Label HyperlinkOptionsFilter.chooseOptionsBinder=Choose Options Binder HyperlinkOptionsFilter.optionsBinder=Options Binder HyperlinkOptionsFilter.defaultValue=Default Value HyperlinkOptionsFilter.showCount=Show Data Count? HyperlinkOptionsFilter.displayFull=Display in full width (Above other filters) HyperlinkOptionsFilter.showLabel=Show label? |
e. Register your plugin to the Felix Framework
Next, we will have to register our plugin class in the Activator class (Auto generated in the same class package) to tell the Felix Framework that this is a plugin.
| Code Block | ||
|---|---|---|
| ||
public void start(BundleContext context) {
registrationList = new ArrayList<ServiceRegistration>();
//Register plugin here
registrationList.add(context.registerService(HyperlinkOptionsFilter.class.getName(), new HyperlinkOptionsFilter(), null));
} |
f. Build it and test
Let's build our plugin. Once the building process is done, we will find a "hyperlink_options_filter-5.0.0.jar" file created under "hyperlink_options_filter/target" directory.
...
Check and test the filter in datalist.
8. Take a step further, share it or sell it
You can download the source code from hyperlink_options_filter_src.zip.
...