Joget Workflow v5 Training Slides - Module 13 - Improving your form design and presentation

All Rights Reserved © Joget Inc

Joget Workflow v5

Improving your Form design and Presentation

http://facebook.com/jogetworkflowhttp://twitter.com/jogetworkflow

Last Revised on May 2016Joget Inc Internal Use Only


Prerequisites

1. Good understanding on the basic functionality of the Form Builder.

Joget Inc Internal Use Only


Content

1. Introduction2. Grid3. Form Grid4. Multirow Form Binder5. List Grid6. CRUD7. Custom HTML



Chapter 1

Introduction



Introduction

• Learning about more Joget Workflow plugins/elements to improve your form design and presentation.

• In this module, we will be covering the following elements.1. Grid (Form Element)2. Form Grid (Form Element)3. Multirow Form Binder (Form Binder)4. List Grid (Form Element)5. CRUD (Userview Menu)



List of available Elements

• Check out http://dev.joget.org/community/display/KBv5/Create+New+Form for the list of Form related elements (Form Element, Form Validator, Form Binder, Form Options Binder).

• Check out http://dev.joget.org/community/display/KBv5/Userview+Element for the list of Userview Menu elements.


http://dev.joget.org/community/display/KBv5/Create+New+Form


http://dev.joget.org/community/display/KBv5/Userview+Element



Chapter 2

Grid



Grid

• Grid is the most basic element available in the Form Builder in capturing multi-row data.

• Reference: http://dev.joget.org/community/display/KBv5/Grid • For your information: The other grid-like element available in Form Builder is

Form Grid.


http://dev.joget.org/community/display/KBv5/Grid

http://dev.joget.org/community/display/KBv5/Grid


Exercise

• Import the base app “13.zip” into your copy of Joget.• Edit the “1-Submit Leave” form.• Add a “Grid” to the end of the form.• Configure accordingly.



Exercise

• This is how your form design should look like.



Exercise

• Run a new “Leave Process” process, and submit the form to observe.



Materials

• Completed exercise Form Definition for “1-Submit Leave“ can be obtained from 13.2.1.txt.



Chapter Review

• Being able to use the Grid element.



Chapter 3

Form Grid



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/KBv5/Form+Grid


http://dev.joget.org/community/display/KBv5/Form+Grid

http://dev.joget.org/community/display/KBv5/Form+Grid


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.



Exercise

• Add 2 text fields with the following details:-– ID: name, Label: Name– ID: contact_no, Label: Contact No

• Save the form



Exercise

• Edit the “1-Submit Leave” form.• Add a “Form Grid” to the end of the form.• Configure accordingly.



Exercise




Exercise

• This is how the form should look like in runtime.



Exercise

• Run a new “Apply Leave” process, and submit the form to observe.



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”



Chapter Review

• Being able to use the Form Grid element.• PS: Check out Advanced Grid (http://

dev.joget.org/community/display/KBv5/Advanced+Grid) Form Element that performs similarly as the Form Grid.


http://dev.joget.org/community/display/KBv5/Advanced+Grid

http://dev.joget.org/community/display/KBv5/Advanced+Grid


Chapter 4

Multirow Form Binder



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/KBv5/Multirow+Form+Binder


http://dev.joget.org/community/display/KBv5/Multirow+Form+Binder

http://dev.joget.org/community/display/KBv5/Multirow+Form+Binder


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.



Exercise

• This is how your “Emergency Contact” form should look like.



Exercise

• Edit the "1-Submit Leave" form.• Configure the Form Grid element to utilize the Multirow

Form Binder in Data Binder.



Exercise

• Click next to configure the Binder.• Configure accordingly.



Exercise

• Run a new “Apply Leave” process, and submit the form to observe.



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.



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



Chapter Review

• Understand the use case of the Multirow Form Binder and the benefits that it brings.



Chapter 5

List Grid



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/KBv5/List+Grid


http://dev.joget.org/community/display/KBv5/List+Grid

http://dev.joget.org/community/display/KBv5/List+Grid


Exercise


