Joget Workflow v4 Training - Module 5 - Designing your First Form

All Rights Reserved © Joget Inc
Joget Workflow v4
Designing your first Form (Process)
http://facebook.com/jogetworkflow
http://twitter.com/jogetworkflow
Last Revised on March 2015Joget Inc Internal Use Only

Prerequisites
• Appreciates the use of a form
• Understanding on ER diagram is highly recommended
• Created a Workflow Process
Joget Inc Internal Use Only

Content
1. Introduction to Form Builder
2. Designing your first forms
3. Controlling Process by using Form

Chapter 1
Introduction to Form Builder

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.

Form Builder
• Form elements.
• Each element is a plugin
• Extensible through Joget’s
plugin architecture
• Drag-and-drop

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

Form Builder
Advanced method for
developer to edit the
form design by changing
its JSON definition

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.

Viewing a Form
• In general, this is how a Form is loaded.
Fetch Form Data
Format Form Data
View Form

Submitting a Form
• In general, this is how a Form is handled when submitted.
Submit Form
Validate Form Elements
Store Form Data
Error

Good to know
• It is impossible to run/view a Form without using Joget
running as the server.

Chapter 1 Review
• General understanding on how Form and Form Builder
works.

Chapter 2
Designing your first forms

Association with the Process flow
• Designing the first form for the first activity in the flow.

Map Activities to Form
• Go to App Designer’s Process view.
• Click on “Add/Edit Form” on “Submit Leave” activity.

Add/Edit Form
• Click on “Create New Form”

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

Edit Section
Leave Application Details

Insert Date Picker

Edit The First Date Picker
a-z, A-Z, 0-9, _

Set The Date Picker as Mandatory Field

Complete the design of
“Submit Leave Form”
Date Picker
ID: end_date
Label: End Date
Text Area
ID: reason
Label: Reason
Text Field
ID: name
Label: Name

Complete The Design of “Leave
Application Form”
Preview and Save

How the Form looks like when
you launch “Run Process” now?

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.

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

Chapter Review
• Associating activity with form
• Creating Form and understanding the basic elements and
validations.
• Accessing assignment with a Form associated.

Chapter 3
Controlling Workflow Process
by using Form

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.

Create a New Form, for “Approve Leave”
Activity
• Click on “Add/Edit Form” on “Approve Leave” activity.

Using Sub Form
Approve Leave Form
Using “Leave Application Form” as
Sub Form

Using Sub Form

Using “Apply Leave Form” as
Sub Form

What About The Approval Status?
“Approved” or “Rejected”?

Insert Radio Button

Radio Button Options

Map The Selected Value to Workflow
Variable

Leave Approval Form

Continue with the Assignment

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”

Leave Approved Form

Complete the Process Cycle
• Go to “Inbox”.
• Open “Leave Approved” assignment. Verify the form
created.
• Complete the assignment.

Chapter Review
• Learn about Subform
• Control flow of process using Workflow Variable mapping
via the Form Field.

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.

Recommended Further Learning
• Creating a Datalist based on the Forms designed.

Stay Connected with Joget Workflow
• www.joget.org
• community.joget.org
• twitter.com/jogetworkflow
• facebook.com/jogetworkflow
• youtube.com/jogetworkflow
• slideshare.net/joget

Joget Workflow v4 Training - Module 5 - Designing your First Form

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Joget Workflow v4 Training - Module 5 - Designing your First Form

Ähnlich wie Joget Workflow v4 Training - Module 5 - Designing your First Form (17)

Mehr von Joget Workflow

Mehr von Joget Workflow (16)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Joget Workflow v4 Training - Module 5 - Designing your First Form