joget workflow v5 training slides - module 17 - building plugins

Joget Workflow v5

Building Plugins

http://facebook.com/jogetworkflowhttp://twitter.com/jogetworkflow

Last Revised on May 2016Joget Inc Internal Use Only

Prerequisites

1. Basic web application development knowledge.2. Java web application programming knowledge.3. Understanding on Joget Workflow plugin architecture

and plugin types.

Joget Inc Internal Use Only

Content

1. Introduction2. Creating a Process Tool Plugin3. Creating a Userview Theme Plugin4. Creating a Form Field Element Plugin

Chapter 1

Introduction

• In this module, we will be learning on how to create:-– Process Tool / Post Form Submission Processing plugin– Userview plugin– Form Field Element plugin

Plugin Types

Each plugin is different

• Before you embark on your journey to build a new plugin, be sure to:-– Each plugin may be implemented and configured (very)

differently.– Check out existing implementation of the kind of plugin.– Extend the necessary classes for each implementation.

Plugin Abstract Classes and Interface

• Deadline Plugins extends org.joget.workflow.model.DefaultDeadlinePlugin

• Process Participant Plugins extends org.joget.workflow.model.DefaultParticipantPlugin

• Process Tool / Post Form Submission Processing Pluginsextends org.joget.plugin.base.DefaultApplicationPlugin

• Form Field Element Pluginsextends org.joget.apps.form.model.Elementimplements org.joget.apps.form.model.FormBuilderPaletteElement

• Form Load Binder Plugins extends org.joget.apps.form.model.FormBinderimplements org.joget.apps.form.model.FormLoadBinder, org.joget.apps.form.model.FormLoadElementBinder

• Form Options Binder Plugins extends org.joget.apps.form.model.FormBinderimplements org.joget.apps.form.model.FormLoadOptionsBinder

• Form Store Binder Plugins extends org.joget.apps.form.model.FormBinderimplements org.joget.apps.form.model.FormStoreBinder, org.joget.apps.form.model.FormStoreElementBinder

• Form Validator Plugins extends org.joget.apps.form.model.FormValidator

• Datalist Action Plugins extends org.joget.apps.datalist.model.DataListActionDefault

• Datalist Binder Pluginsextends org.joget.apps.datalist.model.DataListBinderDefault

• Datalist Column Formatter Pluginsextends org.joget.apps.datalist.model.DataListColumnFormatDefault

• Userview Menu Pluginsextends org.joget.apps.userview.model.UserviewMenu

• Userview Permission Plugins extends org.joget.apps.userview.model.UserviewPermission

• Userview Theme Plugins extends org.joget.apps.userview.model.UserviewTheme

• Audit Trail Pluginsextends org.joget.plugin.base.DefaultAuditTrailPlugin

• Hash Variable Pluginsextends org.joget.apps.app.model.DefaultHashVariablePlugin

• Directory Manager Pluginsextends org.joget.plugin.base.ExtDefaultPluginimplements org.joget.directory.model.service.DirectoryManagerPlugin, org.joget.plugin.property.model.PropertyEditable

Introduction to Property Options

• Each plugin uses the Property Options template scheme to provide an interface for end user to configure the eventual plugin.

• Reference: http://dev.joget.org/community/display/KBv5/Plugin+Properties+Options

Property Options

