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
Improving your Form design and Presentation
http://facebook.com/jogetwor...
All Rights Reserved © Joget Inc
Prerequisites
1. Good understanding on the basic functionality of the
Form Builder.
Joget ...
All Rights Reserved © Joget Inc
Content
1. Introduction
2. Grid
3. Form Grid
4. Multirow Form Binder
5. List Grid
6. CRUD
...
All Rights Reserved © Joget Inc
Chapter 1
Introduction
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Introduction
• Learning about advanced Enterprise Form Elements
1. Grid
2. Form Grid
3. Mu...
All Rights Reserved © Joget Inc
Chapter 2
Grid
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Grid
• Grid is the most basic element available in the Form
Builder in capturing multi-row...
All Rights Reserved © Joget Inc
Exercise
• Import the base app “13.zip” into your copy of Joget.
• Edit the “1-Submit Leav...
All Rights Reserved © Joget Inc
Exercise
• This is how your form design should look like.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Exercise
• Run a new “Apply Leave” process, and submit the form to
observe.
Joget Inc Inte...
All Rights Reserved © Joget Inc
Materials
• Completed exercise Form Definition for “1-Submit Leave
Form“ can be obtained f...
All Rights Reserved © Joget Inc
Chapter Review
• Being able to use the Grid element.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Chapter 3
Form Grid
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Form Grid
• Form Grid works similarly like the basic Grid.
• Instead of editing data row i...
All Rights Reserved © Joget Inc
Exercise
• Import the base app “13.zip” into your copy of Joget OR
delete the Grid created...
All Rights Reserved © Joget Inc
Exercise
• Add 2 text fields with the following details:-
– ID: name, Label: Name
– ID: co...
All Rights Reserved © Joget Inc
Exercise
• Edit the “1-Submit Leave Form” form.
• Add a “Form Grid” to the end of the form...
All Rights Reserved © Joget Inc
Exercise
• This is how your form design should look like.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Exercise
• This is how the form should look like in runtime.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Exercise
• Run a new “Apply Leave” process, and submit the form to
observe.
Joget Inc Inte...
All Rights Reserved © Joget Inc
Materials
• “1-Submit Leave Form” can be obtained from the file
“13.3.1.txt”
• “Emergency ...
All Rights Reserved © Joget Inc
Chapter Review
• Being able to use the Form Grid element.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Chapter 4
Multirow Form Binder
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Multirow Form Binder
• Multirow Form Binder is a Store/Load Form Binder that is
designed t...
All Rights Reserved © Joget Inc
Exercise
• Continue to use the application from the previous chapter
OR import app from th...
All Rights Reserved © Joget Inc
Exercise
• This is how your “Emergency Contact” form should look
like.
Joget Inc Internal ...
All Rights Reserved © Joget Inc
Exercise
• Edit the “1-Submit Leave Form”.
• Configure the Form Grid element to utilize th...
All Rights Reserved © Joget Inc
Exercise
• Click next to configure the Binder.
• Configure accordingly.
Joget Inc Internal...
All Rights Reserved © Joget Inc
Exercise
• Run a new “Apply Leave” process, and submit the form to
observe.
Joget Inc Inte...
All Rights Reserved © Joget Inc
Exercise
• Inspect the database table of “Emergency Contact”, you
will notice that rows of...
All Rights Reserved © Joget Inc
Materials
• “1-Submit Leave Form” definition is available at 13.4.2.txt
• “Emergency Conta...
All Rights Reserved © Joget Inc
Chapter Review
• Understand the use case of the Multirow Form Binder
and the benefits that...
All Rights Reserved © Joget Inc
Chapter 5
List Grid
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
List Grid
• List Grid is a grid table that populates its data from a
Datalist.
• It behave...
All Rights Reserved © Joget Inc
Exercise
• Continue to use the application from the previous chapter
OR import app from th...
All Rights Reserved © Joget Inc
Exercise
• Create a new datalist as follow:-
– ID: contactList
– Name: Contact List
– Bind...
All Rights Reserved © Joget Inc
Exercise
• Drag in 2 columns (name and contact_no) into the
Datalist design pane. Change t...
All Rights Reserved © Joget Inc
Exercise
• Edit the “1-Submit Leave Form”. Add a List Grid to the
bottom of the form. Conf...
All Rights Reserved © Joget Inc
Exercise
• This is how your form design should look like.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Exercise
• This is how the form should look like in runtime.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Materials
• “1-Submit Leave Form” definition is available at
“13.5.3.txt”
• “Contact List”...
All Rights Reserved © Joget Inc
Chapter Review
• Understand the List Grid element and be able to think of
the use case of ...
All Rights Reserved © Joget Inc
Chapter 6
CRUD
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
CRUD
• CRUD is a Userview Menu allows one to easily achieve the
functionality of Create, R...
All Rights Reserved © Joget Inc
What is needed for CRUD to run?
• A Form entity
• A List of the same data entity as the fo...
All Rights Reserved © Joget Inc
Exercise
• Continue to use the application from the previous chapter OR import app from
th...
All Rights Reserved © Joget Inc
Exercise
• This is how the CRUD element would look like in runtime.
Joget Inc Internal Use...
All Rights Reserved © Joget Inc
Materials
• “Leave Portal” Userview definition is available at
13.6.1.txt
Joget Inc Intern...
All Rights Reserved © Joget Inc
Chapter Review
• Able to use CRUD and understand the linkages.
Joget Inc Internal Use Only
All Rights Reserved © Joget Inc
Module Review
1. Introduction
2. Grid
3. Form Grid
4. Multirow Form Binder
5. List Grid
6....
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 13 -Improving your Form Design and Presentation