• Remove the Form Grid from "1-Submit Leave" form.



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.



Exercise

• Drag in 2 columns (name and contact_no) into the Datalist design pane. Change the labels accordingly.



Exercise

• Edit the "1-Submit Leave" form. Add a List Grid to the bottom of the form. Configure accordingly and save.



Exercise




Exercise

• This is how the form should look like in runtime.



Materials

• "1-Submit Leave" form definition is available at “13.5.3.txt”

• “Contact List” definition is available at “13.5.2.txt”



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.



Chapter 6

CRUD



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/KBv5/CRUD


http://dev.joget.org/community/display/KBv5/CRUD

http://dev.joget.org/community/display/KBv5/CRUD


What is needed for CRUD to run?

• A Form entity• A List of the same data entity as the form• A Userview



Exercise


• Add a CRUD element into the Userview in the base app. Configure accordingly.



Exercise

• This is how the CRUD element would look like in runtime.



Materials

• “Leave Portal” Userview definition is available at 13.6.1.txt



Chapter Review

• Able to use CRUD and understand the linkages.



Chapter 7

Custom HTML



Custom HTML

Custom HTML in Form Builder can be used to achieve advanced form design by putting in any valid -• HTML

E.g.: <b>this text is in bold</b>• JavaScript (jQuery is supported)

Don’t forget to put in <script type="text/javascript"></script> block

• CSSDon’t forget to put in <style type="text/css"></style> block

Reference: http://dev.joget.org/community/display/KBv5/Custom+HTML


http://dev.joget.org/community/display/KBv5/Custom+HTML

http://dev.joget.org/community/display/KBv5/Custom+HTML


Exercise - CSS

• Customize the look and feel of how the form is rendered by modifying its CSS.– Add a Custom HTML form element into the bottom of the form.– Edit it, add the following code into Custom HTML property.


<style type="text/css">

.form-cell .label, .subform-cell .label{

width: 100%; }

</style>


Exercise - Javascript

• Make use of jQuery’s Tooltip library to add hints into existing form “Submit Leave” using Custom HTML also.

Reference: https://jqueryui.com/tooltip/


https://jqueryui.com/tooltip/

https://jqueryui.com/tooltip/


Exercise - Javascript

Reference: http://dev.joget.org/community/display/KBv5/Add+jQuery+Tooltip+to+form


<script type="text/javascript"> $(function() { //customize your hints here by specifying form element ID on the left and message on the rightmessages = { 'name' : 'Key in your full name', 'start_date' : 'When are you going on leave?'}; //do not modify anything below here.$( document ).tooltip({ items: "input", content: function() { var element = $( this ); if( messages[$(element).attr("name")] ){ return messages[$(element).attr("name")]; }else{ return false; } } }); });</script>

http://dev.joget.org/community/display/KBv4/Add+jQuery+Tooltip+to+form

http://dev.joget.org/community/display/KBv4/Add+jQuery+Tooltip+to+form


Module Review

1. Introduction2. Grid3. Form Grid4. Multirow Form Binder5. List Grid6. CRUD7. Custom HTML



Learning More

• Check out http://dev.joget.org/community/display/KBv5/Create+New+Form for the list of Form related elements (Form Element, Form Validator, Form Binder, Form Options Binder).

• Check out http://dev.joget.org/community/display/KBv5/Userview+Element for the list of Userview Menu elements.







Stay Connected with Joget Workflow

• http://www.joget.org • http://community.joget.org • http://twitter.com/jogetworkflow • http://facebook.com/jogetworkflow • http://youtube.com/jogetworkflow • http://slideshare.net/joget


http://www.joget.org/

http://community.joget.org/

http://community.joget.org/

http://twitter.com/jogetworkflow

http://twitter.com/jogetworkflow

http://facebook.com/jogetworkflow

http://facebook.com/jogetworkflow

http://youtube.com/jogetworkflow

http://youtube.com/jogetworkflow

http://slideshare.net/joget

http://slideshare.net/joget

Software

Joget Workflow v5 Training Slides - Module 13 - Improving your form design and presentation