Easy J get v3

for the absolute beginner

ii

Preliminaries Joget Workflow is a free open source app builder that allows you to create full- edged process apps from any computer with Internet connection. Its simple drag-and drop wizards make designing forms, tables, processes and user interfaces (UI) easy as pie. More and more businesses looking for an easy-to-use yet powerful complement to their groove are nding Joget Work ow essential and useful to their organization. www.joget.org spells out the details.

Joget is not just about workflows.

To build apps using Joget, one needs to move around the Work ow Designer, Form Builder, Datalist Builder and Userview Builder. Im guessing, though, that some of you may not want to design work ows but would like it if you could build process apps sans all the diagraming. Jogets Userview Builder --- the jewel among Jogets crown jewels --- sets you where the rubber meets the road. Youll goggle at how easily anyone can build apps using the Userview Builder, and with those apps, eciently take care of all kinds of oce work that are done repeatedly. iii

Joget Work ow Ecosystem Lets take a look at what makes up Joget Workflow:

This book provides handy information for you, the average Joe, while you build your rst Joget Work ow process app. It does not discuss what Joget can do in full-scale. Rather, it guides you through the features that you can use to make your work processes ow as they should. This book comes clean and clear so you can move on without the frustrating jargons and get your apps done. The contents are organized in linear style, but you can always hop to any chapter that you feel you need to go to.

Each time you dont understand something, look for the topic under the table of contents or in the index page. For quick de nitions on words that bae you, turn to the glossary at the end of the book. Words or phrases that you are being asked to type in or click on are marked in bold text. Words that are being de ned are written in italics. iv

 ( > ) is used when showing selected commands in menus, for example, File > Open which means that you are being asked to click on the File menu and select the Open command. Website addresses are written in monolith, like this: http://www.joget.org/download/. Currently, Joget Work ow is available for both Windows and Linux. However, everything in this book pertains to Joget on Windows.

Table of Contents
Chapter 1 Introducing Joget Work ow
Is Joget really that simple to use? Choosing the Right Joget Work ow Edition How do you start using Joget Work ow Touring Joget Work ow Designer Form Builder Datalist Builder Userview Builder Web Console

1-9

Chapter 2 Setting Up the Organization Chart

Creating a New Organization Adding Departments Structuring Grades Creating Users Setting up User Details Setting up Employee Details

10 - 17

Chapter 3 The Joget Walkabout

Designing Your First Process App Up and Going with Work ow Designer Adding Participants to a Process Setting Participant Properties Adding Activities to Swimlanes Adding Tools to System-type Participants Adding Transitions Adding Routes Figuring Out Where to Go Next Adding and Removing Start and End Bubbles

18 - 36

Chapter 4 Joget at Work

Mapping Participants to Users Participant Mapping for Approver Participant Mapping for Applicant Mapping Activities to Forms Mapping Tools to Plugins

37 - 44

Chapter 5 Designing Web Forms with Form Builder

Building the Foundation of Databases Basic Elements of Form Builder Designing a Simple Form Launching the Form Builder Start by Adding Form Elements Add a Text Field Element Exploring the Text Field Property Editor Add a Date Picker Element

45 - 62

vi

 Exploring the Date Picker Property Editor Add a Text Area Exploring the Text Area Property Editor Let's create another form! Add a SubForm Element Add a SelectBox Element Add a Text Area

Chapter 6 Using the Datalist Builder

Create Datalists the Way You Want to See Them Creating a Datalist Selecting a Form to Link to the Datalist Let's begin with columns Adding Columns to the Layout De ning Column Properties Adding Actions Delete Action Explained Setting Filters

63 - 72

Chapter 7 Putting It All Together with Userview Builder

Building User Interfaces Key Areas of Userview Builder Your Userview Builder Toolbox Building a Userview Create New Userview Add a New Category Add an HTML Page Add an Inbox Add a Form Add a List Add a Run Process Element Set Userview Theme

73 - 82

Chapter 8 Test-Drive Your Process

Let's Run the Process!

83 - 86 84 - 89

Chapter 9 Joget Places

Joget Work ow Community Knowledge Base Joget Marketplace Joget Unplugged

Glossary

90 - 97

vii

Chapter 1

Introducing Joget Work ow

You're in the office. You have work to nish but get little or no work done because there's still no reply to that approval request you sent last lunar eclipse. You are a jangle of nerves as you try to gure out what's gonna hit you rst --- your deadline or the Prophet of Doom. Joget Work ow (Joget, for short) is computer software that you can use to build any process app based on what works and what doesn't, what you have and what you don't need to have in your business processes, without any web programming. The idea is to automate oce work and get the best results in the least number of steps and errors possible. Take administrative tasks, for example. They take you through a planet of forms that sit around and wait for someone to complete them. Sometimes, the wrong person does something about them. Other times, the right person does something wrong.

Whats new in Joget v3.1.0? At the time of writing, v3.1.0 is the latest version. With
each new version released, Joget Work ow has become more powerful and its features more enriched. The upgrade to v3.1.0 is no dierent. New in the v3 release are: a cleaner and more streamlined user interface enhanced Form, List and Userview features enhanced reporting through integration with JasperReports enhanced security features better multi-language support

Is Joget really that simple to use? Joget was designed to be a no-fuss process app
builder because, love it or hate it, processes are a fundamental part of every business life. But "easy" all boils down to being relative. You may need a little more elbow grease compared to the Joe three oors up who cruises along ne and dandy from day one. The reason could be a combination of factors, who knows? But you de nitely don't have to be a tech person to use Joget eectively. You just have to start somewhere, like in everything else you master in life. My tip would be to explore. Dont be afraid if you dont know a lot at the start; you'll always learn something new along the way. You have this book, and there are a host of other help topics at http://dev.joget.org/community/display/KB/Joget+Workflow +Community+Knowledge+Base that may help you nd your way if youve gotten o-track.

Figure 1-1. Joget Work ow Community Knowledge Base

Now Lets Get Started!

This part of the book shows you how to begin putting Joget to work and starts by walking you through a series of download, installation and basic getting-to-know-you steps.

Choosing the Right Joget Workflow Edition

Joget Work ow comes in two editions - Community and Enterprise. Each is customized to cater to the needs of dierent types of organizations. Community Edition - built for small organizations Enterprise Edition - built for medium to large organizations

How do you get Joget in one swoop?

Open your web browser. Type http://www.joget.org/download/ in the address bar.

Choose a Joget Work ow edition and click on Download.

Figure 1-2. http://www.joget.org/download/

Click on your preferred Joget version download. For this example, we will use v3 Enterprise Edition.

Figure 1-3. http://www.joget.org/download/downloads-for-v3/

Figure 1-4. http://www.joget.org/download/v3-enterprise-windows/

Wait for your download to nish, then double-click on the setup le jogetsetup-x.x.x.exe to launch the Joget Work ow Setup Wizard.

The Joget Work ow Setup Wizard breezes you through these steps: Click on Next in the Welcome page; youll see the License page.

Figure 1-5. Joget Work ow Setup Wizard

 Click on I Agree in the License page to accept the license; youll see the Components page.

Click on Next in the Components page. This will take you to the Installation page. Click on Install to install Joget Work ow in the preselected destination folder C:\Joget-v3.

Click on Finish when the installation is done.

How do you start using Joget Workflow?

To begin using Joget, you will have to start the Joget server rst. Joget server is where all your data are kept as you build your process apps. Follow these steps to start the Joget server: Go to Start Menu > Programs > Joget Work ow. Click on the green Start Joget Server icon. A window displaying consecutive lines of white text (or commands) on a black background will appear. That window is called a command window. Wait until the message "INFO: Server startup in XXXX ms" appears in the command window. XXXX represents the time it has taken the server to start and may take a little longer than you expect.
Do not close the command window.

