Post on 19-Jul-2015
All Rights Reserved © Joget Inc
Joget Workflow v4
Designing your first Form (Process)
http://facebook.com/jogetworkflowhttp://twitter.com/jogetworkflow
Last Revised on March 2015Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Prerequisites
• Appreciates the use of a form
• Understanding on ER diagram is highly recommended
• Created a Workflow Process
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Content
1. Introduction to Form Builder
2. Designing your first forms
3. Controlling Process by using Form
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Form Builder
• Used as a mean to collect information/interact with the end user.
• Drag and drop, and configure based form builder.
• Little/No programming knowledge needed to operate.
• Extensible functionalities through Joget’s plugin architecture.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Form Builder
• Form elements. • Each element is a plugin• Extensible through Joget’s
plugin architecture• Drag-and-drop
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Plugin Types
Joget Workflow
Form
Builder
Datalist
Builder
Workflow
Engine
Userview
Builder
- APP -
Form Builder
• Form Element
• Form Permission
• Form Load Binder
• Form Options Binder
• Form Store Binder
• Form Validator
Workflow Engine
• Deadline
• Process Participant
• Process Tool
Datalist Builder• Datalist Action• Datalist Binder• Datalist Column
Formatter• Datalist Filter Type
Userview Builder
• Userview Menu
• Userview Permission
• Userview Theme
App Level
• Audit Trail
• Hash Variable
System Level
• Directory Manager
Open Dynamics Internal Use Only
All Rights Reserved © Joget Inc
Form Builder
Advanced method for developer to edit the form design by changing its JSON definition
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Where and How Form is used?
• By itself
– Each form record is distinctive by itself.
– Made accessible through the use of Userview.
• Part of a Process Flow
– Each form record relates to a process instance.
– Made accessible through the process activity’s assignment view in the Inbox.• Inbox is made accessible via the web console or Userview.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Viewing a Form
• In general, this is how a Form is loaded.
Joget Inc Internal Use Only
Fetch Form Data
Format Form Data
View Form
All Rights Reserved © Joget Inc
Submitting a Form
• In general, this is how a Form is handled when submitted.
Joget Inc Internal Use Only
Submit Form
Validate Form Elements
Store Form Data
Error
All Rights Reserved © Joget Inc
Good to know
• It is impossible to run/view a Form without using Jogetrunning as the server.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Chapter 1 Review
• General understanding on how Form and Form Builder works.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Association with the Process flow
• Designing the first form for the first activity in the flow.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Map Activities to Form
• Go to App Designer’s Process view.
• Click on “Add/Edit Form” on “Submit Leave” activity.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Add/Edit Form
• Click on “Create New Form”
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Create a New Form, for “Submit Leave Application” Activity
a-z, A-Z, 0-9, _Numbered form name according to
process flow
Table name with prefix
Assign a prefix for every application
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Edit The First Date Picker
a-z, A-Z, 0-9, _
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Complete the design of “Submit Leave Form”
Date PickerID: end_dateLabel: End Date
Text AreaID: reasonLabel: Reason
Text FieldID: nameLabel: Name
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Complete The Design of “Leave Application Form”
Preview and Save
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
How the Form looks like when you launch “Run Process” now?
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Exercise
• Fill in the form, leave some of the fields empty to test out the validations.
• Submit the form.
• Fill up all the fields and complete the assignment.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Exercise
• Do you know that you can still modify the form even after (your app has been published and) users started using them?
• Add a new Select Box called “Category” with the following options:-
– Normal
– Emergency
– Maternal
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Chapter Review
• Associating activity with form
• Creating Form and understanding the basic elements and validations.
• Accessing assignment with a Form associated.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Chapter 3
Controlling Workflow Process by using Form
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Association with the Process flow
• Designing the second form for the second activity in the flow.
• Form controls the next course of action in the process flow.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Create a New Form, for “Approve Leave” Activity
• Click on “Add/Edit Form” on “Approve Leave” activity.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Using Sub Form
Approve Leave Form
Using “Leave Application Form” as Sub Form
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
What About The Approval Status?
“Approved” or “Rejected”?
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Map The Selected Value to Workflow Variable
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Exercise
Design Form for “Leave Approved”
• Create a new Form named “3-Leave Approved Form”
• Map the form it to “Leave Approved” activity.
• Point it back to the same table used before.
• In the form design, add a “Subform” and refer it to the “2-Approve Leave Form”
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Complete the Process Cycle
• Go to “Inbox”.
• Open “Leave Approved” assignment. Verify the form created.
• Complete the assignment.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Chapter Review
• Learn about Subform
• Control flow of process using Workflow Variable mapping via the Form Field.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Module Review
We have learnt to:
1. Create Form and assign it to Workflow Activity with basic Form Elements.
2. Understand the Subform concept.
3. Map Form Field to Workflow Variable for routing purpose.
4. Verify Workflow Process with the Form attached.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Recommended Further Learning
• Creating a Datalist based on the Forms designed.
Joget Inc Internal Use Only