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

  • View
    325

  • Download
    1

Embed Size (px)

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

Joget Workflow v4 - Training

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

All Rights Reserved Joget Inc

1

Joget Inc Internal Use OnlyJoget Inc Internal Use Only

PrerequisitesGood understanding on the basic functionality of the Form Builder.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ContentIntroductionGridForm GridMultirow Form BinderList GridCRUDCustom HTMLJoget Inc Internal Use Only

All Rights Reserved Joget Inc

Chapter 1IntroductionJoget Inc Internal Use Only

All Rights Reserved Joget Inc

IntroductionLearning about more Joget Workflow plugins/elements to improve your form design and presentation.In this module, we will be covering the following elements.Grid (Form Element)Form Grid (Form Element)Multirow Form Binder (Form Binder)List Grid (Form Element)CRUD (Userview Menu)

Joget Inc Internal Use Only

All Rights Reserved Joget Inc

List of available ElementsCheck 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.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

Chapter 2GridJoget Inc Internal Use Only

All Rights Reserved Joget Inc

GridGrid 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.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseImport 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.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseThis is how your form design should look like.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseRun a new Leave Process process, and submit the form to observe.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

MaterialsCompleted exercise Form Definition for 1-Submit Leave can be obtained from 13.2.1.txt.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

Chapter ReviewBeing able to use the Grid element.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

Chapter 3Form GridJoget Inc Internal Use Only

All Rights Reserved Joget Inc

Form GridForm 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 Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseImport 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

All Rights Reserved Joget Inc

ExerciseAdd 2 text fields with the following details:-ID: name, Label: NameID: contact_no, Label: Contact No

Save the form

Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseEdit the 1-Submit Leave form.Add a Form Grid to the end of the form.Configure accordingly.

Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseThis is how your form design should look like.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseThis is how the form should look like in runtime.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseRun a new Apply Leave process, and submit the form to observe.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

Materials"1-Submit Leave" form can be obtained from the file 13.3.1.txtEmergency Contact form can be obtained from the file 13.3.2.txtJoget Inc Internal Use Only

All Rights Reserved Joget Inc

Chapter ReviewBeing 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. Joget Inc Internal Use Only

All Rights Reserved Joget Inc

Chapter 4Multirow Form BinderJoget Inc Internal Use Only

All Rights Reserved Joget Inc

Multirow Form BinderMultirow 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

Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseContinue 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

All Rights Reserved Joget Inc

ExerciseThis is how your Emergency Contact form should look like.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseEdit the "1-Submit Leave" form.Configure the Form Grid element to utilize the Multirow Form Binder in Data Binder.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseClick next to configure the Binder.Configure accordingly.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseRun a new Apply Leave process, and submit the form to observe.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseInspect 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

All Rights Reserved Joget Inc

Materials"1-Submit Leave" form definition is available at 13.4.2.txtEmergency Contact form definition is available at 13.4.3.txtComplete app is available at 13.4.4.zipJoget Inc Internal Use Only

All Rights Reserved Joget Inc

Chapter ReviewUnderstand the use case of the Multirow Form Binder and the benefits that it brings.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

Chapter 5List GridJoget Inc Internal Use Only

All Rights Reserved Joget Inc

List GridList 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 Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseContinue 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

All Rights Reserved Joget Inc

ExerciseCreate a new Datalist as follow:-ID: contactListName: Contact ListBinder: JDBC Datalist Database BinderDatasource: Default DatasourceSQL 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

All Rights Reserved Joget Inc

ExerciseDrag in 2 columns (name and contact_no) into the Datalist design pane. Change the labels accordingly.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseEdit the "1-Submit Leave" form. Add a List Grid to the bottom of the form. Configure accordingly and save.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseThis is how your form design should look like.Joget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseThis 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.txtContact List definition is available at 13.5.2.txtJoget Inc Internal Use Only

All Rights Reserved Joget Inc

Chapter ReviewUnderstand 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

All Rights Reserved Joget Inc

Chapter 6CRUDJoget Inc Internal Use Only

All Rights Reserved Joget Inc

CRUDCRUD 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 Joget Inc Internal Use Only

All Rights Reserved Joget Inc

What is needed for CRUD to run?A Form entityA List of the same data entity as the formA UserviewJoget Inc Internal Use Only

All Rights Reserved Joget Inc

ExerciseContinue 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

All Rights Reserved Joget Inc

Joget Inc Internal Use Onl