Go to Start Menu > Programs > Joget Work ow. Click on Web Console to access the Joget Work ow start page http://localhost: 8080/jw in your web browser. Click on Access the Web Console. This will bring you to the Login page.
5

 Type admin in the Username eld. Type admin in the Password eld. Click on Login. This will bring you to your web console Home/Welcome Page where you can get started. The main menu lets you: 1. Setup Users 2. Design Apps 3. Run Apps 4. Monitor Apps

Figure 1-6. Joget Work ow Web Console

Touring Joget

Now that youve got the full groundwork, heres a quick tour of the key areas of Joget. The following are interrelated sections in Joget that make process app building a snap! Work ow Designer is where you draw and visualize how work is done in your organization. If you have never used a graphic tool before, you will rst need to acquaint yourself with the designers features in order to make the most out of it.

Figure 1-7. Work ow Designer User Interface

Design pane the big space where you create your work diagram by adding participants, activities, tools, sub ows, routes and transitions Element menu a column of clickable buttons (on the left side of the design pane) that provide an easy way of selecting element functions Elements in the Element menu: Selection - for choosing an element in the design pane whenever you want to do something to it, like copy, delete, move, and a number of other actions.
Selected elements look dierent: activity elements turn yellow, while other elements become outlined with broken lines or bounded areas.

Participant - the user who does the work Start - marks where the process begins, where a form is rst submitted End - marks where the process nishes, when the goal is achieved or the problem resolved Activity - action that involves human input , what the participant does Tool - automated task performed by the system, like sending emails Route - a point in the work ow design where a decision needs to be made rst to determine where the ow should go Sub ow - a process that is inserted in another process Transition - connects all elements together Swimlane illustrates how participants interact with each other in the work ow as they perform their activities in sequence

Menu bar a list of options, settings, actions and just about everything you do in Work ow Designer Tool bar a series of clickable buttons (above the design pane) used to set an action or command Navigator shows the apps and their processes in the current work ow design Dialog box an enclosed area that looks like a window on your screen, for typing in data Pop-up menu a list of commands or options that appear momentarily when you right-click on an element in the design pane View options switches the work ow design view between graph (which shows the diagram) and XPDL (which shows the coding)

Process guide warns you about errors in your work ow as you are designing it Form Builder lets you design online forms without HTML or coding. It uses a guided interface that is simple enough for anyone to use, and it is suciently customizable to meet the needs of dierent types of organizations.

Figure 1-8. Form Builder User Interface

Datalist Builder sports a look and feel similar to Form Builder. It oers an intuitive way of building data lists based on submitted form data.

Figure 1-9. Datalist Builder User Interface

Userview Builder is designed for ease-of-use so that anyone can build a front-end interface that process app users can directly interact with.

Figure 1-10. Userview Builder User Interface

Web Console is where Joget lets you work behind the scene so you can manage your apps. It is where you, as administrator, get to push all the control buttons and assign users their access levels and privileges, among many others.

Chapter 2

Setting Up the Organization Chart

Creating a New Organization
Before you begin designing your process app, set up your organization chart. Go to Setup Users and click on Setup Organization Chart in the drop-down menu.

Figure 2-1. Setup Organization Chart

Click on Create New Organization. This will bring up the Create New Organization dialog box.

Figure 2-2. Create New Organization

Figure 2-3. Create New Organization Dialog Box

10

 Complete the elds under Organization Details. For this example, enter abc_co in the Organization ID eld and ABC Co. in the Organization Name eld. Click on Save. The Create New Organization dialog box will close.

You are only allowed to use alphabets (a-z and A-Z), numbers (0-9), dash (-) and underscore ( _ ) in the Organization ID eld. This is also true for all other IDs. You must complete elds marked with an asterisk (*). IDs are case-sensitive. This means that joget and Joget are two dierent names. So when youre being asked to type an ID, observe uppercases and lowercases to avoid errors.

Adding Departments
You can manage your process app users by creating and managing departments in your organization. Go to Setup Users and click on Setup Organization Chart. Click on an organization name in the list. For this example, click on ABC Co.

Figure 2-4. Click on ABC Co.

The resulting page shows the organization details and its department list.

11

Figure 2-5. Department List

Click on Create New Department under Department List. This will bring up the Create New Department dialog box. Complete the department details. For this example, enter personnel in the Department ID eld and Personnel Department in the Department Name eld.

Figure 2-5. Create New Department Dialog Box

Click on Save. The Create New Department dialog box will close.

Figure 2-6. Updated Department List

12

Structuring Grades
One way of arranging and placing employees in their correct categories is by determining a grading structure. Go to Setup Users and click on Setup Organization Chart. Click on an organization name in the list. For this example, click on ABC Co. The resulting page shows the organization details and its department list.

Figure 2-7. Grade List

Click on Create New Grade under Grade List. This will bring up the Create New Grade dialog box. Complete the grade details. For this example, enter clerical in the Grade ID eld and Clerical in the Grade Name eld.

Figure 2-8. Create New Grade Dialog Box

Click on Save. The Create New Grade dialog box will close. Follow the same steps to create another grade. Type management in the Grade ID eld and Management in the Grade Name eld.
13

Figure 2-9. Updated Grade List

Creating Users
Users complete your organization layout. Each user stands for a unique account that can sign in to Joget and be a participant in the process apps.

Setting up User Details:

Go to Setup Users and click on Setup Users.

Figure 2-10. Creating Users

Click on Create New User.

14

Figure 2-11. Create New User Page

This will bring up the Create New User dialog box. Complete the following user details: Username: First Name: Last Name: Password: Con rm Password: Role(s): Time Zone: Status: Jane Jane Hill password password User
(GMT +08:00) Beijing, Hong Kong, Perth, Kuala Lumpur, Singapore, Taipei

Active

Figure 2-12. Create New User Dialog Box

Setting up Employee Details: Type the following under Employee Details:

Organization: ABC Co.
15

Department: Head of Department (HOD)? Grade

Personnel Department Yes Management

Figure 2-13. Setting Up Employee Details

Click on Save. This will close the Create New User dialog box. Repeat the same steps to create our second user. Complete the details as follows: User Details: Username: First Name: Last Name: Password: Con rm Password: Role(s): Time Zone: Status: Employee Details: Organization: Department: Head of Department (HOD)? Grade ABC Co. Personnel Department No Clerical Brad Brad Fritz password password User
(GMT +08:00) Beijing, Hong Kong, Perth, Kuala Lumpur, Singapore, Taipei

Active

16

Figure 2-14. Viewing User Details

Figure 2-15. User Directory Page

17

Chapter 3

The Joget Walkabout

Designing Your First Process App
This chapter walks you through your rst Joget steps and shows you how to build a simple process app. To start designing apps, make sure that you are logged in to your web console. In the Home/Welcome Page: Go to Design Apps and click on Design New App in the drop-down menu.

Figure 3-1. Design New App

This will bring up the Design New App dialog box. Complete the App Details. For this example, enter leave_app in the App ID eld and Leave App in the App Name eld.

18

Figure 3-2. Design New App Dialog Box

Click on Save. The Design New App dialog box will close.

To publish this app, click on Not Published on the upper-left part of the page.

Figure 3-3. Publishing an App

Figure 3-4. Manage App Version Dialog Box

This will bring up the Manage App Version dialog box. Click on the radio button beside Version 1. Click on Publish.
19

 Click on OK when asked if you are sure that you want to publish the app. Click on the x button found on the upper-right corner of the Manage App Version dialog box to close it. You will now see Leave App in the Design Apps drop-down list.

Figure 3-5. List of Apps