• JSON format[ { title : 'Page Title', properties : [ { name : 'Property Name', label : 'Property Label', description : 'Property Description', //optional, default is NULL type : 'Property Type', value : 'Property Value', //optional, default is null required : 'Mandatory or Not', //optional, 'true' or 'false', default is 'false' //… more attributes … }, //… more fields … ], validators : [ //optional //… properties custom validators … ], buttons : [ //optional //… custom properties page buttons … ] }, //… more properties page …]

Property Options Types

• From V4– Check Box– CheckBox– Element Select Box – ElementSelect– Grid – Grid– Hidden Field– Hidden– HTML Editor– HtmlEditor– Multi Select Box– MultiSelect– Password Field – Password– Radio Button – Radio– Readonly Text Field– Readonly– Select Box– SelectBox– Text Area – TextArea– Text Field – TextField

Property Options Types

• New in V5– Code Editor – CodeEditor– Combine Grid – GridCombine– Fixed Row Grid – GridFixedRow– Header – Header– Label – Label

Common Attributes for All Property Options Type except Hidden Field and Grid

{ name : ‘Property Name’, label : ‘Property Label’, description : ‘Property Description’, //optional, default is NULL type : ‘readonly’, value : ‘Property Value’, //optional , default is empty string required : ‘true’, //optional, boolean value, default is false }

Extra Attributes for Text Field, Password Field, Text Area and HTML Editor

{ size : ‘50’, //optional , integer value, default is NULL, only for text field and password field maxlength : ‘50’, //optional, integer value, default is NULL, only for text field and password field rows : ‘50’, //optional, integer value, default is NULL, only for text area and html editor cols : ‘50’, //optional, integer value, default is NULL , only for text area and html editor regex_validation : ‘^[a-zA-Z0-9_]+$’, //optional, default is NULL validation_message : ‘Error!!’ //optional, default is NULL}

Extra Attributes for Checkbox, Radio Button, Select Box and Multi Select Box

{ size : ‘10’, //optional, integer value, default is 4, only for multi select box options : [ //is optional to use this attribute or options_ajax {value: ‘value1’, label : ‘Value 1’}, {value: ‘value2’, label : ‘Value 2’}, {value: ‘value3’, label : ‘Value 3’} ], options_ajax_on_change : ‘property1’, //optional, value of this property name will passed over to load options from ajax, only for select box and multi select box options_ajax : ‘URL to load options JSON’ //optional, URL return JSON Array of a set of Objects that have value & label attribute}

Attributes for Hidden Field

{ name : ‘Property Name’, type : ‘hidden’, value : ‘Property Value’}

Attributes for Grid{ name : ‘Property Name’, label : ‘Property Label’, description : ‘Property Description’, //optional, default is NULL type : ‘grid’, columns : [ // 2 type of column, with and without options attribute {key : ‘col1’, label : ‘Col 1’}, {key : ‘col2’, label : ‘Col 2’, options:[ {value :‘option1’, label : ‘Option 1’}, {value :‘option2’, label : ‘Option 2’} ] }, ] value : [ //optional, default is NULL {col1 : ‘abc’, col2 : ‘option1’}, {col1 : ‘def’, col2 : ‘option2’} ], required : ‘true’, //optional, boolean value, default is false}

Extra Attributes for Element Select Field

{ options_ajax_on_change : ‘property1’, //optional, value of this property name will passover to load options from ajax options_ajax : ‘[CONTEXT_PATH]/web/property/json/getElements?classname= org.joget.apps.form.model.FormLoadElementBinder’, //Load plugin list based on class name given url : ‘[CONTEXT_PATH]/web/property/json/getPropertyOptions’ //Load plugin properties}

Property Validator Types

• Currently only one validator type supported - AJAX

{ type : ‘AJAX’, url : ‘URL to validate properties page value’ , // All properties in the same page will send to this url to validate, URL return a JSON Object with status (success or fail) & message (JSONArray of String) attribute default_error_message : ‘Error in this page!!’ //optional, default is null}

Internationalization Support

• You may localise your plugin.

1. In the getPropertyOptions() method of your plugin, make reference to the message key properties fileExample:

2. Create the corresponding file (e.g. formDataUpdateTool.properties) in “src/main/resources/messages” folder.

Internationalization Support

return AppUtil.readPluginResource(getClass().getName(), "/properties/formDataUpdateTool.json", null, true, "/messages/formDataUpdateTool");

Common Plugin Utility Methods• Get a bean from application contextDirectoryManager dm = (DirectoryManager) AppUtil.getApplicationContext().getBean(“directoryManager”);

• Read a resource file as String from resources folderString resource = AppUtil.readPluginResource(getClass().getName(),

"/properties/plugin.json", new String[]{“value 1”, “value 2”}, true,

"message/pluginResouseBundle");

Bean Name

Argument used for String.format()

Remove new line char

Plugin Class NamePath to resource file in resources folderPath to message bundle

in resources folder, without .properties file extension

Common Plugin Utility Methods• Processing Hash Variable to a Stringcontent = AppUtil.processHashVariable(content, workflowAssignment,

StringUtil.TYPE_REGEX, replaceMap);

• Get a i18n message from message bundle

String message = AppPluginUtil.getMessage(“Label”, getClass().getName(),

"message/pluginResouseBundle")

Content to be process Workflow Assignment ObjectString escape type,TYPE_REGEX, TYPE_JSON or null A map contains Strings to be replace

Path to message bundle in resources folder, without .properties file extension

Message Key Plugin Class Name

Common Plugin Utility Methods• Get parameter name of Form ElementString param = FormUtil.getElementParameterName(this);

• Get value of Form ElementString value = FormUtil.getElementPropertyValue(this, formData);

Common Plugin Utility Methods

• More at http://dev.joget.org/community/pages/viewpage.action?pageId=19103970

Plugin Web Support

• implements org.joget.plugin.base.PluginWebSupport• Implement webService method• Example:

public void webService(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //get request parameter String param = request.getParameter("param");

//print json response JSONArray jsonArray = new JSONArray(); Map<String, String> option1 = new HashMap<String, String>(); option1.put("value", "value1"); option1.put("label", "Value 1"); jsonArray.put(option1);

Map<String, String> option2 = new HashMap<String, String>(); option2.put("value", "value2"); option2.put("label", "Value 2"); jsonArray.put(option2);

jsonArray.write(response.getWriter());}

Chapter 2

Creating a Process Tool Plugin

Building Your First Plugin

• No, we are not going to build a “Hello World”• Build a simple tool to update form data in a process• Scenario:

Simple Form Data Update Tool

1. Create a maven project.2. Open the maven project in NetBeans.3. Create a class and extend DefaultApplicationPlugin

abstract class.4. Implement all the standard plugin method.5. Register plugin class in Activator class.6. Decide the property options for the plugin.7. Implement execute method to update form data.

Creating a Maven Project for Your Plugin

• Using Joget Workflow subproject “wflow-plugin-archetype” to create a Maven project for your plugin.

• For Windows:1. Create a directory to contain your plugins. (E.g. “C:\joget-projects”)2. In Command Prompt, navigate to the newly created directory.3. Run “…\wflow-plugin-archetype\create-plugin.bat" org.joget.sample sample-plugin-pack

5.0-SNAPSHOT”4. Key in “5.0-SNAPSHOT” for version and “y” to confirm all the information

• For Linux:1. Create a directory at home directory to contain your plugins.

(E.g. “~\joget-projects”)2. In Command Terminal, go to the created directory.3. Run “…\wflow-plugin-archetype\create-plugin.bat" org.joget.sample sample-plugin-pack

5.0-SNAPSHOT4. Key in “5.0-SNAPSHOT” for version and “y” to confirm all the information

• Windows

C:\joget-projects>“C:\jw-community\branches\5.0-SNAPSHOT\wflow-plugin-archetype\create-plugin.bat" org.joget.sample sample-plugin-pack 5.0-SNAPSHOT[INFO] Scanning for projects...[INFO][INFO] Using the builder org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder with a thread count of 1[INFO][INFO] ------------------------------------------------------------------------[INFO] Building Maven Stub Project (No POM) 1[INFO] ------------------------------------------------------------------------[INFO][INFO] >>> maven-archetype-plugin:2.2:generate (default-cli) @ standalone-pom >>>[INFO][INFO] <<< maven-archetype-plugin:2.2:generate (default-cli) @ standalone-pom <<<[INFO][INFO] --- maven-archetype-plugin:2.2:generate (default-cli) @ standalone-pom ---[INFO] Generating project in Interactive mode[WARNING] Archetype not found in any catalog. Falling back to central repository (http://repo1.maven.org/maven2).[WARNING] Use -DarchetypeRepository=<your repository> if archetype's repository is elsewhere.Downloading: http://repo1.maven.org/maven2/org/joget/wflow-plugin-archetype/5.0-SNAPSHOT/maven-metadata.xmlDownloading: http://dev.joget.org/archiva/repository/snapshots2/org/joget/wflow-plugin-archetype/5.0-SNAPSHOT/maven-metadata.xml

• Windows

[INFO] Using property: groupId = org.joget.sample[INFO] Using property: artifactId = sample-plugin-packDefine value for property 'version': 1.0-SNAPSHOT: : 5.0-SNAPSHOT[INFO] Using property: package = org.joget.sampleConfirm properties configuration:groupId: org.joget.sampleartifactId: sample-plugin-packversion: 5.0-SNAPSHOTpackage: org.joget.sample Y: : Y[INFO] ----------------------------------------------------------------------------[INFO] Using following parameters for creating project from Old (1.x) Archetype: wflow-plugin-archetype:5.0-SNAPSHOT[INFO] ----------------------------------------------------------------------------[INFO] Parameter: groupId, Value: org.joget.sample[INFO] Parameter: packageName, Value: org.joget.sample[INFO] Parameter: package, Value: org.joget.sample[INFO] Parameter: artifactId, Value: sample-plugin-pack [INFO] Parameter: version, Value: 5.0-SNAPSHOT[INFO] project created from Old (1.x) Archetype in dir: C:\joget-projects\sample-plugin-pack[INFO] ------------------------------------------------------------------------[INFO] BUILD SUCCESS[INFO] ------------------------------------------------------------------------

What is Inside The Maven Project

• Open the newly created project in your IDE (i.e. Netbeans).

• pom.xml– POM stands for "Project Object Model“, an XML representation

of a Maven project– Used to manage your plugin dependencies jar

• Activator.java– Bundle Activator for OSGi framework– The activator class is the bundle's hook to the lifecycle layer for

management.– Used to register your plugin class in start method

Creating a Plugin Class

1. In your Maven project, create a plugin class call “SimpleFormDataUpdateTool”.

2. Extends org.joget.plugin.base.DefaultApplicationPlugin3. Import required class file4. Implement all abstract methods

Standard Plugin Methodspublic String getClassName() { return getClass().getName(); //plugin class name, MUST be the exact class name of the plugin}

public String getName() { return "Plugin Name"; //Unique indentifier of plugin, override plugin with same name, used to display in Manage Plugin}

public String getDescription() { return "Plugin Description"; //Used to display in Manage Plugin }

public String getVersion() { return “1.0.0"; //Plugin Version, used to display in Manage Plugin}

public String getLabel() { return "Plugin Label"; //Short Label, used to display in plugin select box}

public String getPropertyOptions() { return ""; //Plugin property options, in JSON format}

Update Plugin Information public String getName() { return “Simple Form Data Update Tool"; }

public String getVersion() { return “1.0.0"; }

public String getDescription() { return “Update form data in a Process."; }

public String getLabel() { return “Simple Form Data Update Tool"; }

public String getClassName() { return getClass().getName(); }

public String getPropertyOptions() { return ""; }

Register Your Plugin Class

1. Open Activator.java2. Add the code below to start method

//Register plugin hereregistrationList.add(context.registerService(SimpleFormDataUpdateTool.class.getName(), new SimpleFormDataUpdateTool(), null));

Decide Your Plugin Property Options

• What kind of information needed from user?– Which form to update? – Which record in the form data?– Which fields to modify?– What is the value need to set to the particular field?

Decide Your Plugin Property Options

• What kind of information needed from user?– Q: Which form to update?

A: a select box with all available form listed– Q: Which record in the form data?

A: Use process’s record id if not specify (in the grid)– Q: Which fields to modify?

A: A grid with all the field ids and it’s value to update– Q: What is the value need to set to the particular field?

A: Answer as above

Create Your Plugin Properties

1. In your Maven project, right and create new folder2. Key in “src/main/resources/properties” and press Finish3. Under “Other Sources” > “src/main/resources” > “properties”,

create a new Empty File named “simpleFormDataUpdateTool.json”4. Put the following code in your public String getPropertyOptions()

method

5. Construct your plugin properties in “simpleFormDataUpdateTool.json”.

return AppUtil.readPluginResource(getClass().getName(), "/properties/simpleFormDataUpdateTool.json", null, true, null);

formDataUpdateTool.json[{ title : 'Configure Simple Form Data Update Tool', properties : [{ name : 'formDefId', label : 'Form', type : 'SelectBox', options_ajax : '[CONTEXT_PATH]/web/json/console/app[APP_PATH]/forms/options', required : 'true' },{ name : 'fields', label : 'Update Fields', type : 'Grid', columns : [{ key : 'field', label : 'Field Id' }, { key : 'value', label : 'Value' }], required : 'true' }]}]

Implement Execute Method

1. Get FormDefId from properties2. Get record Id from process3. Check whether record Id is configured to different value

in properties grid 4. Load the original Form Data record5. Set the updated fields and it’s value to the loaded data6. Store the updated data

Implement Execute Method //Get FormDefId from properties String formDefId = (String) props.get("formDefId");

//Get record Id from process WorkflowAssignment wfAssignment = (WorkflowAssignment) props.get("workflowAssignment"); AppService appService = (AppService) AppUtil.getApplicationContext().getBean("appService"); String id = appService.getOriginProcessId(wfAssignment.getProcessId());

//Check whether record Id is configured to different value in properties grid Object[] fields = (Object[]) props.get("fields"); for (Object o : fields) { Map mapping = (HashMap) o; String fieldName = mapping.get("field").toString(); if (FormUtil.PROPERTY_ID.equals(fieldName)) { String fieldValue = mapping.get("value").toString(); id = fieldValue; break; } }

Implement Execute Method //Load the original Form Data record AppDefinition appDef = (AppDefinition) props.get("appDef"); FormRow row = new FormRow(); FormRowSet rowSet = appService.loadFormData(appDef.getAppId(), appDef.getVersion().toString(), formDefId, id); if (!rowSet.isEmpty()) { row = rowSet.get(0); } //Set the updated fields and it’s value to the loaded data for (Object o : fields) { Map mapping = (HashMap) o; String fieldName = mapping.get("field").toString(); String fieldValue = mapping.get("value").toString(); row.setProperty(fieldName, fieldValue); }

//Store the updated data rowSet.set(0, row); appService.storeFormData(appDef.getAppId(), appDef.getVersion().toString(), formDefId, rowSet, id); return null;

1. In your Maven project, right and create new folder2. Key in “src/main/resources/messages” and press Finish3. Under “Other Sources” > “src/main/resources” > “messages”,

create a new Properties File (eg “simpleFormDataUpdateTool”)4. Modify code in your public String getPropertyOptions() method

5. Modify label to key in your plugin properties file.6. Create keys and messages in your

simpleFormDataUpdateTool.properties file

i18n your Plugin Properties

return AppUtil.readPluginResource(getClass().getName(), "/properties/simpleFormDataUpdateTool.json", null, true, "/messages/simpleFormDataUpdateTool");

New simpleFormDataUpdateTool.json with message key

[{ title : '@@sfdut.config@@', properties : [{ name : 'formDefId', label : '@@sfdut.form@@', type : 'selectbox', options_ajax : '[CONTEXT_PATH]/web/json/console/app[APP_PATH]/forms/options', required : 'true' },{ name : 'fields', label : '@@sfdut.fields@@', type : 'grid', columns : [{ key : 'field', label : '@@sfdut.fieldId@@' }, { key : 'value', label : '@@sfdut.value@@' }], required : 'true' }]}]

simpleFormDataUpdateTool.properties

sfdut.config=Configure Simple Form Data Update Toolsfdut.form=Formsfdut.fields=Update Fieldssfdut.fieldId=Field Idsfdut.value=Value

Test and Run Your Plugin

Materials

• Completed project files can be obtained at 17-2-sample-plugin-pack.zip

Chapter Review

• Be able to prepare a new Maven project.• Be able to build a plugin and run it in Joget.

Chapter 3

Creating a Userview Theme Plugin

• Study the existing implementation of other existing Userview Themes.– Open “DefaultTheme.java”– Locate relevant files that made up of the plugin.

@Override public String getCss() { String css = AppUtil.readPluginResource(getClassName(), "/resources/themes/default/default.css"); css += getPropertyString("css"); css = css.replaceAll("@@contextPath@@", getRequestParameterString("contextPath")); return css; }

public String getPropertyOptions() { return AppUtil.readPluginResource(getClass().getName(), "/properties/userview/defaultTheme.json", null, true, "message/userview/defaultTheme"); }

Study the file structure

• For Windows:1. Create a directory to contain your plugins. (E.g. “C:\joget-projects”)2. In Command Prompt, navigate to the newly created directory.3. Run “…\wflow-plugin-archetype\create-plugin.bat" org.joget.sample theme-plugin-pack

5.0-SNAPSHOT”4. Key in “5.0-SNAPSHOT” for version and “y” to confirm all the information

(E.g. “~\joget-projects”)2. In Command Terminal, go to the created directory.3. Run “…\wflow-plugin-archetype\create-plugin.bat" org.joget.sample theme-plugin-pack

5.0-SNAPSHOT4. Key in “5.0-SNAPSHOT” for version and “y” to confirm all the information

• Windows

C:\joget-projects>C:\jw-community\trunk\wflow-plugin-archetype\create-plugin.bat org.joget.sample theme-pack 5.0-SNAPSHOT[INFO] Scanning for projects...[INFO][INFO] Using the builder org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder with a threadcount of 1[INFO][INFO] ------------------------------------------------------------------------[INFO] Building Maven Stub Project (No POM) 1[INFO] ------------------------------------------------------------------------[INFO][INFO] >>> maven-archetype-plugin:2.2:generate (default-cli) @ standalone-pom >>>[INFO][INFO] <<< maven-archetype-plugin:2.2:generate (default-cli) @ standalone-pom <<<[INFO][INFO] --- maven-archetype-plugin:2.2:generate (default-cli) @ standalone-pom ---[INFO] Generating project in Interactive mode[WARNING] Archetype not found in any catalog. Falling back to central repository (http://repo1.maven.org/maven2).[WARNING] Use -DarchetypeRepository=<your repository> if archetype's repository is elsewhere.Downloading: http://repo1.maven.org/maven2/org/joget/wflow-plugin-archetype/5.0-SNAPSHOT/maven-metadata.xmlDownloading: http://repo1.maven.org/org/joget/wflow-plugin-archetype/5.0-SNAPSHOT/maven-metadata.xml

• Windows

[INFO] Using property: groupId = org.joget.sample[INFO] Using property: artifactId = theme-packDefine value for property 'version': 1.0-SNAPSHOT: 5.0-SNAPSHOT[INFO] Using property: package = org.joget.sampleConfirm properties configuration:groupId: org.joget.sampleartifactId: theme-packversion: 5.0-SNAPSHOTpackage: org.joget.sample Y: : Y[INFO] ----------------------------------------------------------------------------[INFO] Using following parameters for creating project from Old (1.x) Archetype: wflow-plugin-archetype:5.0-SNAPSHOT[INFO] ----------------------------------------------------------------------------[INFO] Parameter: groupId, Value: org.joget.sample[INFO] Parameter: packageName, Value: org.joget.sample[INFO] Parameter: package, Value: org.joget.sample[INFO] Parameter: artifactId, Value: theme-pack [INFO] Parameter: version, Value: 5.0-SNAPSHOT[INFO] project created from Old (1.x) Archetype in dir: C:\joget-projects\theme-pack[INFO] ------------------------------------------------------------------------[INFO] BUILD SUCCESS

1. In your Maven project, create a plugin class call “EnhancedTheme”.

2. Extends UserviewTheme3. Import required class file4. Implement all abstract methods

//Register plugin hereregistrationList.add(context.registerService(EnhancedTheme.class.getName(), new EnhancedTheme(), null));

Implementing the methods

• You may copy the existing implementations of DefaultTheme.

• Replace where applicable.

public String getCss() { String css = AppUtil.readPluginResource(getClassName(), "/resources/themes/enhanced/enhanced.css");

public String getName() { return "Enhanced Theme";

public String getPropertyOptions() { return AppUtil.readPluginResource(getClass().getName(), "/properties/userview/enhancedTheme.json", null, true, "/messages/userview/enhancedTheme"); }

public String getLabel() { return "Enhanced Theme";

Creating the supporting files• resources/themes/enhanced/enhanced.css• resources/themes/enhanced/header.png• properties/userview/enhancedTheme.json• messages/userview/enhancedTheme.properties

Get Creative

• Get Creative! Create your theme accordingly by tweaking the CSS.

• You may also add in your own scripting if required.

Build and upload

• When you are ready, build the plugin and upload to your Joget and test out the theme in actual Userview.

• Repeat as many times as needed too until you achieve what you want.

Original Theme

New Theme

Materials

• You may obtain project source code of the sample new theme showcased in this chapter from the file 17-3-theme-pack.zip

Chapter Review

• Be able to create a Userview Theme plugin.

Chapter 4

Creating a Form Field Element Plugin

What are we going to build?

• We are going to build a Form Field Element that works very similarly like a Text Field but…– By incorporating the use of a jQuery plugin that automatically

formats currency and numbers as you type on form inputs.– Reference: http://www.decorplanit.com/plugin/

Creating a Form Field Element Plugin

• Study the existing implementation of other existing form field elements.– Open “TextField.java”, locate relevant files that made up of the plugin.

@Override public String getPropertyOptions() { ... return AppUtil.readPluginResource(getClass().getName(), "/properties/form/textField.json", new Object[]{encryption}, true, "message/form/TextField"); }

@Override public String getFormBuilderIcon() { return "/plugin/org.joget.apps.form.lib.TextField/images/textField_icon.gif"; }

@Override public String renderTemplate(FormData formData, Map dataModel) { String template = "textField.ftl";

• For Windows:1. Create a directory to contain your plugins. (E.g. “C:\joget-projects”)2. In Command Prompt, navigate to the newly created directory.3. Run “…\wflow-plugin-archetype\create-plugin.bat" org.joget.sample currency-pack 5.0-

SNAPSHOT”4. Key in “5.0-SNAPSHOT” for version and “y” to confirm all the information

(E.g. “~\joget-projects”)2. In Command Terminal, go to the created directory.3. Run “…\wflow-plugin-archetype\create-plugin.bat" org.joget.sample currency-pack 5.0-

SNAPSHOT4. Key in “5.0-SNAPSHOT” for version and “y” to confirm all the information

• Windows

C:\joget-projects>C:\jw-community\trunk\wflow-plugin-archetype\create-plugin.bat org.joget.sample currency-pack 5.0-SNAPSHOT[INFO] Scanning for projects...[INFO][INFO] Using the builder org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder with a threadcount of 1[INFO][INFO] ------------------------------------------------------------------------[INFO] Building Maven Stub Project (No POM) 1[INFO] ------------------------------------------------------------------------[INFO][INFO] >>> maven-archetype-plugin:2.2:generate (default-cli) @ standalone-pom >>>[INFO][INFO] <<< maven-archetype-plugin:2.2:generate (default-cli) @ standalone-pom <<<[INFO][INFO] --- maven-archetype-plugin:2.2:generate (default-cli) @ standalone-pom ---[INFO] Generating project in Interactive mode[WARNING] Archetype not found in any catalog. Falling back to central repository (http://repo1.maven.org/maven2).[WARNING] Use -DarchetypeRepository=<your repository> if archetype's repository is elsewhere.Downloading: http://repo1.maven.org/maven2/org/joget/wflow-plugin-archetype/5.0-SNAPSHOT/maven-metadata.xmlDownloading: http://repo1.maven.org/org/joget/wflow-plugin-archetype/5.0-SNAPSHOT/maven-metadata.xml

• Windows

[INFO] Using property: groupId = org.joget.sample[INFO] Using property: artifactId = currency-packDefine value for property 'version': 1.0-SNAPSHOT: 5.0-SNAPSHOT[INFO] Using property: package = org.joget.sampleConfirm properties configuration:groupId: org.joget.sampleartifactId: currency-packversion: 5.0-SNAPSHOTpackage: org.joget.sample Y: : Y[INFO] ----------------------------------------------------------------------------[INFO] Using following parameters for creating project from Old (1.x) Archetype: wflow-plugin-archetype:5.0-SNAPSHOT[INFO] ----------------------------------------------------------------------------[INFO] Parameter: groupId, Value: org.joget.sample[INFO] Parameter: packageName, Value: org.joget.sample[INFO] Parameter: package, Value: org.joget.sample[INFO] Parameter: artifactId, Value: currency-pack [INFO] Parameter: version, Value: 5.0-SNAPSHOT[INFO] project created from Old (1.x) Archetype in dir: C:\joget-projects\currency-pack[INFO] ------------------------------------------------------------------------[INFO] BUILD SUCCESS

1. In your Maven project, create a plugin class call “CurrencyField”.

2. Extends Element implements FormBuilderPaletteElement

3. Import required class file4. Implement all abstract methods

//Register plugin hereregistrationList.add(context.registerService(CurrencyField.class.getName(), new CurrencyField(), null));

Implementing the methods

• You may copy the existing implementations of TextField.• Replace where applicable.

Property Options

Creating the supporting files• resources/message/form/currencyField.properties• resources/properties/form/currencyField.json• resources/resources/images/currencyField_icon.gif• resources/resources/js/autoNumeric.js• resources/templates/currencyField.ftl

Build and upload

• When you are ready, build the plugin and upload to your Joget and test out the form element field in actual form view.

• Repeat as many times as needed too until you achieve what you want.

Materials

• You may obtain project source code of the sample new theme showcased in this chapter from the file 17-4-currency-pack.zip

Chapter Review

• Be able to create a Form Field Element plugin.

Module Review

1. Introduction2. Creating a Process Tool Plugin3. Creating a Userview Theme Plugin4. Creating a Form Field Element Plugin

Recommended Further Learning

• Study on how other plugin types are implemented.– Check out the Joget Marketplace at http://

marketplace.joget.org/ – Check out the Joget Knowledge Base – Developer Guide http

://dev.joget.org/community/display/KBv5/Extending+Functionality+-+Developing+Plugins

Stay Connected with Joget Workflow

• http://www.joget.org • http://community.joget.org • http://twitter.com/jogetworkflow • http://facebook.com/jogetworkflow • http://youtube.com/jogetworkflow • http://slideshare.net/joget

joget workflow v5 training slides - module 17 - building plugins

Software

tutorial kaleng joget final

joget workflow v5 training slides - module 18 - integrating...

joget workflow v4 training - module 1 - introduction to...

joget workflow v5 training slides - module 13 - improving...

joget workflow getting started v1.0

joget gamelan.ppt

joget workflow v5 training slides - module 14 -...

joget workflow v5 training slides - module 5 - designing...

joget workflow v5 training slides - module 20 - basic system...

joget workflow v5 training slides - module16 - preparing...

joget workflow v2 developer reference

joget workflow v5 training slides - module 10 - participant...

integrating drupal with joget workflow v2

joget workflow v5 training slides - module 8 - designing...

nusantara interaction the case of joget as a trans

joget workflow v2 getting started

easy joget v3 for absolute beginner

joget workflow v4 training - module 14 - introduction to...

joget workflow v5 training slides - module 19 - doing more...

how to help translating joget workflow into other languages?