More Related Content Similar to Joget Workflow v4 Training - Module 13 -Improving your Form Design and Presentation (20) More from Joget Workflow (13) Joget Workflow v4 Training - Module 13 -Improving your Form Design and Presentation1. 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. All Rights Reserved © Joget Inc
Prerequisites
1. Good understanding on the basic functionality of the
Form Builder.
Joget Inc Internal Use Only
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
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
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. 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. All Rights Reserved © Joget Inc
Exercise
• This is how your form design should look like.
Joget Inc Internal Use Only
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. 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. All Rights Reserved © Joget Inc
Chapter Review
• Being able to use the Grid element.
Joget Inc Internal Use Only
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. 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. 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. 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. All Rights Reserved © Joget Inc
Exercise
• This is how your form design should look like.
Joget Inc Internal Use Only
19. All Rights Reserved © Joget Inc
Exercise
• This is how the form should look like in runtime.
Joget Inc Internal Use Only
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. 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. All Rights Reserved © Joget Inc
Chapter Review
• Being able to use the Form Grid element.
Joget Inc Internal Use Only
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. 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. All Rights Reserved © Joget Inc
Exercise
• This is how your “Emergency Contact” form should look
like.
Joget Inc Internal Use Only
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. All Rights Reserved © Joget Inc
Exercise
• Click next to configure the Binder.
• Configure accordingly.
Joget Inc Internal Use Only
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. 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. 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. 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
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. 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. 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. 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. 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. All Rights Reserved © Joget Inc
Exercise
• This is how your form design should look like.
Joget Inc Internal Use Only
40. All Rights Reserved © Joget Inc
Exercise
• This is how the form should look like in runtime.
Joget Inc Internal Use Only
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. 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
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. 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. 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. All Rights Reserved © Joget Inc
Exercise
• This is how the CRUD element would look like in runtime.
Joget Inc Internal Use Only
48. All Rights Reserved © Joget Inc
Materials
• “Leave Portal” Userview definition is available at
13.6.1.txt
Joget Inc Internal Use Only
49. All Rights Reserved © Joget Inc
Chapter Review
• Able to use CRUD and understand the linkages.
Joget Inc Internal Use Only
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. 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