Up and Going with Workflow Designer Jogets Work ow Designer visualizes work ow with a powerful drag-and-drop capability that
makes it even simpler to use. Go to Design Apps in the Home/Welcome Page. For this example, click on Leave App in the drop-down menu. Click on Launch Work ow Designer. This will start Work ow Designer.

Figure 3-6. Starting the Work ow Designer

You will see the Leave App package in the Navigator pane of Work ow Designer. You will also see that Work ow Designer has automatically added the process Work ow Process 1 under the Leave App package. Rename Work ow Process 1 and set its properties by following these steps: Right-click on Work ow Process 1. Select Properties in the popup menu. This will bring up the Work ow Process properties dialog box.
20

 For this example, type leaveApplicationProcess in the ID eld and Leave Application Process in the Name eld. Set Hour as Duration unit. Click on OK to close the dialog box.

Figure 3-7. Work ow Process Properties Dialog Box

To manually add a process, right-click on Leave App then select New Process in the pop-up menu. Or, click on Process in the Work ow Designer menu bar and then select Insert New Process in the pop-up menu. There are a couple of other ways to access the Work ow Process properties dialog box: 1. By clicking on Work ow Process 1 > Edit (in the menu bar) > Properties (in the pop-up menu) 2. By double-clicking on Work ow Process 1 and then selecting Properties in the pop-up menu

Adding Participants to a Process Notice that Joget automatically adds Participant 1 for you when you insert a new process under the Leave App package. You can add other participants by dragging and dropping the Participant element icon found in the Element menu to an empty part in the design pane. You will see a swimlane added after each drag-and-drop.

Figure 3-8. Swimlane

21

Swimlanes represent participants and other types of information in a process ow. For this example, we will have 3 participants.

You can organize your process elements by dragging them to where you want them to be in the swimlane(s). Point your mouse on the element, click and hold it, then drag and drop the element to where it should belong.

Setting Participant Properties Heres how you set Participant properties: Right-click on Participant 1. Select Properties in the pop-up menu. This will bring up the Participant properties dialog box.

Figure 3-9. Setting Participant Properties

For this example, type applicant in the ID eld and Applicant in the Name eld. Click on the radio button to set participant type to Participant.

22

Figure 3-10. Participant Properties Dialog Box

Click on OK. This will close the dialog box. Repeat the same steps for Participant 2, using the following: ID eld: Name eld: Type: approver Approver Participant

We have one more participant to add and it will be a system-type participant. System-type participants perform automated tasks such as sending emails. Add Participant 3 and follow these steps to set its properties: Right-click on Participant 3. Select Properties in the pop-up menu. This will bring up the Participant properties dialog box. For this example, type system in the ID eld and System in the Name eld. Click on the radio button to set participant type to System.

Figure 3-11. Setting Participant Properties

23

 Click on OK. This will close the dialog box.

Figure 3-12. System Participant Added

Adding Activities to Swimlanes Activities are actions that participants perform. They are tasks that need human input.

Figure 3-13. Activity Element

To add our rst activity in the Leave Application Process, drag the Activity element icon in the Element menu to an empty part in the Applicant swimlane.

24

Figure 3-14. Adding an Activity Element in the Swimlane

To set Activity properties: Double-click on the Activity element that you added. This will bring up the Activity properties dialog box. Type submit_completed_leave_application_form in the ID eld. Type Submit completed leave application form in the Name eld.

Figure 3-15. Activity Properties Dialog Box

Click on OK. This will close the Activity properties dialog box. Well add our second activity and this time around, it will be for the Approver. Drag the Activity element icon in the Element menu to an empty part in the Applicant swimlane. Set the Activity properties as follows: ID: approve_leave
25

Name:

Approve leave

Dont forget to click on OK to close the Activity properties dialog box. Adding Tools to System-type Participants We use the Tool element instead of the Activity element when the activity to be added is an automated task and the participant is a system. Automated tasks such as sending emails do not require human input. To add a tool, drag the Tool element icon in the Element menu to an empty part in the System swimlane.

Figure 3-16. Adding a Tool Element

To set Tool properties: Double-click on the Tool element in the System swimlane. This will bring up the Tool properties dialog box. Type email_approval_noti cation in the ID eld. Type Email approval noti cation in the Name eld. Click on OK. This will close the Tool properties dialog box. Repeat the same steps using: ID: Name: email_rejection_noti cation Email rejection noti cation

26

Figure 3-17. Tools Added in the System Swimlane

Adding Transitions Transitions connect work ow elements together and show the order by which activities are performed from start to end.

Figure 3-18. Transition Element Icon

Look at our example process and connect the rst activity to the second activity by adding a transition. Heres how: Click on the Transition element icon in the Element menu. Click on the Submit completed leave application form activity in the Applicant swimlane. Click on the Approve leave activity in the Approver swimlane. RIght-click on any empty space to stop adding transitions.

27

Figure 3-19. Transition Added to Connect Activity 1 to Activity 2

Adding Routes Routes are points in the work ow where decisions are made based on existing rules and standards.

Figure 3-20. Route Element Icon

For this example, we will add a route to the Approver swimlane to show that a decision has to be made by the approver of the leave application before the next action can be determined. Click and hold the Route element icon in the Element menu before dragging it to the Approver swimlane and arranging it under the Approve leave activity element.

28

Figure 3-21. Adding a Route Element

Add a transition to connect the Approve leave activity to the route.

Figure 3-22. Connecting Activity to Route by Adding a Transition

Figuring Out Where to Go Next Now that we know theres a decision to be made when the process reaches the Approve leave activity, there are a few things that we need to do: Add missing transitions to connect the rest of the elements in the work ow design. Refer to Adding Transitions to connect the remaining elements like this:

29

Figure 3-23. Activities with Route and Transitions

You can reposition an element in the design pane by dragging it to where you want it to be.

De ne the route type to determine how the process will ow once a decision is made. Heres how you do it: Double-click on the route element; this will bring up the properties dialog box.

Figure 3-24. De ning Route Type

30

 Make sure that Split type is set to Xor, which means that: (1) the leave request may be approved and if it does, an approval noti cation will be emailed to the applicant; OR (2) the leave request may be rejected and if it does, a rejection noti cation will be emailed instead. Click on the x button found on the upper-left corner of the dialog box to close it.

Figure 3-25. Closing the Dialog Box

De ne route conditions. Route conditions depend on what we call the business rules of the organization.

Follow these steps to set the 1st route condition: Double-click on the transition connecting the route to the Email approval noti cation tool. This will bring up the Transition properties dialog box.

Figure 3-26. Transition Connecting Route to Email Approval Noti cation Tool

Select Condition from the Type list.

31

Figure 3-27. Setting Transition Type

Type status=='Approved' in the Expression text area.

Figure 3-28. Stating the Expression

Click on OK. The Transition properties dialog box will close. Double-click on Leave Application Process in the Navigator pane. This will bring up the Work ow Process properties dialog box. Click on the Create new element icon found under SLA Limit > Work ow variables.

32

Figure 3-29. Create New Element Icon in the Work ow Process Properties Dialog Box

This will bring up the Work ow Variable properties dialog box. Type status in the ID text eld.

Figure 3-30. Work ow Variable Dialog Box

Click on OK. This will close the Work ow Variable properties dialog box.

Moving the mouse over the element icons under SLA Limit > Work ow variables in the Work ow Process properties dialog box brings up text that tells you what the icons stand for.

Follow these steps to set the 2nd route condition: Double-click on the transition connecting the route to the Email rejection noti cation tool. This will bring up the Transition properties dialog box.
33

 Select Otherwise from the Type list.

Figure 3-31. Setting Type to Otherwise

Type Otherwise in the Name eld.

Figure 3-32. Giving the Transition a Name