953 views

Published on

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

  • Be the first to like this

Joget Workflow v4 Training - Module 13 -Improving your Form Design and Presentation

  1. 1. All Rights Reserved © Joget Inc Joget Workflow v4 Improving your Form design and Presentation 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 1. Good understanding on the basic functionality of the Form Builder. Joget Inc Internal Use Only
  3. 3. All Rights Reserved © Joget Inc Content 1. Introduction 2. Grid 3. Form Grid 4. Multirow Form Binder 5. List Grid 6. CRUD Joget Inc Internal Use Only
  4. 4. All Rights Reserved © Joget Inc Chapter 1 Introduction Joget Inc Internal Use Only
  5. 5. All Rights Reserved © Joget Inc Introduction • Learning about advanced Enterprise Form Elements 1. Grid 2. Form Grid 3. Multirow Form Binder 4. List Grid 5. CRUD Joget Inc Internal Use Only
  6. 6. All Rights Reserved © Joget Inc Chapter 2 Grid Joget Inc Internal Use Only
  7. 7. All Rights Reserved © Joget Inc Grid • Grid is the most basic element available in the Form Builder in capturing multi-row data. • Reference: http://dev.joget.org/community/display/KBv4/Grid http://dev.joget.org/community/display/KBv4/Add+a+Grid • For your information: The other grid-like element available in Form Builder is Form Grid. Joget Inc Internal Use Only
  8. 8. All Rights Reserved © Joget Inc Exercise • Import the base app “13.zip” into your copy of Joget. • Edit the “1-Submit Leave Form” form. • Add a “Grid” to the end of the form. • Configure accordingly. Joget Inc Internal Use Only
  9. 9. All Rights Reserved © Joget Inc Exercise • This is how your form design should look like. Joget Inc Internal Use Only
  10. 10. All Rights Reserved © Joget Inc Exercise • Run a new “Apply Leave” process, and submit the form to observe. Joget Inc Internal Use Only
  11. 11. All Rights Reserved © Joget Inc Materials • Completed exercise Form Definition for “1-Submit Leave Form“ can be obtained from 13.2.1.txt. Joget Inc Internal Use Only
  12. 12. All Rights Reserved © Joget Inc Chapter Review • Being able to use the Grid element. Joget Inc Internal Use Only
  13. 13. All Rights Reserved © Joget Inc Chapter 3 Form Grid Joget Inc Internal Use Only
  14. 14. All Rights Reserved © Joget Inc Form Grid • Form Grid works similarly like the basic Grid. • Instead of editing data row inline, editing is done on a full fledged Form that opens up in a dialog. • Reference: http://dev.joget.org/community/display/KBv4/Enhanced+Grid+Form+Element+%28Form+Grid%29 Joget Inc Internal Use Only
  15. 15. All Rights Reserved © Joget Inc Exercise • Import the base app “13.zip” into your copy of Joget OR delete the Grid created in previous chapter. • Create a new form with the following details. Joget Inc Internal Use Only
  16. 16. All Rights Reserved © Joget Inc Exercise • Add 2 text fields with the following details:- – ID: name, Label: Name – ID: contact_no, Label: Contact No • Save the form Joget Inc Internal Use Only
  17. 17. All Rights Reserved © Joget Inc Exercise • Edit the “1-Submit Leave Form” form. • Add a “Form Grid” to the end of the form. • Configure accordingly. Joget Inc Internal Use Only
  18. 18. All Rights Reserved © Joget Inc Exercise • This is how your form design should look like. Joget Inc Internal Use Only
  19. 19. All Rights Reserved © Joget Inc Exercise • This is how the form should look like in runtime. Joget Inc Internal Use Only
  20. 20. All Rights Reserved © Joget Inc Exercise • Run a new “Apply Leave” process, and submit the form to observe. Joget Inc Internal Use Only
  21. 21. All Rights Reserved © Joget Inc Materials • “1-Submit Leave Form” can be obtained from the file “13.3.1.txt” • “Emergency Contact” form can be obtained from the file “13.3.2.txt” Joget Inc Internal Use Only
  22. 22. All Rights Reserved © Joget Inc Chapter Review • Being able to use the Form Grid element. Joget Inc Internal Use Only
  23. 23. All Rights Reserved © Joget Inc Chapter 4 Multirow Form Binder Joget Inc Internal Use Only
  24. 24. All Rights Reserved © Joget Inc Multirow Form Binder • Multirow Form Binder is a Store/Load Form Binder that is designed to treat multi-row data for grid form element. • Rather than storing in the traditional JSON data format in a single column cell, the Multirow Form Binder saves the data into its respective tables. • This would make data retrieval easier for sorting, statistics, and indexing/performance purpose. • Reference: http://dev.joget.org/community/display/KBv4/Multirow+Form+Binder Joget Inc Internal Use Only
  25. 25. All Rights Reserved © Joget Inc Exercise • Continue to use the application from the previous chapter OR import app from the file “13.4.1.zip”. • Edit the “Emergency Contact” form. • Add a Hidden Field to the form. • Configure accordingly. Joget Inc Internal Use Only
  26. 26. All Rights Reserved © Joget Inc Exercise • This is how your “Emergency Contact” form should look like. Joget Inc Internal Use Only
  27. 27. All Rights Reserved © Joget Inc Exercise • Edit the “1-Submit Leave Form”. • Configure the Form Grid element to utilize the Multirow Form Binder in Data Binder. Joget Inc Internal Use Only
  28. 28. All Rights Reserved © Joget Inc Exercise • Click next to configure the Binder. • Configure accordingly. Joget Inc Internal Use Only
  29. 29. All Rights Reserved © Joget Inc Exercise • Run a new “Apply Leave” process, and submit the form to observe. Joget Inc Internal Use Only
  30. 30. All Rights Reserved © Joget Inc Exercise • Inspect the database table of “Emergency Contact”, you will notice that rows of data is now being saved into this table rather than the parent table. Joget Inc Internal Use Only
  31. 31. All Rights Reserved © Joget Inc Materials • “1-Submit Leave Form” definition is available at 13.4.2.txt • “Emergency Contact” form definition is available at 13.4.3.txt • Complete app is available at 13.4.4.zip Joget Inc Internal Use Only
  32. 32. All Rights Reserved © Joget Inc Chapter Review • Understand the use case of the Multirow Form Binder and the benefits that it brings. Joget Inc Internal Use Only
  33. 33. All Rights Reserved © Joget Inc Chapter 5 List Grid Joget Inc Internal Use Only
  34. 34. All Rights Reserved © Joget Inc List Grid • List Grid is a grid table that populates its data from a Datalist. • It behaves similarly like a Grid (Chapter 2) but new rows are added from a specific datalist instead. • It also behaves similarly like a Form Grid that allows one to open up a Form for editing. • Reference: http://dev.joget.org/community/display/KBv4/List+Grid Joget Inc Internal Use Only
  35. 35. All Rights Reserved © Joget Inc Exercise • Continue to use the application from the previous chapter OR import app from the file “13.4.1.zip”. • Remove the Form Grid from “1-Submit Leave Form”. Joget Inc Internal Use Only
  36. 36. All Rights Reserved © Joget Inc Exercise • Create a new datalist as follow:- – ID: contactList – Name: Contact List – Binder: JDBC Datalist Database Binder • Datasource: Default Datasource • SQL Select Query: select con.id, app.c_name as 'applicant', con.c_name as 'name', con.c_contact_no as 'contact_no' from app_fd_leave_applications app join app_fd_leave_contacts con on app.id = con.c_application_id (refer to the file 13.5.1.txt for the SQL) Refer to 13.5.2.txt for the Datalist definition. Joget Inc Internal Use Only
  37. 37. All Rights Reserved © Joget Inc Exercise • Drag in 2 columns (name and contact_no) into the Datalist design pane. Change the label accordingly. Joget Inc Internal Use Only
  38. 38. All Rights Reserved © Joget Inc Exercise • Edit the “1-Submit Leave Form”. Add a List Grid to the bottom of the form. Configure accordingly and save. Joget Inc Internal Use Only
  39. 39. All Rights Reserved © Joget Inc Exercise • This is how your form design should look like. Joget Inc Internal Use Only
  40. 40. All Rights Reserved © Joget Inc Exercise • This is how the form should look like in runtime. Joget Inc Internal Use Only
  41. 41. All Rights Reserved © Joget Inc Materials • “1-Submit Leave Form” definition is available at “13.5.3.txt” • “Contact List” definition is available at “13.5.2.txt” Joget Inc Internal Use Only
  42. 42. All Rights Reserved © Joget Inc Chapter Review • Understand the List Grid element and be able to think of the use case of it. • Able to different between Grid, Form Grid and List Grid. Joget Inc Internal Use Only
  43. 43. All Rights Reserved © Joget Inc Chapter 6 CRUD Joget Inc Internal Use Only
  44. 44. All Rights Reserved © Joget Inc CRUD • CRUD is a Userview Menu allows one to easily achieve the functionality of Create, Retrieve, Update, and Delete on a data entity. • Reference: http://dev.joget.org/community/display/KBv4/Advanced+CRUD+Userview+Menu Joget Inc Internal Use Only
  45. 45. All Rights Reserved © Joget Inc What is needed for CRUD to run? • A Form entity • A List of the same data entity as the form • A Userview Joget Inc Internal Use Only
  46. 46. All Rights Reserved © Joget Inc Exercise • Continue to use the application from the previous chapter OR import app from the file “13.4.1.zip”. • Add a CRUD element into the Userview in the base app. Configure accordingly. Joget Inc Internal Use Only
  47. 47. All Rights Reserved © Joget Inc Exercise • This is how the CRUD element would look like in runtime. Joget Inc Internal Use Only
  48. 48. All Rights Reserved © Joget Inc Materials • “Leave Portal” Userview definition is available at 13.6.1.txt Joget Inc Internal Use Only
  49. 49. All Rights Reserved © Joget Inc Chapter Review • Able to use CRUD and understand the linkages. Joget Inc Internal Use Only
  50. 50. All Rights Reserved © Joget Inc Module Review 1. Introduction 2. Grid 3. Form Grid 4. Multirow Form Binder 5. List Grid 6. CRUD Joget Inc Internal Use Only
  51. 51. 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

×