Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
All Rights Reserved © Joget Inc
Joget Workflow v4
Designing your first Form (Process)
http://facebook.com/jogetworkflow
ht...
All Rights Reserved © Joget Inc
Prerequisites
• Appreciates the use of a form
• Understanding on ER diagram is highly reco...
All Rights Reserved © Joget Inc
Content
1. Introduction to Form Builder
2. Designing your first forms
3. Controlling Proce...
All Rights Reserved © Joget Inc
Chapter 1
Introduction to Form Builder
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
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 an...
All Rights Reserved © Joget Inc
Form Builder
• Form elements.
• Each element is a plugin
• Extensible through Joget’s
plug...
All Rights Reserved © Joget Inc
Plugin Types
Joget Workflow
Form
Builder
Datalist
Builder
Workflow
Engine
Userview
Builder...
All Rights Reserved © Joget Inc
Form Builder
Advanced method for
developer to edit the
form design by changing
its JSON de...
All Rights Reserved © Joget Inc
Where and How Form is used?
• By itself
– Each form record is distinctive by itself.
– Mad...
All Rights Reserved © Joget Inc
Viewing a Form
• In general, this is how a Form is loaded.
Joget Inc Internal Use Only
Fet...
All Rights Reserved © Joget Inc
Submitting a Form
• In general, this is how a Form is handled when submitted.
Joget Inc In...
All Rights Reserved © Joget Inc
Good to know
• It is impossible to run/view a Form without using Joget
running as the serv...
All Rights Reserved © Joget Inc
Chapter 1 Review
• General understanding on how Form and Form Builder
works.
Joget Inc Int...
All Rights Reserved © Joget Inc
Chapter 2
Designing your first forms
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...
All Rights Reserved © Joget Inc
Map Activities to Form
• Go to App Designer’s Process view.
• Click on “Add/Edit Form” on ...
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
n...
All Rights Reserved © Joget Inc
Edit Section
Leave Application Details
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Insert Date Picker
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
Set The Date Picker as Mandatory Field
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Complete the design of
“Submit Leave Form”
Date Picker
ID: end_date
Label: End Date
Text A...
All Rights Reserved © Joget Inc
Complete The Design of “Leave
Application Form”
Preview and Save
Joget Inc Internal Use On...
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.
•...
All Rights Reserved © Joget Inc
Exercise
• Do you know that you can still modify the form even after
(your app has been pu...
All Rights Reserved © Joget Inc
Chapter Review
• Associating activity with form
• Creating Form and understanding the basi...
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 t...
All Rights Reserved © Joget Inc
Create a New Form, for “Approve Leave”
Activity
• Click on “Add/Edit Form” on “Approve Lea...
All Rights Reserved © Joget Inc
Using Sub Form
Approve Leave Form
Using “Leave Application Form” as
Sub Form
Joget Inc Int...
All Rights Reserved © Joget Inc
Using Sub Form
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Using “Apply Leave Form” as
Sub Form
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Using “Apply Leave 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
Insert Radio Button
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Radio Button Options
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
Leave Approval Form
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Continue with the Assignment
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...
All Rights Reserved © Joget Inc
Leave Approved Form
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Complete the Process Cycle
• Go to “Inbox”.
• Open “Leave Approved” assignment. Verify the...
All Rights Reserved © Joget Inc
Chapter Review
• Learn about Subform
• Control flow of process using Workflow Variable map...
All Rights Reserved © Joget Inc
Module Review
We have learnt to:
1. Create Form and assign it to Workflow Activity with ba...
All Rights Reserved © Joget Inc
Recommended Further Learning
• Creating a Datalist based on the Forms designed.
Joget Inc ...
All Rights Reserved © Joget Inc
Stay Connected with Joget Workflow
• www.joget.org
• community.joget.org
• twitter.com/jog...
Upcoming SlideShare
Loading in …5
×

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

1,347 views

Published on

This is the fifth module for Joget Workflow training. Slides made specifically for Joget Workflow version 4.

This is the complete listing of available modules.
1 - Introduction to Joget Workflow
2 - Setting up Joget Workflow
3 - Designing your first Process on Joget Workflow
4 - Localizing your Joget Workflow
5 - Designing your first Form on Joget Workflow
6 - Using your first Process Tool – Email
7 - Designing your first Datalist on Joget Workflow
8 - Designing your first Userview on Joget Workflow
9 - Hash Variable
10 - Permission Control
11 - SLA and Deadlines
12 - Version Control
13 - Improving your Form design and Presentation
14 - Introduction to Reporting
15 - Introduction to Plugin Architecture
16 - Preparing Development Environment
17 - Building a Plugin
18 - Integrating with External System
19 - Doing more with your Process Design
20 - Basic System Administration
21 - Userview Key
22 - Best Practices on Application Building -

You may checkout the training screencast of this training at http://www.joget.org/joget-workflow-v4-training/

Published in: Software
  • Be the first to comment

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

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. All Rights Reserved © Joget Inc Chapter 1 Introduction to Form Builder Joget Inc Internal Use Only
  5. 5. All Rights Reserved © Joget Inc Joget Inc Internal Use Only
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. All Rights Reserved © Joget Inc Good to know • It is impossible to run/view a Form without using Joget running as the server. Joget Inc Internal Use Only
  14. 14. All Rights Reserved © Joget Inc Chapter 1 Review • General understanding on how Form and Form Builder works. Joget Inc Internal Use Only
  15. 15. All Rights Reserved © Joget Inc Chapter 2 Designing your first forms Joget Inc Internal Use Only
  16. 16. 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
  17. 17. 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
  18. 18. All Rights Reserved © Joget Inc Add/Edit Form • Click on “Create New Form” Joget Inc Internal Use Only
  19. 19. 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
  20. 20. All Rights Reserved © Joget Inc Edit Section Leave Application Details Joget Inc Internal Use Only
  21. 21. All Rights Reserved © Joget Inc Insert Date Picker Joget Inc Internal Use Only
  22. 22. All Rights Reserved © Joget Inc Edit The First Date Picker a-z, A-Z, 0-9, _ Joget Inc Internal Use Only
  23. 23. All Rights Reserved © Joget Inc Set The Date Picker as Mandatory Field Joget Inc Internal Use Only
  24. 24. All Rights Reserved © Joget Inc 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 Joget Inc Internal Use Only
  25. 25. All Rights Reserved © Joget Inc Complete The Design of “Leave Application Form” Preview and Save Joget Inc Internal Use Only
  26. 26. All Rights Reserved © Joget Inc How the Form looks like when you launch “Run Process” now? Joget Inc Internal Use Only
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. All Rights Reserved © Joget Inc Chapter 3 Controlling Workflow Process by using Form Joget Inc Internal Use Only
  31. 31. 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
  32. 32. 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
  33. 33. All Rights Reserved © Joget Inc Using Sub Form Approve Leave Form Using “Leave Application Form” as Sub Form Joget Inc Internal Use Only
  34. 34. All Rights Reserved © Joget Inc Using Sub Form Joget Inc Internal Use Only
  35. 35. All Rights Reserved © Joget Inc Using “Apply Leave Form” as Sub Form Joget Inc Internal Use Only
  36. 36. All Rights Reserved © Joget Inc Using “Apply Leave Form” as Sub Form Joget Inc Internal Use Only
  37. 37. All Rights Reserved © Joget Inc What About The Approval Status? “Approved” or “Rejected”? Joget Inc Internal Use Only
  38. 38. All Rights Reserved © Joget Inc Insert Radio Button Joget Inc Internal Use Only
  39. 39. All Rights Reserved © Joget Inc Radio Button Options Joget Inc Internal Use Only
  40. 40. All Rights Reserved © Joget Inc Map The Selected Value to Workflow Variable Joget Inc Internal Use Only
  41. 41. All Rights Reserved © Joget Inc Leave Approval Form Joget Inc Internal Use Only
  42. 42. All Rights Reserved © Joget Inc Continue with the Assignment Joget Inc Internal Use Only
  43. 43. 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
  44. 44. All Rights Reserved © Joget Inc Leave Approved Form Joget Inc Internal Use Only
  45. 45. 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
  46. 46. 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
  47. 47. 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
  48. 48. All Rights Reserved © Joget Inc Recommended Further Learning • Creating a Datalist based on the Forms designed. Joget Inc Internal Use Only
  49. 49. All Rights Reserved © Joget Inc Stay Connected with Joget Workflow • www.joget.org • community.joget.org • twitter.com/jogetworkflow • facebook.com/jogetworkflow • youtube.com/jogetworkflow • slideshare.net/joget Joget Inc Internal Use Only

×