Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
...
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.
We want to have a filter similar to the following.
...
We will develop a ปลั๊กอินประเภทตัวกรองข้อมูล (Datalist Filter Type Plugin) to render our Hyperlink Options Filter.
To develop a Hyperlink Options Filter plugin, we will need to provide some inputs as following.
A list of hyperlinks which will list all the options with its data count. When click the hyperlink will filter the datalist.
Refer to ปลั๊กอินประเภทตัวกรองข้อมูล (Datalist Filter Type Plugin).
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.
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).
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> |
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 --> |
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? |
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)); } |
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.
You can download the source code from hyperlink_options_filter_src.zip.
...