Click on OK. The Transition properties dialog box will close.

Figure 3-33. Connecting the Route to the Tools

34

Adding and Removing Start and End Bubbles There are two ways by which you can add Start and End bubbles to the work ow design to show where the process starts and ends: The tool bar of Work ow Designer includes icons that you can click on to Insert Missing Start and End Bubbles and to Remove Start and End Bubbles. When using this tool, Work ow Designer automatically detects the start and end points of the process, then adds the bubbles and transitions for you.

Figure 3-34. Work ow Designer Tool Bar

The Element menu also has Start and End element icons to represent the start and end points of the process. Just drag them to where the start and end points are in the process, them connect the elements together using transitions.

Figure 3-35. Start Bubble

Figure 3-36. End Bubble

Adding start and end bubbles to the process completes the workflow design and readies it for deployment.

35

Figure 3-37. Completed Leave App Work ow Design

You can delete work ow design elements by right-clicking on the element that you want to trash, then clicking on Delete in the resulting pop-up menu.

Figure 3-38. Deleting an Element

36

Chapter 4

Joget at Work
You cant view a process in the web console without having deployed it rst from the Work ow Designer. Remember that data created in the designer has to be transferred to the web console. To deploy a process: Click on Deploy found at the bottom of the Process Guide pane. Click on OK in the Deploy Successful! message box. This will close Work ow Designer.

Figure 4-1. Deploy Button

Mapping Participants to Users

In Chapter 2, we created users as a nishing touch to setting up our organization chart. We will now map those users to our participants for the purpose of de ning their roles. Well start with Approver. Keep in mind that the approver should be the applicants HOD (Head of Department). Participant Mapping for Approver: Click on Add/Edit Mapping found along Approver in the list of participants. This will bring up the Map Participants to Users dialog box.

37

Figure 4-2. Mapping Approver to User

Click on Map to User or Group. Click on Map to User. Select ABC Co. in the Filter By Organization drop-down list. Check the box beside Jane.

Figure 4-3. Mapping Approver to Jane Hill

Click on Map to Org Chart. Click on Map to the Performer. Click on the Performers HOD radio button to select it. Select Submit completed leave application form from the Where the performer executed drop-down list.

38

Figure 4-4. Mapping Approver to Organization Chart

Click on Submit. This will bring up a con rmation box. Click on OK to con rm. Participant Mapping for Applicant: Click on Add/Edit Mapping found along Applicant in the list of participants. This will bring up the Map Participants to Users dialog box. Click on Map to User or Group. Click on Map to User. Select ABC Co. in the Filter By Organization drop-down list. Check the box beside Brad.

Figure 4-5. Mapping Applicant to Brad Fritz

Click on Map to Org Chart. Click on Map to the Performer. Click on the Performer radio button to select it.
39

 Select Run Process from the Where the performer executed drop-down list.

Figure 4-6. Mapping Applicant to Organization Chart

Click on Submit. This will bring up a con rmation box. Click on OK to con rm.

Mapping Activities to Forms

You need to have your forms ready rst before you can map activities to them. Hop to Chapter 5 to design the Leave Application and Leave Approval forms.

Once your forms are ready, follow these steps to begin mapping them. Make sure that you are on the Leave App management page of your web console. Click on Map Activities to Forms. You will see a list of the work ow design activities.

Figure 4-7. Mapping Activities to Forms

Click on Add/Edit Form along Submit completed leave application form. In the resulting window, click on Map to a Form.

40

Figure 4-8. Selecting a Form to Map to Submit completed leave application form Activity

Click on Leave Application Form. This will close the window. Repeat the same steps to map Approve leave to Leave Approval Form.

Figure 4-9. Activities Mapped to Forms

Mapping Tools to Plugins

In our example Leave App, we will need the Email Tool plugin so that emails can be sent automatically to the leave applicant after a decision is made. To map the Email approval noti cation tool to an Email Tool plugin, go to Processes > Map Tools to Plugins in the Leave App management page of your web console.

41

Figure 4-10. Mapping Tools to Plugins

Then follow these steps: Click on Add/Edit Plugin along the Email approval noti cation tool under the list of tools de ned in the work ow design. This will bring up the plugin list.

Figure 4-11. Plugin List

Click on Email Tool in the plugin list. This will bring up the Plugin Con guration dialog box.

42

Figure 4-12. Con gure Email Tool

Type mailserver in the SMTP Host eld. Type 25 in the SMTP Port eld. Click on Next. Type email@domain in the From eld. Type #performer.runProcess.email# in the To (Speci c email address) eld.

Figure 4-13. Type Email Details

Click on Submit. The Plugin Con guration dialog box will close. Repeat the same steps for the Email rejection noti cation tool.

43

Figure 4-14. Tools Mapped to Email Tool Plugin

44

Chapter 5

Designing Web Forms with Form Builder

Building the Foundation of Databases
Jogets Form Builder is the answer to your work ow data collection needs. It lets you design online forms using a simple drag-and-drop interface and set them up so that information is routed to the right people in your organization. All these without having to write a single line of code! Before we start designing the forms we need for our sample Leave App, lets take a look at the basic elements that make up this Form Builder.

Basic Elements of Form Builder

So many features, so little time! Form Builder is pretty hefty on good stu that we just dont want you to be overwhelmed with at this point. Lets take a peek at the basic elements instead and see how we can use them to build the simple forms we need for this books Leave App exercise. Hidden Field a text eld that is not shown in the form but is used for setting values that are also submitted when the form is submitted Text Field a space where you can type in one line of text Password Field a text eld that shows text as dots on the screen to prevent other people from reading it Text Area a text eld where you can type in many lines of text SelectBox also known as a drop-down or pull-down list; it contains predesignated options for you to choose from. CheckBox a box that you can check/tick to select one or more items from a set of options Radio a round area that you can click on to select an option. Unlike check boxes that allow multiple selections, radios limit you to only one. Date Picker a display that allows you to choose a calendar date File Upload allows you to choose a le and transfer it to the Joget server; also known as http upload Sub Form a form that is inserted in another form
45

Grid a framework of spaces that contains organized and related data

Designing a Simple Form

For this example, we will work on two forms: the Leave Application Form and Leave Approval Form. Launching the Form Builder Click on Forms in the left sidebar of the web console.
Make sure that your are in the Leave App management page of your web console.

Click on Create New Form. This will bring up the Create New Form dialog box. Complete Form Details: Form ID leaveApplicationForm Form Name Leave Application Form Table Name hr_leave

Figure 5-1. Create New Form Dialog Box

Click on Save to launch Form Builder. Start by Adding Form Elements We begin designing the Leave Application Form by dragging and dropping the form elements we require to the design pane. Form elements are found in the Element palette on the left of the Form Builder.
46

Notice that Form Builder automatically adds a section when it opens for the rst time.

Figure 5-2. Form Builder automatically adds a Section when opened for the rst time.

Follow these steps to rename Section: Move your mouse anywhere in the section area in the design pane. You will see 4 buttons pop up --- Add Section, Add Column, Edit Section and Delete Section.

Figure 5-3. In the Section element, you can add, edit and delete a section, and you can add a column, too.

47

 Click on Edit Section to bring up the property editor.

Figure 5-4. Edit Section Button

Type Leave Application in the Label eld.

Figure 5-5. Section Property Editor

Click on OK. This will close the property editor. Add a Text Field Element Drag Text Field from the Element palette to the design pane. Move your mouse anywhere near Text Field. You will see 2 buttons pop up --Edit and Delete. Click on Edit to bring up the property editor.

Figure 5-6. Text Field Edit Button

Type name in the ID eld. Type Name in the Label eld. Click on Next.
48

Figure 5-7. Text Field Property Editor

