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

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

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

All Rights Reserved © Joget Inc

Joget Workflow v4

Designing your first Form (Process)

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

Last Revised on March 2015Joget Inc Internal Use Only

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

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

All Rights Reserved © Joget Inc

Chapter 1

Introduction to Form Builder

Joget Inc Internal Use Only

All Rights Reserved © Joget IncJoget Inc Internal Use Only

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

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

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

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

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

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

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

All Rights Reserved © Joget Inc

Good to know

• It is impossible to run/view a Form without using Jogetrunning as the server.

Joget Inc Internal Use Only

All Rights Reserved © Joget Inc

Chapter 1 Review

• General understanding on how Form and Form Builder works.

Joget Inc Internal Use Only

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 flow.

Joget Inc Internal Use Only

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

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 name according to

process flow

Table name with prefix

Assign a prefix for every application

Joget Inc Internal Use Only

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 PickerID: end_dateLabel: End Date

Text AreaID: reasonLabel: Reason

Text FieldID: nameLabel: Name

Joget Inc Internal Use Only

All Rights Reserved © Joget Inc

Complete The Design of “Leave Application Form”

Preview and Save

Joget Inc Internal Use Only

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.

• Submit the form.

• Fill up all the fields and complete the assignment.

Joget Inc Internal Use Only

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

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

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 the flow.

• Form controls the next course of action in the process flow.

Joget Inc Internal Use Only

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

All Rights Reserved © Joget Inc

Using Sub Form

Approve Leave Form

Using “Leave Application Form” as Sub Form

Joget Inc Internal Use Only

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”

• 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

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 form created.

• Complete the assignment.

Joget Inc Internal Use Only

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

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

All Rights Reserved © Joget Inc

Recommended Further Learning

• Creating a Datalist based on the Forms designed.

Joget Inc Internal Use Only

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