joget workflow v5 training slides - module 17 - building plugins

92
All Rights Reserved © Joget Inc Joget Workflow v5 Building Plugins http://facebook.com/jogetworkflow http://twitter.com/jogetworkflow Last Revised on May 2016 Joget Inc Internal Use Only

Upload: joget-workflow

Post on 14-Apr-2017

208 views

Category:

Software


6 download

TRANSCRIPT

Page 1: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Joget Workflow v5

Building Plugins

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

Last Revised on May 2016Joget Inc Internal Use Only

Page 2: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Page 3: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Content

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

Joget Inc Internal Use Only

Page 4: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Chapter 1

Introduction

Joget Inc Internal Use Only

Page 5: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 6: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Plugin Types

Joget Inc Internal Use Only

Page 7: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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.

Joget Inc Internal Use Only

Page 8: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 9: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Plugin Abstract Classes and Interface

• 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

Joget Inc Internal Use Only

Page 10: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Plugin Abstract Classes and Interface

• 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

Joget Inc Internal Use Only

Page 11: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Plugin Abstract Classes and Interface

• 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

Joget Inc Internal Use Only

Page 12: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 13: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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 …]

Joget Inc Internal Use Only

Page 14: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 15: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Property Options Types

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

Joget Inc Internal Use Only

Page 16: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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 }

Joget Inc Internal Use Only

Page 17: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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}

Joget Inc Internal Use Only

Page 18: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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}

Joget Inc Internal Use Only

Page 19: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Attributes for Hidden Field

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

Joget Inc Internal Use Only

Page 20: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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}

Joget Inc Internal Use Only

Page 21: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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}

Joget Inc Internal Use Only

Page 22: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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}

Joget Inc Internal Use Only

Page 23: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Internationalization Support

• You may localise your plugin.

Joget Inc Internal Use Only

Page 24: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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");

Joget Inc Internal Use Only

Page 25: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 26: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 27: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

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

Joget Inc Internal Use Only

Page 28: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Common Plugin Utility Methods

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

Joget Inc Internal Use Only

Page 29: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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());}

Joget Inc Internal Use Only

Page 30: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Chapter 2

Creating a Process Tool Plugin

Joget Inc Internal Use Only

Page 31: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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:

Joget Inc Internal Use Only

Page 32: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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.

Joget Inc Internal Use Only

Page 33: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 34: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Creating a Maven Project for Your Plugin

• Windows

Joget Inc Internal Use Only

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

Page 35: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Creating a Maven Project for Your Plugin

• Windows

Joget Inc Internal Use Only

[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] ------------------------------------------------------------------------

Page 36: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

What is Inside The Maven Project

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

Joget Inc Internal Use Only

Page 37: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

What is Inside The Maven Project

• 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

Joget Inc Internal Use Only

Page 38: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 39: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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}

Joget Inc Internal Use Only

Page 40: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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 ""; }

Joget Inc Internal Use Only

Page 41: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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));

Joget Inc Internal Use Only

Page 42: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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?

Joget Inc Internal Use Only

Page 43: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 44: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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);

Joget Inc Internal Use Only

Page 45: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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' }]}]

Joget Inc Internal Use Only

Page 46: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 47: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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; } }

Joget Inc Internal Use Only

Page 48: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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;

Joget Inc Internal Use Only

Page 49: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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");

Joget Inc Internal Use Only

Page 50: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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' }]}]

Joget Inc Internal Use Only

Page 51: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

simpleFormDataUpdateTool.properties

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

Joget Inc Internal Use Only

Page 52: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Test and Run Your Plugin

Joget Inc Internal Use Only

Page 53: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Materials

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

Joget Inc Internal Use Only

Page 54: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Chapter Review

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

Joget Inc Internal Use Only

Page 55: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Chapter 3

Creating a Userview Theme Plugin

Joget Inc Internal Use Only

Page 56: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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.

Joget Inc Internal Use Only

@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"); }

Page 57: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Study the file structure

Joget Inc Internal Use Only

Page 58: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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 theme-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 theme-plugin-pack

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

Joget Inc Internal Use Only

Page 59: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Creating a Maven Project for Your Plugin

• Windows

Joget Inc Internal Use Only

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

Page 60: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Creating a Maven Project for Your Plugin

• Windows

Joget Inc Internal Use Only

[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

Page 61: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

What is Inside The Maven Project

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

Joget Inc Internal Use Only

Page 62: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

What is Inside The Maven Project

• 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

Joget Inc Internal Use Only

Page 63: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Creating a Plugin Class

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

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

Joget Inc Internal Use Only

Page 64: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Register Your Plugin Class

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

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

Joget Inc Internal Use Only

Page 65: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Implementing the methods

• You may copy the existing implementations of DefaultTheme.

• Replace where applicable.

Joget Inc Internal Use Only

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";

Page 66: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 67: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Get Creative

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

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

Joget Inc Internal Use Only

Page 68: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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.

Joget Inc Internal Use Only

Page 69: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Original Theme

Joget Inc Internal Use Only

Page 70: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

New Theme

Joget Inc Internal Use Only

Page 71: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Materials

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

Joget Inc Internal Use Only

Page 72: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Chapter Review

• Be able to create a Userview Theme plugin.

Joget Inc Internal Use Only

Page 73: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Chapter 4

Creating a Form Field Element Plugin

Joget Inc Internal Use Only

Page 74: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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/

Joget Inc Internal Use Only

Page 75: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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.

Joget Inc Internal Use Only

@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";

Page 76: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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 currency-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 currency-pack 5.0-

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

Joget Inc Internal Use Only

Page 77: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Creating a Maven Project for Your Plugin

• Windows

Joget Inc Internal Use Only

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

Page 78: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Creating a Maven Project for Your Plugin

• Windows

Joget Inc Internal Use Only

[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

Page 79: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

What is Inside The Maven Project

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

Joget Inc Internal Use Only

Page 80: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

What is Inside The Maven Project

• 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

Joget Inc Internal Use Only

Page 81: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Creating a Plugin Class

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

Joget Inc Internal Use Only

Page 82: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Register Your Plugin Class

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

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

Joget Inc Internal Use Only

Page 83: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Implementing the methods

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

Joget Inc Internal Use Only

Page 84: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Property Options

Joget Inc Internal Use Only

Page 85: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Property Options

Joget Inc Internal Use Only

Page 86: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 87: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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.

Joget Inc Internal Use Only

Page 88: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Materials

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

Joget Inc Internal Use Only

Page 89: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Chapter Review

• Be able to create a Form Field Element plugin.

Joget Inc Internal Use Only

Page 90: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

Module Review

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

Joget Inc Internal Use Only

Page 91: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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

Joget Inc Internal Use Only

Page 92: Joget Workflow v5 Training Slides - Module 17 - Building Plugins

All Rights Reserved © Joget Inc

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 Inc Internal Use Only