Select Default Validator from the Validator drop-down list. Click on Next. Youll see a check mark beside Mandatory in the Con gure Validator window.

Figure 5-8. Validator Drop-down List

Figure 5-9. Mandatory Check Box

Click on OK. This will close the property editor.

Exploring the Text Field Property Editor

ID a set of characters that is explicitly linked to the Label tag. IDs are unique within a form. Label the name that you assign to the text eld Value the text that is automatically displayed in the text eld; you can use, for example, Enter. If there is no speci ed value, then you will see a blank eld. Max Length speci es the maximum number of characters (letters, numbers and symbols) that can be typed in the eld. This is to ensure that the form user does not type in more than what can be displayed. Size determines how many visible characters the eld can have. By visible we mean that which can be displayed and can be seen by the form user. Readonly prevents form users from making changes to the element. Display eld as label when readonly? displays the value of the text eld as plain text when the element is set to Readonly.

49

Figure 5-10. Edit Text Field

Validator checks and ensures that the form user has typed the required information in the text eld for the form to be completed and before it is allowed to be submitted.

Figure 5-11. Choose Validator

Mandatory means that the form user needs to complete the eld to be able to successfully submit the form.

50

 Type is the format or pattern that a form user should follow when entering text in the text eld, for validation purposes. The Type list includes Alphabet, Alphanumeric, Numeric, Email and Custom Regular Expression. Custom Regular Expression the format that you select if preferred Type is not Alphabet, Alphanumeric, Numeric or Email and you want to specify your own Custom Error Message Shown When Validation Fails the message displayed when a form user entered text that does not follow the selected Type or custom regular expression

Figure 5-12. Con gure Validator

Add a Date Picker Element Drag Date Picker from the Element palette to the design pane. Move your mouse anywhere near Date Picker. You will see 2 buttons pop up --Edit and Delete. Click on Edit to bring up the property editor.

Figure 5-13. Adding a Date Picker

51

 Type startDate in the ID eld. Type Start Date in the Label eld. Click on Next.

Figure 5-14. Edit Date Picker

Select Default Validator in the Validator drop-down list.

Figure 5-15. Choose Validator

Click on Next. Youll see a check mark beside Mandatory in the Con gure Validator window.

52

Figure 5-16. Con gure Validator

Click on OK. This will close the property editor. Follow the same steps to add another Date Picker element using endDate as ID and End Date as Label.

Exploring the Date Picker Property Editor

ID is a set of characters that is explicitly linked to the Label tag. IDs are unique within a form. Label the name that you assign to the date picker eld Value the text that is automatically displayed in the date picker eld; you can use, for example, Select. If there is no speci ed value, then you will see a blank eld. Format lets you display date feedback in dierent ways, for example dd/mm/yy and yy-mm-dd. Date Picker Year Range controls which years are shown in the date picker. Readonly prevents form users from making changes to the element. Display eld as label when readonly? displays the value of the date picker as plain text when the element is set to Readonly. Validator checks and ensures that the form user has selected a date in the date picker for the form to be completed. Mandatory means that the form user needs to choose a date to be able to successfully submit the form. Custom Regular Expression the format that you select if preferred Type is not Alphabet, Alphanumeric, Numeric or Email and you want to specify your own Custom Error Message Shown When Validation Fails the message displayed when a form user does not follow the selected Type or custom regular expression Add a Text Area Drag Text Area from the Element palette to the design pane. Move your mouse anywhere near Text Area. You will see 2 buttons pop up --Edit and Delete.
53

 Click on Edit to bring up the property editor.

Figure 5-17. Add Text Area

Type reason in the ID eld. Type Reason in the Label eld. Click on Next.

Figure 5-18. Edit Text Area

Select Default Validator from the Validator drop-down list.

54

Figure 5-19. Choose Validator

Click on Next. Youll see a check mark beside Mandatory in the Con gure Validator window. Click on OK. This will close the property editor.

Figure 5-20. Con gure Validator

Exploring the Text Area Property Editor

ID is a set of characters that is explicitly linked to the Label tag. IDs are unique within a form. Label the name that you assign to the text area Value the text that is automatically displayed in the text area; you can use, for example, Enter. If there is no speci ed value, then you will see a blank area. Cols speci es how many columns you want in the text area.
55

 Rows speci es how many rows you want in the text area. Readonly prevents form users from making changes to the element. Display eld as label when readonly? displays the value of the text area as plain text when the element is set to Readonly. Validator checks and ensures that the form user has typed the required information in the text area for the form to be completed and before it is allowed to be submitted. Mandatory means that the form user needs to complete the eld to be able to successfully submit the form. Type is the format or pattern that a form user should follow when entering text in the text area, for validation purposes. The Type list includes Alphabet, Alphanumeric, Numeric, Email and Custom Regular Expression. Custom Regular Expression the format that you select if preferred Type is not Alphabet, Alphanumeric, Numeric or Email and you want to specify your own Custom Error Message Shown When Validation Fails the message displayed when a form user entered text that does not follow the selected Type or custom regular expression When you have nished adding all the form elements that you need, click on Preview in the Form Builder menu to see how the form looks like. To save the form, click on Save. This is how your Leave Application Form should look like:

Figure 5-21. Leave Application Form

Lets create another form!

To begin designing the Leave Approval Form, click on Create New Form again and type the following under Form Details: Form ID leaveApprovalForm Form Name Leave Approval Form Table Name hr_leave Click on Save to launch Form Builder.
56

Follow these steps to rename Section: Move your mouse anywhere in the section area in the design pane. You will see 5 buttons pop up --- Add Section, Add Column, Edit Section, Delete Section and Edit Column. Click on Edit Section to bring up the property editor. Type Leave Approval in the Label eld. Click on OK. This will close the property editor. Add a SubForm Element Drag SubForm from the Element palette to the design pane. Move your mouse anywhere near SubForm. You will see 2 buttons pop up --Edit and Delete. Click on Edit to bring up the property editor. Type leaveApplication in the ID eld. Leave the Label eld blank. Select Leave Application Form in the Form drop-down list. Tick the Readonly checkbox. Click on Choose Load Binder in the Edit SubForm menu.

Figure 5-22. Edit Subform

Select Work ow Form Binder in the Load Binder drop-down list. Click on Next.

57

Figure 5-23. Choose Load Binder

Select Work ow Form Binder in the Store Binder drop-down list.

Figure 5-24. Choose Store Binder

Click on OK. This will close the property editor. We will now add another Section to the form. Remember the 5 buttons that pop up whenever you move your mouse anywhere near Section in the design pane? Go back there and click on the Add Section button to add our second section.

Figure 5-25. Adding Another Section

Then click on Edit Section to bring up the property editor. Type Approver Action in the Label eld, then click on OK to close the property editor.

58

Figure 5-26. Edit Section

Add a SelectBox Element Drag SelectBox from the Element palette to the design pane in the Approver Action section. Move your mouse anywhere near SelectBox. You will see 2 buttons pop up --Edit and Delete. Click on Edit to bring up the property editor. Type status in the ID eld. Type Status in the Label eld. Add 3 rows to the Options table by clicking on the + button thrice. Complete Value and Label for the 3 rows, like this:

Figure 5-27. Edit Select Box

59

The Value column in the Options table contains the value of the work ow variable status that we had set earlier in Work ow Designer. Type it the way it is typed in the Transition property dialog box, without the single quotation marks.

Figure 5-28. Work ow Designer Transition Settings

Click on Choose Validator in the property editor menu.

Figure 5-29. Choose Validator

Select Default Validator from the Validator drop-down list.

Figure 5-30. Select Default Validator

Click on Next. You will see a check mark in the Mandatory checkbox.

60

Figure 5-31. Con gure Validator

Click on Next. Type status in the Work ow Variable eld.

Figure 5-32. Select Box Work ow Variable

Click on OK. The property editor will close. Add a Text Area Drag Text Area from the Element palette to the design pane, under the Status select box in the Approver Action section. Move your mouse anywhere near Text Area. You will see 2 buttons pop up --Edit and Delete. Click on Edit to bring up the property editor. Type remarks in the ID eld. Type Approver Remarks in the Label eld. The column number is automatically set to 20 and the row to 5.

Figure 5-33. Text Area Property Editor

Click on OK. This will close the property editor.

61

To save the form, click on Save in the Form Builder menu and then click on OK to con rm.

Figure 5-34. Leave Approval Form

Close Form Builder and return to the app management page in your web console to begin mapping activities to forms. Refer to Chapter 4 for a step-by-step guide on Mapping Activities to Forms.

62

Chapter 6

Using the Datalist Builder

Create Datalists the Way You Want to See Them
Joget Work ows Form Builder, Datalist Builder and Userview Builder share a lot of the basic interface. You drag and drop elements from the Element palette to the design pane to create the layout and to add tools for performing speci c tasks. You set properties using property editors. You preview. You save. In Datalist Builder, you can enter data in rows and columns by linking a form to the list. The list is then updated progressively each time the form is completed.

Creating a Datalist
For this example, we will build a datalist by linking it to the Leave Application Form that we created in the previous chapter. Make sure that you are in the Leave App management page of your web console before you begin. Click on Lists in the sidebar of the Leave App management page. Click on Create New Datalist.

Figure 6-1. Create New Datalist

Under Datalist Details, type leaveApplicationList in the ID eld. Type Leave Application List in the Name eld.

63

Figure 6-2. Entering Datalist Details

Click on Save. This will start the Datalist Builder and bring up the Select Binder window. Selecting a Form to Link to the Datalist For a datalist to know where to fetch information from, you have to specify which form you would like it to take the data from. In other words, assign a binder.

Under Select Binder, select Form Data Binder in the Select Source of Data (Binder) list.

Figure 6-3. Selecting the Source of Data

64

 Click on Next. Select Leave Application Form in the Form list under the Select Form tab.

Figure 6-4. Selecting a Form

Click on OK. This will launch the Datalist Builder. Datalist Builder includes tools that let you add columns, define filters and specify actions.

Lets begin with columns.

Adding Columns to the Layout In Datalist Builder, you will see that the Element palette contains Columns/Filters as well as Actions, and that column/ lter elements are taken from the table (hr_leave) that we assigned to the Leave Application Form when we were in Form Builder (Chapter 5). Lets add 3 columns to our Leave Application List by dragging the following from the Columns/Filters element palette to the design pane where it says Drag Columns Here: Name Start Date End Date

65

Figure 6-5. Columns Added

A table can have more than one form assigned to it. In our Leave App example, table hr_leave has 2 forms assigned to it --- the Leave Application Form and Leave Approval Form. Columns/Filters items that are written in regular text are eld names taken from the selected form. In this example, the selected form is Leave Application Form. Columns/Filters items that are written in italicized text are items that are in the table assigned to the form, but not in the form itself. You can rearrange columns with a simple drag-and-drop move.

De ning Column Properties If you point your mouse over the column names, you will see the Properties and Delete buttons pop up.

Figure 6-6. Column Properties and Delete Buttons

Follow these steps for each of the column names (Name, Start Date, End Date):
66

 Click on Properties to bring up the Property Editor. Change the name in the Label eld if you wish to another name to be displayed. Set Sortable to Yes.

Figure 6-7. Column Property Editor

Click on OK to close the property editor. Adding Actions An action allows you to link a datalist item to a prede ned action, script or executable.

There are 2 types of datalist actions: Hyperlink Delete Follow these steps to add a Hyperlink action and set its properties:

67

 Drag Hyperlink from the Element palette to the design pane where it says Drag Row Actions Here.

Figure 6-8. Adding a Hyperlink Action

If you point your mouse over Hyperlink, you will see the Edit and Delete buttons pop up. Click on Edit. This will bring up the property editor where you can con gure the link.

Figure 6-9. Hyperlink Edit Button

Type application_new in the Hyperlink eld.

In the next chapter, we will build a userview using Jogets Userview Builder. You will see then that the hyperlink application_new points to a new leave application le or form. More on this in our Userview Builder chapter.

Set Hyperlink Target to Current Window.

68

 Type id as Column Name. This column is the column that pertains to the value given in the Hyperlink Parameter Name. Type New Application in the Label eld. Label is the row action name that the column displays.

Figure 6-10. Hyperlink Action Property Editor

Click on OK. The property editor will close.

69

Delete Action Explained The Delete action allows you to erase the database record of a matching record ID. You set its properties by completing these elds in the property editor: Label is the row action that the column displays. Form ID is the form table that will perform the delete action. Con rmation Message is the veri cation message displayed before deleting the record. Setting Filters These are the types of lters you can use when building a datalist: Text Field Filter lets you type a search criteria when you want to look for information. For this example, drag Name from the Element palette to the design pane where it says Drag Filters Here.

Figure 6-11. Adding a Text Field Filter

Then follow these steps to set the lter properties: Point your mouse over Name; you will see the Edit and Delete buttons pop up.

Figure 6-12. Text Field Filter Edit Button

70

 Click on Edit. This will bring up the property editor where youll see name in the Name eld and Name in the Label eld. Youll also see that Text Field is automatically selected for you in the Type list. Text Field is the default lter.

Figure 6-13. Con guring Text Field Filter Properties

Click on OK. The property editor will close. Select Box Filter lets you nd information based on a selection. For this example, add status to the design pane the same way you added the Name text eld lter. Set the lter properties by clicking on the Edit button to bring up the property editor. Youll see status in the Name eld. Change status in the Label eld to All Status. Select Select Box in the Type list.

Figure 6-14. Select Box Filter in Type Drop-down List

Click on Next to con gure the select box lter. Leave the Multiple Selection check box and the Size and Default Value elds blank. In the Options table, add 2 rows by clicking on the + button twice. Then, type the values and labels as follows:
71

Figure 6-15. Select Box Filter Property Editor

Click on OK to close the property editor. Remember to preview your datalist before saving it.

Figure 6-16. Completed Leave Application List

72

Chapter 7

Putting It All Together with Userview Builder

Building User Interfaces
Userview, also known as front-end or user interface, wraps your apps processes, forms and datalists. It plays a crucial role in determining how easily a user can make your app do the work you built it to do. Joget Work ows Userview Builder does not only let you build a user interface. It also lets you build a full- edged process app without having to diagram a work ow in Work ow Designer or write a single programming code! It comes with preloaded themes and, for the more adventurous, the ability to customize themes. It provides tools for organizing tasks in hierarchical structure to make completing processes easier and more manageable.

Key Areas of Userview Builder

Before we start lling our userview, heres a look-see of the Userview Builder interface and its features. Quick Selector lets you switch easily between forms, lists and userviews. Main Menu contains tasks and options to guide you through your design. Element Palette contains tools for adding content. Design Pane is the space where you drag and drop elements when building userviews.

Your Userview Builder Toolbox

Form allows users to interact with other app users through the use of forms. HTML Page allows you to design what is called the front page, landing page, home page or starting point of a userview.

Inbox stores incoming and pending tasks. Link lets a user open another document from within the userview itself.
73

List allows a datalist to be integrated in userview. Run Process provides a means for a process instance to be started from within the userview.

Building a Userview
We will now build a basic userview for our sample Leave App. Make sure that you are in the Leave App management page of your web console. Create New Userview Click on Userview in the left sidebar, then click on Create New Userview.

Figure 7-1. Create New Userview

In the Create New Userview dialog box, complete Userview Details as follows: ID: leavePortal Name: Leave Portal

74

Figure 7-2. Completing the Userview Details

Click on Save. This will launch Userview Builder. Add a New Category Put your mouse over Menu in the design pane; youll see the Add Category button pop up. Click on it to add a category.

Figure 7-3. Add Category Button

Put your mouse over New Category; youll see the Edit Label, Permission and Delete Category buttons pop up. Click on Edit Label.

75

Figure 7-4. Changing the New Category Name

Type Main in place of New Category.

You can click anywhere in the design pane or press the Enter key on your keyboard to close the Edit Label box.

Add an HTML Page Drag HTML Page from the Element palette to the design pane, under Main.

Figure 7-5. Adding an HTML Page

76

Userview always loads the rst item under Menu. For our sample Leave Portal, the rst item is an HTML page which will serve as the userview landing page.

Put your mouse over HTML Page; youll see the Properties and Delete Menu buttons pop up. Click on Properties to bring up the Edit HTML Page dialog box.

Figure 7-6. HTML Page Properties Button

Complete the elds as follows: Custom ID: home Label: Home Content pane: Welcome to the Leave Portal.

Figure 7-7. Editing the HTML Page

Click on OK to close the Edit HTML Page dialog box. Add an Inbox Add another new category by clicking on the Add Category button found along Menu.
77

 Edit the New Category label by clicking on the Edit Label button found along New Category and typing Leave Applications in place of New Category. Drag Inbox from the Element palette to the design pane, under Leave Applications. Put your mouse over Inbox; youll see the Properties and Delete Menu buttons pop up. Click on Properties to bring up the Edit Inbox dialog box. Complete the elds as follows: Custom ID: inbox Label: Inbox Select All Assignments in the Assignments to Display list. Select Leave Application Process in the Process list.

Figure 7-8. Setting Inbox Properties

Click on OK. The Edit Inbox dialog box will close. Add a Form Drag Form from the Element palette to the design pane, under Leave Applications. Put your mouse over Form; youll see the Properties and Delete Menu buttons pop up. Click on Properties to bring up the Edit Form dialog box. Complete the elds as follows: Custom ID: application_new Label: New Application Select Leave Application Form in the Form list. Leave Show in popup dialog?, Readonly? and Display eld as Label when readonly? boxes unchecked.

78

Figure 7-9. Edit Form Dialog Box

Click on Next. Under Redirection, complete the elds as follows: Message Shown After Form Submission: Application updated. URL Redirect After Form Submission: application_list URL Redirect on Cancellation: application_list Select Top Window in the Redirect Target on Cancellation list. Select Append to URL in the Field Value Passover Method list.

Figure 7-10. Redirection

Click on OK. The dialog box will close.

79

Add a List Drag List from the Element palette to the design pane, under Leave Applications. Put your mouse over List; youll see the Properties and Delete Menu buttons pop up. Click on Properties to bring up the Edit List dialog box. Complete the elds as follows: Custom ID: application_list Label: Application List Select Leave Application List in the List list. Click on Next.

Figure 7-11. Editing the Application List

Under UI, set the following: Put a check mark in the Show Number of Rows in Menu box. Button Position: Bottom Left Selection Type: Multiple Selector Position: Left Click on OK. The Edit List dialog box will close.

80

Figure 7-12. Con guring the UI

Add a Run Process Element Drag Run Process from the Element palette to the design pane, under Leave Applications. Put your mouse over Run Process; youll see the Properties and Delete Menu buttons pop up. Click on Properties to bring up the Edit Run Process dialog box. Complete the elds as follows: Custom ID: leaveProcess Label: Apply Leave Select Leave Application Process in the Process list. Leave Run process without con rmation screen? and Show in popup dialog? boxes unchecked.

Figure 7-13. Editing the Run Process Element

81

 Click on OK. The Edit Run Process dialog box will close. Set Userview Theme Click on Setting in the main menu of Userview Builder.

Figure 7-14. Theme & Permission Settings Tab

Select a theme in the Theme list.

Figure 7-15. Theme Drop-down List

Click on OK.

Figure 7-16. Preview of Userview

Remember to preview and then save your userview before closing the Userview Builder. 82

Chapter 8

Test-Drive Your Process

This is the part where you roll up your sleeves and test-drive your rst app.
Before you test your process, make sure that you have assigned your users passwords. If you have not done so, follow these steps:

Go to Setup Users.

Select ABC Co. in the Filter By Organization drop-down list and click on Brad.

Click on Edit User.

Assign a password and con rm by re-typing it in the Con rm Password text eld before clicking on Save. Repeat the same steps for Jane.

Lets Run the Process!

As Brad is our applicant, you can begin to run the process by logging out of the admin web console then logging in as Brad. Make sure that you enter the correct password. Go to Run Apps then click on Published Processes in the drop-down list.

83

Figure 8-1. Run Apps

Click on the Launch button for Leave App under Published Processes.

Figure 8-2. Published Processes

Click on Run Process to con rm that you want to run the process.

Figure 8-3. Run Process Con rmation Box

Complete the Leave Application and then submit it by clicking on Complete. To submit later, click on Save as Draft.

84

Figure 8-4. Submit Completed Leave Application Form

The calendar widget enables a user to select dates when using the Date Picker element. Click on the calendar icon to expand it.

Remember that an asterisk (*) denotes a required eld.

Brads HOD, Jane, will now have to approve his leave application. For Jane to attend to the process: Logout of Brads web console and login as Jane where you can check for tasks in her Inbox.

Figure 8-5. Janes Inbox and Pending Task

Click on the activity name Approve Leave to open the task. This will bring up the Leave Approval Form.

85

Figure 8-6. Leave Approval Form

Complete the form by choosing Approved from the Status list and adding remarks (if any). Submit the form by clicking on Complete. Check if the routing worked correctly by logging out of Janes web console and logging in as Brad to check his Inbox. You should see Approved under Activity Name.

86

Chapter 9

Joget Places
Joget Workflow Community Knowledge Base is
a collection of useful information about Joget Work ow. Youll nd it at http://dev.joget.org/community/

display/KB/Joget+Workflow+Community+Knowledge +Base where you can sign up to be a member in order to

browse and contribute tips and relevant know-how. You can also visit the Forum to watch or join discussions as members share Joget-relevant questions, answers, views and ideas. To join the Joget community: Click on Sign Up on the upper right portion of the page.

Figure 9-1. Joget Work ow Community Knowledge Base

Complete the Sign Up for Con uence form then click on the Sign up button to submit.

87

Figure 9-2. Sign Up for Con uence

Joget Marketplace oers a variety of plugins and ready-to-customize

process templates for your everyday business needs, in just a few mouse clicks. No bothersome steps and lengthy sales gabbing so you get your work done without delay! Visit http://marketplace.joget.org to nd out more.

Figure 9-3. Getting Started with Joget Marketplace

88

Joget Unplugged is where Jogetians share their insights on Joget Work ow. Follow them at blog.joget.org to keep abreast of the latest buzz.

Figure 9-4. Joget Unplugged

89

GLOSSARY
A activity a form-based action or task that a participant does AJAX (Asynchronous Javascript and XML) a term used when several technologies are used together allowing for quick updates without reloading the browser AJAX subform an AJAX form within a form app a program or software designed to accomplish a speci c purpose audit trail a record of information listed in a logical path linking a series of activities auto populate to automatically ll in with data B Bean Shell a free embeddable Java scripting language binder holds and keeps pieces of information synchronised so that when one is changed, the rest are automatically updated browser a graphical user interface for displaying and navigating webpages C calculation eld a form eld where arithmetic computations involving other elds can be done checkbox a clickable box found in graphical user interfaces and which is used to turn an option on or o child form a form found within a multi-paged form command an instruction to perform a speci c task command prompt a symbol on a display screen awaiting a command input command line the line on the display screen where a command is expected condition a situation that must exist before something else is possible or allowed CRUD (Create Read Update Delete) allows you to build and manage records in Userview CSS (Cascading Style Sheets) a feature added to HTML that determines how elements such as headers, footers and links are displayed CSV (Comma-separated Values) format used for representing data CSV import enables one to transfer bulk data from one le into a form table
90

D database a structured set of information datalist information displayed in list order datalist inbox inbox that contains form data data migration the process of putting data from one format to another datasource a name given to the connection set up to the database from a server date picker a drop-down calendar for selecting a date deadline limit the latest time or date by which an activity should be completed default a preselected option when no alternative is speci ed by the user default formatter allows you to apply standard formatting to objects, such as text department options binder enables a return of the list of departments based on the organisation deploy to put into action destination folder a user-speci ed folder to which the setup Joget Work ow program will be installed directory an organizational unit that contains les in hierarchical structure directory user someone who has access to the directory directory user form binder an option under Store Form Binder that allows you to create a user in the user directory with a form created in Form Builder duplicate value validator checks for and prevents identical values duration unit the measure of time during which something continues E element an entity that is a single member of a set element palette a range of elements available to the user end bubble indicates where the process nishes environment variable value given to a parameter or setting that is frequently or repeatedly used within the app

91

equal value validator allows you to verify that the values of two elds match before submitting a form exception a condition, often an error, which causes an activity to branch out to a new activity F eld a space allocated for a speci c information eld value passover method determines how a redirect URL is formed le upload allows one to attach a le to a form lter limits the criteria through which data is passed or sorted for a list foreign key a key (or key eld) that identi es records in a dierent table form a document with blank elds to be lled in (with data) Form Builder enables one to design forms with the use of a simple and guided interface formatter allows you to set the properties of an object, such as text, displayed on the computer screen form options binder allows you to ll in form data based on an organisation chart form selection dialog a window that appears on a display screen requesting for the user to choose a form front-end interface enables a user to communicate with and access other parts of a program G grid a series of vertical and horizontal blocks of spaces group users put together under the same functional role within an organization group options binder enables a return of the list of groups based on organisation H hash a unique numeric value commonly used for accessing data hash variable a hash that may take on more than one value during process execution (runtime) hidden eld a general HTML form input element that allows one to set values that are out of view host a remote computer system that contains the data being accessed by another remote computer connected to it by modems and telephone lines

92

HTML (HyperText Markup Language) a standardised system for creating text les to achieve font, colour, graphic and hyperlink eects on web pages hyperlink allows you to jump from the current document to another document on your computer, network or the Internet hyperlink action allows the user to create a hyperlink between documents or parts of a document hyperlink parameter name name of the parameter to be added at the end of the hyperlink hyperlink target the way or type of location where you want the hyperlink to open (ex: current window, new window) I ID generator eld used to create numbers that continue to run in sequence image upload used for attaching picture les to a form installer a specialised program that puts software on a computer J Jasper reports an open source Java reporting tool Jasper reports de nition (JRXML) source code for Jasper reports Java a general purpose programming language with several features that make it ideal for use on the World Wide Web JDBC (Java Database Connectivity) allows Java programs to access database management systems JDBC datalist database binder JSON (JavaScript Object Notation) a simple, language independent text le format for representing data K key a eld that you use to sort data (also called key eld or index) L launch to start a computer program LDAP (Lightweight Directory Acesss Protocol) an agreed format for transferring data between two devices Linux an open-source operating system
93

load binder where to copy and transfer data from locale a set of information speci c to a a given language and country or geographical location M mandatory required to be completed map to associate an element in a set with an element in another set MS SQL Server software whose main function is to keep and fetch data as required by other software applications multi row form binder enables one to save data taken from a series of vertical and horizontal blocks of spaces, into a table multi paged form allows one to build a single form containing several other forms multi select box allows one to choose several items at once from a list of options MySQL an open source relational database management system used for adding, removing, modifying and updating information in the database N O option a choice in a menu, dialog box, checkbox options binder used for lling in options Oracle a software company whose primary business is database products organisation options binder enables a return of the list of organisations P parameter a characteristic that de nes an element parent form the form to which a child form is linked participant a user or system that takes part in a process password a string of characters used for verifying the identity of a user password eld the space allocated for entering a password permission type determines which activities will be displayed under a user's Userview Activity placeholder similar to a dummy text which lls an empty eld until the real text is placed in plugin a software extension that adds capabilities to an app
94

popup select box allows one to choose from a datalist instead of the common horizontal menu that displays a list of options preview to view something for checking before it is made available process a series of interdependent activities taken to accomplish a desired result process deadline checker interval how often an activity is checked for completion properties attributes related to a a given data or data structure protocol a set of rules de ning a format publish an app to make an app's processes and userviews available to all users Q query a request for information from a database query language a specialised system for requesting information from a database R radio a small round area in a form that you can use to click to choose an option read-only capable of being displayed, but not modi ed or deleted redirect target the location or speci ed path after a form submission refNo (Reference No.) an example of an environment variable name relational database management system the most commonly used database format return to display the results of the searched information routing the process of directing information along a speci ed path from starting point (source) to target (destination) row actions allows one to associate a horizontal group of cells or boxes to an available prede ned task (such as Delete and Hyperlink) row validation ensures that data entered in a horizontal group of cells or boxes are correct S schema database system structure that de nes the behaviour of and the relationships between tables and elds script an automated series of instructions carried out in a speci c order server a computer that manages access to a centralised resource or service in a network
95

SLA (Service Level Agreement) limit agreed time limit for delivering a service or a solution to an incident SQL (Structured Query Language) a standard query language used by data management systems for retrieving and modifying information in a database SQL chart allows you to customise your own SQL query when making reports in the form of tables, graphs or diagrams SQL query enables one to create and run queries using SQL status the situation at a particular time during a process start bubble indicates where the process begins store binder the location for retaining or entering data for future retrieval sub ow a process within a process subform a form within a form suite a set of programs with a uniform design and the ability to share data T table data arranged and stored in rows and columns target a le or location to which data is copied or transferred TCP/IP a suite of communications protocols used to connect hosts in the Internet terminal window a display for entering data or commands and received output text area section used for text input in forms text eld space used for text input in forms thumbnail a small picture of an image or page layout that represents the larger original time zone an area where a common standard time is used tool a system-related activity transition the path between two elements, such as between two activities U universal inbox shows all queued tasks across the process app URL (Uniform Resource Locator) the address of a World Wide Web page
96

URL redirect the web page that will open after form submission URL redirect value passover the form eld value to be used as part of a URL redirect user one who is given a unique account to login and participate in the Joget process app UI (User Interface) the means by which a user and a computer system interact user options binder enables a return of the list of users based on organisation, department and group user pro le information about a user such as username, password and email address username a name used by a participant to gain access to a Joget process app userview front end interface [also "UI"] userview key serves as a placeholder for a common value to be used when setting the limits of contents to a certain category or attribute userview key name determines the form eld ID where the userview key value will be taken from V validation ensures that data entered is correct validator veri es that data entered falls within speci ed standards or conditions value the computer representation of a piece of information variable a data item that may take on more than one value during process execution (runtime) W wizard a help feature of a software package that automates complex tasks by asking the user a series of easy-to-answer questions work ow a series of processes through which an action passes from initiation (start) to completion ( nish) X XPDL (XML Process De nition Language) enables work ow management and business processes to exchange and use information Y Z zip a le that was compressed so that it takes less space in storage
97

98