Easy joget v3 for the absolute beginner

16,782 views
16,836 views

Published on

Absolute beginner's guide to Joget Workflow, a free open source app builder that allows you to create full-fledged 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 finding Joget Worklow essential and useful to their organization. Download Joget Workflow at http://joget.org.

Published in: Education, Technology
1 Comment
8 Likes
Statistics
Notes
No Downloads
Views
Total views
16,782
On SlideShare
0
From Embeds
0
Number of Embeds
611
Actions
Shares
0
Downloads
1,451
Comments
1
Likes
8
Embeds 0
No embeds

No notes for slide

Easy joget v3 for the absolute beginner

  1. 1. Easy J get v3for the absolute beginneri
  2. 2. ii
  3. 3. PreliminariesJoget Workflow is a free open source app builder that allows you tocreate full-fledged process apps from any computer with Internetconnection. Its simple drag-and drop wizards make designingforms, tables, processes and user interfaces (UI) easy as pie.More and more businesses looking for an easy-to-use yetpowerful complement to their groove are finding JogetWorkflow 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 theWorkflow Designer, Form Builder, Datalist Builder andUserview Builder. I’m guessing, though, that some of youmay not want to design workflows but would like it if youcould build process apps sans all the diagraming.Joget’s Userview Builder --- the jewel among Joget’s crownjewels --- sets you where the rubber meets the road. You’ll goggle at howeasily anyone can build apps using the Userview Builder, and with those apps,efficiently take care of all kinds of office work that are done repeatedly.iii
  4. 4. Joget Workflow Ecosystem Let’s take a look at what makes up Joget Workflow:This book provides handy information for you, the average Joe, whileyou build your first Joget Workflow process app. It does not discusswhat Joget can do in full-scale. Rather, it guides you through thefeatures that you can use to make your work processes flow as theyshould. This book comes clean and clear so you can move on withoutthe frustrating jargons and get your apps done. The contents areorganized in linear style, but you can always hop to any chapter thatyou feel you need to go to.Each time you don’t understand something, look for the topic under the table ofcontents or in the index page. For quick definitions on words that baffle you, turn to the glossaryat 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 defined are written in italics.iv
  5. 5. • ( > ) is used when showing selected commands in menus, for example, File > Openwhich means that you are being asked to click on the File menu and select the Opencommand.• Website addresses are written in monolith, like this: http://www.joget.org/download/.• Currently, Joget Workflow is available for both Windows and Linux. However, everythingin this book pertains to Joget on Windows.v
  6. 6. Table of ContentsChapter 1 Introducing Joget Workflow 1 - 9• Is Joget really that simple to use?• Choosing the Right Joget Workflow Edition• How do you start using Joget Workflow• Touring Joget• Workflow Designer• Form Builder• Datalist Builder• Userview Builder• Web ConsoleChapter 2 Setting Up the Organization Chart 10 - 17• Creating a New Organization• Adding Departments• Structuring Grades• Creating Users• Setting up User Details• Setting up Employee DetailsChapter 3 The Joget Walkabout 18 - 36• Designing Your First Process App• Up and Going with Workflow 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 BubblesChapter 4 Joget at Work 37 - 44• Mapping Participants to Users• Participant Mapping for Approver• Participant Mapping for Applicant• Mapping Activities to Forms• Mapping Tools to PluginsChapter 5 Designing Web Forms with Form Builder 45 - 62• 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 vi
  7. 7. • Exploring the Date Picker Property Editor• Add a Text Area• Exploring the Text Area Property Editor• Lets create another form!• Add a SubForm Element• Add a SelectBox Element• Add a Text AreaChapter 6 Using the Datalist Builder 63 - 72• Create Datalists the Way You Want to See Them• Creating a Datalist• Selecting a Form to Link to the Datalist• Lets begin with columns• Adding Columns to the Layout• Defining Column Properties• Adding Actions• Delete Action Explained• Setting FiltersChapter 7 Putting It All Together with Userview Builder 73 - 82• 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 ThemeChapter 8 Test-Drive Your Process 83 - 86• Lets Run the Process!Chapter 9 Joget Places 84 - 89• Joget Workflow Community Knowledge Base• Joget Marketplace• Joget UnpluggedGlossary 90 - 97vii
  8. 8. Chapter 1Introducing Joget WorkflowYoure in the office. You have work to finish but get little or no work done becausetheres still no reply to that approval request you sent last lunar eclipse. You are ajangle of nerves as you try to figure out whats gonna hit you first --- your deadlineor the Prophet of Doom.Joget Workflow (Joget, for short) is computer software that you can use to build anyprocess app based on what works and what doesnt, what you have and what youdont need to have in your business processes, without any web programming. The idea is toautomate office 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 aroundand wait for someone to complete them. Sometimes, the wrong person does something aboutthem. Other times, the right person does something wrong.What’s new in Joget v3.1.0? At the time of writing, v3.1.0 is the latest version. Witheach new version released, Joget Workflow has become more powerful and its featuresmore enriched. The upgrade to v3.1.0 is no different. 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 supportIs Joget really that simple to use? Joget was designed to be a no-fuss process appbuilder 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 theJoe three floors up who cruises along fine and dandy from day one.The reason could be a combination of factors, who knows? But youdefinitely dont have to be a tech person to use Joget effectively. Youjust have to start somewhere, like in everything else you master in life.My tip would be to explore. Don’t be afraid if you don’t know a lot atthe start; youll always learn something new along the way. You have this book, and there are ahost of other help topics at http://dev.joget.org/community/display/KB/Joget+Workflow+Community+Knowledge+Base that may help you find your way if you’ve gotten off-track.1
  9. 9. Figure 1-1. JogetWorkflowCommunityKnowledgeBaseNow Let’s Get Started!This part of the book shows you how to begin putting Joget to work and starts by walking youthrough a series of download, installation and basic getting-to-know-you steps.Choosing the Right Joget Workflow EditionJoget Workflow comes in two editions - Community and Enterprise. Eachis customized to cater to the needs of different types of organizations.• Community Edition - built for small organizations• Enterprise Edition - built for medium to large organizationsHow do you get Joget in one swoop?Open your web browser.Type http://www.joget.org/download/ in the address bar.Choose a Joget Workflow edition and click on Download.2
  10. 10. 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/3
  11. 11. Figure 1-4. http://www.joget.org/download/v3-enterprise-windows/Wait for your download to finish, then double-click on the setup file joget-setup-x.x.x.exe to launch the Joget Workflow Setup Wizard.The Joget Workflow Setup Wizard breezes you through these steps:• Click on Next in the Welcome page; you’ll see the License page.Figure 1-5. JogetWorkflowSetupWizard4
  12. 12. • Click on I Agree in the License page to accept the license; you’ll see the Componentspage.• Click on Next in the Components page. This will take you to the Installation page.• Click on Install to install Joget Workflow 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 first. Joget server is where all yourdata are kept as you build your process apps.Follow these steps to start the Joget server:• Go to Start Menu > Programs > Joget Workflow.• Click on the green Start Joget Server icon. A window displaying consecutive lines ofwhite text (or“commands”) on a black background will appear. That window is called acommand window.• Wait until the message "INFO: Server startup in XXXX ms" appears in the commandwindow. XXXX represents the time it has taken the server to start and may take a littlelonger than you expect.Do not close the command window.• Go to Start Menu > Programs > Joget Workflow.• Click on Web Console to access the Joget Workflow 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
  13. 13. • Type admin in the Username field.• Type admin in the Password field.• Click on Login. This will bring you to your web console Home/Welcome Page whereyou can get started. The main menu lets you:1. Setup Users2. Design Apps3. Run Apps4. Monitor AppsFigure 1-6. JogetWorkflowWebConsoleTouring Joget Now that you’ve got the full groundwork,here’s a quick tour of the key areas of Joget. The following are inter-related sections in Joget that make process app building a snap!Workflow Designer is where you draw and visualize how work is donein your organization. If you have never used a graphic tool before, youwill first need to acquaint yourself with the designer’s features in orderto make the most out of it.6
  14. 14. Figure 1-7. WorkflowDesignerUserInterfaceDesign pane the big space where you create your work diagram by adding participants,activities, tools, subflows, routes and transitionsElement menu a column of clickable buttons (on the left side of the design pane) thatprovide an easy way of selecting element functionsElements in the Element menu:⁃ Selection - for choosing an element in the design pane whenever you want to dosomething to it, like copy, delete, move, and a number of other actions.Selected elements look different: activity elements turn yellow, while other elements become outlined withbroken lines or bounded areas.⁃ Participant - the user who does the work⁃ Start - marks where the process begins, where a form is first submitted⁃ End - marks where the process finishes, when the goal is achieved or the problemresolved⁃ 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 workflow design where a decision needs to be made first todetermine where the flow should go⁃ Subflow - a process that is inserted in another process⁃ Transition - connects all elements togetherSwimlane illustrates how participants interact with each other in the workflow as theyperform their activities in sequence7
  15. 15. Menu bar a list of options, settings, actions and just about everything you do in WorkflowDesignerTool bar a series of clickable buttons (above the design pane) used to set an action orcommandNavigator shows the apps and their processes in the current workflow designDialog box an enclosed area that looks like a window on your screen, for typing in dataPop-up menu a list of commands or options that appear momentarily when you right-clickon an element in the design paneView options switches the workflow design view between graph (which shows thediagram) and XPDL (which shows the coding)Process guide warns you about errors in your workflow as you are designing itForm Builder lets you design online forms without HTML or coding. It uses a guided interfacethat is simple enough for anyone to use, and it is sufficiently customizable to meet the needs ofdifferent types of organizations.Figure 1-8. FormBuilderUserInterfaceDatalist Builder sports a look and feel similar to Form Builder. It offers an intuitive way ofbuilding data lists based on submitted form data.8
  16. 16. Figure 1-9. DatalistBuilderUserInterfaceUserview Builder is designed for ease-of-use so that anyone can build a front-end interface thatprocess app users can directly interact with.Figure 1-10. UserviewBuilderUserInterfaceWeb Console is where Joget lets you work behind the scene so you can manage your apps. It iswhere you, as administrator, get to push all the control buttons and assign users their accesslevels and privileges, among many others.9
  17. 17. Chapter 2Setting Up the Organization ChartCreating a New OrganizationBefore 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. SetupOrganizationChart• Click on Create New Organization. This will bring up the Create New Organizationdialog box.Figure 2-2. CreateNewOrganizationFigure 2-3. CreateNewOrganizationDialogBox10
  18. 18. • Complete the fields under Organization Details. For this example, enter abc_co in theOrganization ID field and ABC Co. in the Organization Name field.• 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 field.This is also true for all other IDs.You must complete fields marked with an asterisk (*).IDs are case-sensitive. This means that“joget”and“Joget”are two different names. So when you’re being asked to type an ID,observe uppercases and lowercases to avoid errors.Adding DepartmentsYou can manage your process app users by creating and managing departments in yourorganization.• 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. ClickonABCCo.The resulting page shows the organization details and its department list.11
  19. 19. Figure 2-5. DepartmentList• Click on Create New Department under Department List. This will bring up the CreateNew Department dialog box.• Complete the department details. For this example, enter personnel in theDepartment ID field and Personnel Department in the Department Name field.Figure 2-5. CreateNewDepartmentDialogBox• Click on Save. The Create New Department dialog box will close.Figure 2-6. UpdatedDepartmentList12
  20. 20. Structuring GradesOne way of arranging and placing employees in their correct categories is by determining agrading 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. Theresulting 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 Gradedialog box.• Complete the grade details. For this example, enter clerical in the Grade ID field andClerical in the Grade Name field.Figure 2-8. CreateNewGradeDialogBox• 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 field andManagement in the Grade Name field.13
  21. 21. Figure 2-9. UpdatedGradeListCreating UsersUsers complete your organization layout. Each user stands for a unique account that can sign into 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. CreatingUsers• Click on Create New User.14
  22. 22. Figure 2-11. CreateNewUserPageThis will bring up the Create New User dialog box.• Complete the following user details:Username: JaneFirst Name: JaneLast Name: HillPassword: passwordConfirm Password: passwordRole(s): UserTime Zone: (GMT +08:00) Beijing, Hong Kong, Perth, Kuala Lumpur, Singapore, TaipeiStatus: ActiveFigure 2-12. CreateNewUserDialogBoxSetting up Employee Details:• Type the following under Employee Details:Organization: ABC Co.15
  23. 23. Department: Personnel DepartmentHead of Department (HOD)? YesGrade ManagementFigure 2-13. SettingUpEmployeeDetails• 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: BradFirst Name: BradLast Name: FritzPassword: passwordConfirm Password: passwordRole(s): UserTime Zone: (GMT +08:00) Beijing, Hong Kong, Perth, Kuala Lumpur, Singapore, TaipeiStatus: ActiveEmployee Details:Organization: ABC Co.Department: Personnel DepartmentHead of Department (HOD)? NoGrade Clerical16
  24. 24. Figure 2-14. ViewingUserDetailsFigure 2-15. UserDirectoryPage17
  25. 25. Chapter 3The Joget WalkaboutDesigning Your First Process AppThis chapter walks you through your first Joget steps and shows you how to build a simpleprocess 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. DesignNewAppThis will bring up the Design New App dialog box.• Complete the App Details. For this example, enter leave_app in the App ID field andLeave App in the App Name field.18
  26. 26. Figure 3-2. DesignNewAppDialogBox• 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. PublishinganApp Figure 3-4. ManageAppVersionDialogBoxThis will bring up the Manage App Version dialog box.• Click on the radio button beside Version 1.• Click on Publish.19
  27. 27. • 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 Versiondialog box to close it.You will now see Leave App in the Design Apps drop-down list.Figure 3-5. ListofAppsUp and Going with Workflow DesignerJoget’s Workflow Designer visualizes workflow with a powerful drag-and-drop capability thatmakes 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 Workflow Designer. This will start Workflow Designer.Figure 3-6. StartingtheWorkflowDesignerYou will see the Leave App package in the Navigator pane of Workflow Designer. You will alsosee that Workflow Designer has automatically added the process“Workflow Process 1”underthe Leave App package. Rename Workflow Process 1 and set its properties by following thesesteps:• Right-click on Workflow Process 1.• Select Properties in the popup menu. This will bring up the Workflow Processproperties dialog box.20
  28. 28. • For this example, type leaveApplicationProcess in the ID field and LeaveApplication Process in the Name field. Set Hour as Duration unit.• Click on OK to close the dialog box.Figure 3-7. WorkflowProcessPropertiesDialogBoxTo manually add a process, right-click on Leave App then select New Process in the pop-up menu. Or, clickon Process in theWorkflow Designer menu bar and then select Insert New Process in the pop-up menu.There are a couple of other ways to access theWorkflow Process properties dialog box:1. By clicking on Workflow Process 1 > Edit (in the menu bar) > Properties (in the pop-up menu)2. By double-clicking on Workflow Process 1 and then selecting Properties in the pop-up menuAdding Participants to a ProcessNotice that Joget automatically adds Participant 1 for you when you insert a new processunder the Leave App package. You can add other participants by dragging and dropping theParticipant 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. Swimlane21
  29. 29. Swimlanes represent participants and other types of information in a process flow. For thisexample, 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 PropertiesHere’s how you set Participant properties:• Right-click on Participant 1.• Select Properties in the pop-up menu. This will bring up the Participant propertiesdialog box.Figure 3-9. SettingParticipantProperties• For this example, type applicant in the ID field and Applicant in the Name field. Clickon the radio button to set participant type to Participant.22
  30. 30. Figure 3-10. ParticipantPropertiesDialogBox• Click on OK. This will close the dialog box.Repeat the same steps for Participant 2, using the following:ID field: approverName field: ApproverType: ParticipantWe have one more participant to add and it will be a system-type participant. System-typeparticipants 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 propertiesdialog box.• For this example, type system in the ID field and System in the Name field. Click on theradio button to set participant type to System.Figure 3-11. SettingParticipantProperties23
  31. 31. • Click on OK. This will close the dialog box.Figure 3-12. SystemParticipantAddedAdding Activities to SwimlanesActivities are actions that participants perform. They are tasks that need human input.Figure 3-13. ActivityElementTo add our first activity in the Leave Application Process, drag the Activity element icon inthe Element menu to an empty part in the Applicant swimlane.24
  32. 32. Figure 3-14. AddinganActivityElementintheSwimlaneTo set Activity properties:• Double-click on the Activity element that you added. This will bring up the Activityproperties dialog box.• Type submit_completed_leave_application_form in the ID field.• Type Submit completed leave application form in the Name field.Figure 3-15. ActivityPropertiesDialogBox• Click on OK. This will close the Activity properties dialog box.We’ll add our second activity and this time around, it will be for the Approver. Drag theActivity element icon in the Element menu to an empty part in the Applicant swimlane.Set the Activity properties as follows:ID: approve_leave25
  33. 33. Name: Approve leaveDon’t forget to click on OK to close the Activity properties dialog box.Adding Tools to System-type ParticipantsWe use the Tool element instead of the Activity element when the activity to be added is anautomated task and the participant is a system. Automated tasks such as sending emails donot require human input.To add a tool, drag the Tool element icon in the Element menu to an empty part in theSystem swimlane.Figure 3-16. AddingaToolElementTo set Tool properties:• Double-click on the Tool element in the System swimlane. This will bring up the Toolproperties dialog box.• Type email_approval_notification in the ID field.• Type Email approval notification in the Name field.• Click on OK. This will close the Tool properties dialog box.Repeat the same steps using:ID: email_rejection_notificationName: Email rejection notification26
  34. 34. Figure 3-17. ToolsAddedintheSystemSwimlaneAdding TransitionsTransitions connect workflow elements together and show the order by which activities areperformed from start to end.Figure 3-18. TransitionElementIconLook at our example process and connect the first activity to the second activity by adding atransition. Here’s how:• Click on the Transition element icon in the Element menu.• Click on the Submit completed leave application form activity in the Applicantswimlane.• Click on the Approve leave activity in the Approver swimlane.• RIght-click on any empty space to stop adding transitions.27
  35. 35. Figure 3-19. TransitionAddedtoConnectActivity1toActivity2Adding RoutesRoutes are points in the workflow where decisions are made based on existing rules andstandards.Figure 3-20. RouteElementIconFor this example, we will add a route to the Approver swimlane to show that a decision has tobe 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 theApprover swimlane and arranging it under the Approve leave activity element.28
  36. 36. Figure 3-21. AddingaRouteElement• Add a transition to connect the Approve leave activity to the route.Figure 3-22. ConnectingActivitytoRoutebyAddingaTransitionFiguring Out Where to Go NextNow that we know there’s a decision to be made when the process reaches the Approveleave activity, there are a few things that we need to do:• Add missing transitions to connect the rest of the elements in the workflow design.Refer to Adding Transitions to connect the remaining elements like this:29
  37. 37. Figure 3-23. ActivitieswithRouteandTransitionsYou can reposition an element in the design pane by dragging it to where you want it to be.• Define the route type to determine how the process will flow once a decision is made.Here’s how you do it:• Double-click on the route element; this will bring up the properties dialog box.Figure 3-24. DefiningRouteType30
  38. 38. • 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 notification willbe emailed to the applicant; OR(2) the leave request may be rejected and if it does, a rejection notification will beemailed instead.• Click on the x button found on the upper-left corner of the dialog box to close it.Figure 3-25. ClosingtheDialogBox• Define route conditions. Route conditions depend on what we call the business rules ofthe organization.Follow these steps to set the 1st route condition:• Double-click on the transition connecting the route to the Email approvalnotification tool. This will bring up the Transition properties dialog box.Figure 3-26. TransitionConnectingRoutetoEmailApprovalNotificationTool• Select Condition from the Type list.31
  39. 39. Figure 3-27. SettingTransitionType• Type status==Approved in the Expression text area.Figure 3-28. StatingtheExpression• Click on OK. The Transition properties dialog box will close.• Double-click on Leave Application Process in the Navigator pane. This will bringup the Workflow Process properties dialog box.• Click on the Create new element icon found under SLA Limit > Workflowvariables.32
  40. 40. Figure 3-29. CreateNewElementIconintheWorkflowProcessPropertiesDialogBoxThis will bring up the Workflow Variable properties dialog box.• Type status in the ID text field.Figure 3-30. WorkflowVariableDialogBox• Click on OK. This will close the Workflow Variable properties dialog box.Moving the mouse over the element icons under SLA Limit >Workflow variables in theWorkflow Processproperties 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 rejectionnotification tool. This will bring up the Transition properties dialog box.33
  41. 41. • Select Otherwise from the Type list.Figure 3-31. SettingTypeto“Otherwise”• Type Otherwise in the Name field.Figure 3-32. GivingtheTransitionaName• Click on OK. The Transition properties dialog box will close.Figure 3-33. ConnectingtheRoutetotheTools34
  42. 42. Adding and Removing Start and End BubblesThere are two ways by which you can add Start and End bubbles to the workflow design toshow where the process starts and ends:• The tool bar of Workflow Designer includes icons that you can click on to Insert MissingStart and End Bubbles and to Remove Start and End Bubbles. When using this tool,Workflow Designer automatically detects the start and end points of the process, thenadds the bubbles and transitions for you.Figure 3-34. WorkflowDesignerToolBar• The Element menu also has Start and End element icons to represent the start andend points of the process. Just drag them to where the start and end points are in theprocess, them connect the elements together using transitions.Figure 3-35. StartBubble Figure 3-36. EndBubbleAdding start and end bubbles to the process completes the workflow design and readies itfor deployment.35
  43. 43. Figure 3-37. CompletedLeaveAppWorkflowDesignYou can delete workflow design elements by right-clicking on the element that you want to trash, thenclicking on Delete in the resulting pop-up menu.Figure 3-38. DeletinganElement36
  44. 44. Chapter 4Joget at WorkYou can’t view a process in the web console without having deployed it first from the WorkflowDesigner. 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 Workflow Designer.Figure 4-1. DeployButtonMapping Participants to UsersIn Chapter 2, we created users as a finishing touch to setting up our organization chart. We willnow map those users to our participants for the purpose of defining their roles.We’ll start with Approver. Keep in mind that the approver should be the applicant’s HOD (Headof Department).Participant Mapping for Approver:• Click on Add/Edit Mapping found along“Approver”in the list of participants. This willbring up the Map Participants to Users dialog box.37
  45. 45. Figure 4-2. MappingApprovertoUser• 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. MappingApprovertoJaneHill• Click on Map to Org Chart.• Click on Map to the Performer.• Click on the Performer’s HOD radio button to select it.• Select Submit completed leave application form from the Where the performerexecuted drop-down list.38
  46. 46. Figure 4-4. MappingApprovertoOrganizationChart• Click on Submit. This will bring up a confirmation box.• Click on OK to confirm.Participant Mapping for Applicant:• Click on Add/Edit Mapping found along“Applicant”in the list of participants. This willbring 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. MappingApplicanttoBradFritz• Click on Map to Org Chart.• Click on Map to the Performer.• Click on the Performer radio button to select it.39
  47. 47. • Select Run Process from the Where the performer executed drop-down list.Figure 4-6. MappingApplicanttoOrganizationChart• Click on Submit. This will bring up a confirmation box.• Click on OK to confirm.Mapping Activities to FormsYou need to have your forms ready first before you can map activities to them. Hop to Chapter 5 to design the LeaveApplication and Leave Approval forms.Once your forms are ready, follow these steps to begin mapping them. Make sure that you areon the Leave App management page of your web console.• Click on Map Activities to Forms. You will see a list of the workflow design activities.Figure 4-7. MappingActivitiestoForms• Click on Add/Edit Form along“Submit completed leave application form”. In theresulting window, click on Map to a Form.40
  48. 48. Figure 4-8. SelectingaFormtoMapto“Submitcompletedleaveapplicationform”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. ActivitiesMappedtoFormsMapping Tools to PluginsIn our example Leave App, we will need the Email Tool plugin so that emails can be sentautomatically to the leave applicant after a decision is made.To map the Email approval notification tool to an Email Tool plugin, go to Processes > MapTools to Plugins in the Leave App management page of your web console.41
  49. 49. Figure 4-10. MappingToolstoPluginsThen follow these steps:• Click on Add/Edit Plugin along the Email approval notification tool under the list oftools defined in the workflow design. This will bring up the plugin list.Figure 4-11. PluginList• Click on Email Tool in the plugin list. This will bring up the Plugin Configuration dialogbox.42
  50. 50. Figure 4-12. ConfigureEmailTool• Type mailserver in the SMTP Host field.• Type 25 in the SMTP Port field.• Click on Next.• Type email@domain in the From field.• Type #performer.runProcess.email# in the To (Specific email address) field.Figure 4-13. TypeEmailDetails• Click on Submit. The Plugin Configuration dialog box will close.Repeat the same steps for the Email rejection notification tool.43
  51. 51. Figure 4-14. ToolsMappedtoEmailToolPlugin44
  52. 52. Chapter 5Designing Web Forms with Form BuilderBuilding the Foundation of DatabasesJoget’s Form Builder is the answer to your workflow data collection needs. It lets you designonline forms using a simple drag-and-drop interface and set them up so that information isrouted to the right people in your organization. All these without having to write a single line ofcode!Before we start designing the forms we need for our sample Leave App, let’s take a look at thebasic elements that make up this Form Builder.Basic Elements of Form BuilderSo many features, so little time! Form Builder is pretty hefty on good stuff that we just don’twant you to be overwhelmed with at this point. Let’s take a peek at the basic elements insteadand see how we can use them to build the simple forms we need for this book’s Leave Appexercise.Hidden Field a text field that is not shown in the form but is used for settingvalues that are also submitted when the form is submittedText Field a space where you can type in one line of textPassword Field a text field that shows text as dots on the screen to preventother people from reading itText Area a text field where you can type in many lines of textSelectBox also known as a“drop-down”or“pull-down”list; it contains pre-designated options for you to choose from.CheckBox a box that you can check/tick to select one or more items from a setof optionsRadio a round area that you can click on to select an option. Unlike checkboxes that allow multiple selections, radios limit you to only one.Date Picker a display that allows you to choose a calendar dateFile Upload allows you to choose a file and transfer it to the Joget server; alsoknown as“http upload”Sub Form a form that is inserted in another form45
  53. 53. Grid a framework of spaces that contains organized and related dataDesigning a Simple FormFor this example, we will work on two forms: the Leave Application Form and Leave ApprovalForm.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 Formdialog box.• Complete Form Details:Form ID leaveApplicationFormForm Name Leave Application FormTable Name hr_leaveFigure 5-1. CreateNewFormDialogBox• Click on Save to launch Form Builder.Start by Adding Form ElementsWe begin designing the Leave Application Form by dragging and dropping the form elementswe require to the design pane. Form elements are found in the Element palette on the left of theForm Builder.46
  54. 54. Notice that Form Builder automatically adds a section when it opens for the first time.Figure 5-2. FormBuilderautomaticallyaddsaSectionwhenopenedforthefirsttime.Follow these steps to rename Section:• Move your mouse anywhere in the section area in the design pane. You will see 4buttons pop up --- Add Section, Add Column, Edit Section and Delete Section.Figure 5-3. IntheSectionelement,youcanadd,editanddeleteasection,andyoucanaddacolumn,too.47
  55. 55. • Click on Edit Section to bring up the property editor.Figure 5-4. EditSectionButton• Type Leave Application in the Label field.Figure 5-5. SectionPropertyEditor• 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. TextFieldEditButton• Type name in the ID field.• Type Name in the Label field. Click on Next.48
  56. 56. Figure 5-7. TextFieldPropertyEditor• Select Default Validator from the Validator drop-down list. Click on Next. You’llsee a check mark beside“Mandatory”in the Configure Validator window.Figure 5-8. ValidatorDrop-downList Figure 5-9. MandatoryCheckBox• 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 uniquewithin a form.• Label the name that you assign to the text field• Value the text that is automatically displayed in the text field; you can use, forexample, Enter. If there is no specified value, then you will see a blank field.• Max Length specifies the maximum number of characters (letters, numbers andsymbols) that can be typed in the field. This is to ensure that the form user doesnot type in more than what can be displayed.• Size determines how many visible characters the field can have. By“visible”wemean that which can be displayed and can be seen by the form user.• Readonly prevents form users from making changes to the element.• Display field as label when readonly? displays the value of the text field as plaintext when the element is set to“Readonly”.49
  57. 57. Figure 5-10. EditTextField• Validator checks and ensures that the form user has typed the requiredinformation in the text field for the form to be completed and before it is allowedto be submitted.Figure 5-11. ChooseValidator• Mandatory means that the form user needs to complete the field to be able tosuccessfully submit the form.50
  58. 58. • Type is the format or pattern that a form user should follow when entering text inthe text field, 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 notAlphabet, Alphanumeric, Numeric or Email and you want to specify your own• Custom Error Message Shown When Validation Fails the message displayed whena form user entered text that does not follow the selected Type or custom regularexpressionFigure 5-12. ConfigureValidatorAdd 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. AddingaDatePicker51
  59. 59. • Type startDate in the ID field.• Type Start Date in the Label field. Click on Next.Figure 5-14. EditDatePicker• Select Default Validator in the Validator drop-down list.Figure 5-15. ChooseValidator• Click on Next. You’ll see a check mark beside“Mandatory”in the ConfigureValidator window.52
  60. 60. Figure 5-16. ConfigureValidator• Click on OK. This will close the property editor.Follow the same steps to add another Date Picker element using endDate as ID andEnd 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 uniquewithin a form.• Label the name that you assign to the date picker field• Value the text that is automatically displayed in the date picker field; you can use,for example, Select. If there is no specified value, then you will see a blank field.• Format lets you display date feedback in different ways, for example dd/mm/yyand 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 field as label when readonly? displays the value of the date picker as plaintext when the element is set to“Readonly”.• Validator checks and ensures that the form user has selected a date in the datepicker for the form to be completed.• Mandatory means that the form user needs to choose a date to be able tosuccessfully submit the form.• Custom Regular Expression the format that you select if preferred Type is notAlphabet, Alphanumeric, Numeric or Email and you want to specify your own• Custom Error Message Shown When Validation Fails the message displayed whena form user does not follow the selected Type or custom regular expressionAdd 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
  61. 61. • Click on Edit to bring up the property editor.Figure 5-17. AddTextArea• Type reason in the ID field.• Type Reason in the Label field. Click on Next.Figure 5-18. EditTextArea• Select Default Validator from the Validator drop-down list.54
  62. 62. Figure 5-19. ChooseValidator• Click on Next. You’ll see a check mark beside“Mandatory”in the ConfigureValidator window.• Click on OK. This will close the property editor.Figure 5-20. ConfigureValidatorExploring the Text Area Property Editor• ID is a set of characters that is explicitly linked to the Label tag. IDs are uniquewithin 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, forexample, Enter. If there is no specified value, then you will see a blank area.• Cols specifies how many columns you want in the text area.55
  63. 63. • Rows specifies how many rows you want in the text area.• Readonly prevents form users from making changes to the element.• Display field as label when readonly? displays the value of the text area as plaintext when the element is set to“Readonly”.• Validator checks and ensures that the form user has typed the requiredinformation in the text area for the form to be completed and before it is allowedto be submitted.• Mandatory means that the form user needs to complete the field to be able tosuccessfully submit the form.• Type is the format or pattern that a form user should follow when entering text inthe 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 notAlphabet, Alphanumeric, Numeric or Email and you want to specify your own• Custom Error Message Shown When Validation Fails the message displayed whena form user entered text that does not follow the selected Type or custom regularexpressionWhen you have finished adding all the form elements that you need, click on Previewin the Form Builder menu to see how the form looks like. To save the form, click onSave.This is how your Leave Application Form should look like:Figure 5-21. LeaveApplicationFormLet’s create another form!To begin designing the Leave Approval Form, click on Create New Form again and type thefollowing under Form Details:Form ID leaveApprovalFormForm Name Leave Approval FormTable Name hr_leave• Click on Save to launch Form Builder.56
  64. 64. Follow these steps to rename Section:• Move your mouse anywhere in the section area in the design pane. You will see 5buttons pop up --- Add Section, Add Column, Edit Section, Delete Section and EditColumn.• Click on Edit Section to bring up the property editor.• Type Leave Approval in the Label field.• 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 field. Leave the Label field 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. EditSubform• Select Workflow Form Binder in the Load Binder drop-down list. Click on Next.57
  65. 65. Figure 5-23. ChooseLoadBinder• Select Workflow Form Binder in the Store Binder drop-down list.Figure 5-24. ChooseStoreBinder• Click on OK. This will close the property editor.We will now add another Section to the form. Remember the 5 buttons that pop upwhenever you move your mouse anywhere near Section in the design pane? Go backthere and click on the Add Section button to add our second section.Figure 5-25. AddingAnotherSectionThen click on Edit Section to bring up the property editor. Type Approver Action in theLabel field, then click on OK to close the property editor.58
  66. 66. Figure 5-26. EditSectionAdd a SelectBox Element• Drag SelectBox from the Element palette to the design pane in the ApproverAction 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 field.• Type Status in the Label field.• 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. EditSelectBox59
  67. 67. TheValue column in the Options table contains the value of the workflow variable“status”that we had set earlier inWorkflowDesigner. Type it the way it is typed in theTransition property dialog box, without the single quotation marks.Figure 5-28. WorkflowDesignerTransitionSettings• Click on Choose Validator in the property editor menu.Figure 5-29. ChooseValidator• Select Default Validator from the Validator drop-down list.Figure 5-30. SelectDefaultValidator• Click on Next. You will see a check mark in the Mandatory checkbox.60
  68. 68. Figure 5-31. ConfigureValidator• Click on Next.• Type status in the Workflow Variable field.Figure 5-32. SelectBoxWorkflowVariable• 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 Statusselect 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 field.• Type Approver Remarks in the Label field.• The column number is automatically set to 20 and the row to 5.Figure 5-33. TextAreaPropertyEditor• Click on OK. This will close the property editor.61
  69. 69. To save the form, click on Save in the Form Builder menu and then click on OK to confirm.Figure 5-34. LeaveApprovalFormClose Form Builder and return to the app management page in your web console tobegin mapping activities to forms. Refer to Chapter 4 for a step-by-step guide onMapping Activities to Forms.62
  70. 70. Chapter 6Using the Datalist BuilderCreate Datalists the Way You Want to See ThemJoget Workflow’s Form Builder, Datalist Builder and Userview Builder share a lot of the basicinterface. You drag and drop elements from the Element palette to the design pane to createthe layout and to add tools for performing specific tasks. You set properties using propertyeditors. You preview. You save.In Datalist Builder, you can enter data in rows and columns by linking a form to the list. The list isthen updated progressively each time the form is completed.Creating a DatalistFor this example, we will build a datalist by linking it to the Leave Application Form that wecreated in the previous chapter. Make sure that you are in the Leave App management page ofyour 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. CreateNewDatalist• Under Datalist Details, type leaveApplicationList in the ID field.• Type Leave Application List in the Name field.63
  71. 71. Figure 6-2. EnteringDatalistDetails• Click on Save. This will start the Datalist Builder and bring up the Select Binderwindow.Selecting a Form to Link to the DatalistFor a datalist to know where to fetch information from, you have to specify which form youwould 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. SelectingtheSourceofData64
  72. 72. • Click on Next.• Select Leave Application Form in the Form list under the Select Form tab.Figure 6-4. SelectingaForm• Click on OK. This will launch the Datalist Builder.Datalist Builder includes tools that let you add columns, define filters and specifyactions.Let’s begin with columns.Adding Columns to the LayoutIn Datalist Builder, you will see that the Element palette contains Columns/Filters as well asActions, and that column/filter elements are taken from the table (hr_leave) that we assignedto the Leave Application Form when we were in Form Builder (Chapter 5).Let’s add 3 columns to our Leave Application List by dragging the following from theColumns/Filters element palette to the design pane where it says“Drag Columns Here”:• Name• Start Date• End Date65
  73. 73. Figure 6-5. ColumnsAddedA table can have more than one form assigned to it. In our Leave App example, table hr_leave has 2 formsassigned to it --- the Leave Application Form and Leave Approval Form.Columns/Filters items that are written in regular text are field names taken from the selected form. In thisexample, the selected form is Leave Application Form.Columns/Filters items that are written in italicizedtext are items that are in the table assigned to the form, butnot in the form itself.You can rearrange columns with a simple drag-and-drop move.Defining Column PropertiesIf you point your mouse over the column names, you will see the Properties and Deletebuttons pop up.Figure 6-6. ColumnPropertiesandDeleteButtonsFollow these steps for each of the column names (Name, Start Date, End Date):66
  74. 74. • Click on Properties to bring up the Property Editor.• Change the name in the Label field if you wish to another name to be displayed.• Set Sortable to Yes.Figure 6-7. ColumnPropertyEditor• Click on OK to close the property editor.Adding ActionsAn action allows you to link a datalist item to a predefined action, script or executable.There are 2 types of datalist actions:• Hyperlink• DeleteFollow these steps to add a Hyperlink action and set its properties:67
  75. 75. • Drag Hyperlink from the Element palette to the design pane where it says“Drag RowActions Here”.Figure 6-8. AddingaHyperlinkAction• If you point your mouse over Hyperlink, you will see the Edit and Delete buttons popup. Click on Edit. This will bring up the property editor where you can configure thelink.Figure 6-9. HyperlinkEditButton• Type application_new in the Hyperlink field.In the next chapter, we will build a userview using Joget’s Userview Builder. You will see then that thehyperlink“application_new”points to a new leave application file or form. More on this in our UserviewBuilder chapter.• Set Hyperlink Target to Current Window.68
  76. 76. • Type id as Column Name. This column is the column that pertains to the value given inthe Hyperlink Parameter Name.• Type New Application in the Label field. Label is the row action name that the columndisplays.Figure 6-10. HyperlinkActionPropertyEditor• Click on OK. The property editor will close.69
  77. 77. Delete Action ExplainedThe Delete action allows you to erase the database record of a matching record ID. You set itsproperties by completing these fields 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.• Confirmation Message is the verification message displayed before deleting the record.Setting FiltersThese are the types of filters you can use when building a datalist:• Text Field Filter lets you type a search criteria when you want to look for information. Forthis example, drag Name from the Element palette to the design pane where it says“Drag Filters Here”.Figure 6-11. AddingaTextFieldFilterThen follow these steps to set the filter properties:• Point your mouse over Name; you will see the Edit and Delete buttons pop up.Figure 6-12. TextFieldFilterEditButton70
  78. 78. • Click on Edit. This will bring up the property editor where you’ll see name in theName field and Name in the Label field. You’ll also see that Text Field isautomatically selected for you in the Type list. Text Field is the default filter.Figure 6-13. ConfiguringTextFieldFilterProperties• Click on OK. The property editor will close.• Select Box Filter lets you find information based on a selection. For this example, addstatus to the design pane the same way you added the Name text field filter. Set thefilter properties by clicking on the Edit button to bring up the property editor. You’ll seestatus in the Name field.• Change“status”in the Label field to All Status.• Select Select Box in the Type list.Figure 6-14. SelectBoxFilterinTypeDrop-downList• Click on Next to configure the select box filter.• Leave the Multiple Selection check box and the Size and Default Value fieldsblank.• In the Options table, add 2 rows by clicking on the “+”button twice. Then, typethe values and labels as follows:71
  79. 79. Figure 6-15. SelectBoxFilterPropertyEditor• Click on OK to close the property editor. Remember to preview your datalistbefore saving it.Figure 6-16. CompletedLeaveApplicationList72
  80. 80. Chapter 7Putting It All Together with Userview BuilderBuilding User InterfacesUserview, also known as front-end or user interface, wraps your app’s processes, forms anddatalists. It plays a crucial role in determining how easily a user can make your app do the workyou built it to do.Joget Workflow’s Userview Builder does not only let you build a user interface. It also lets youbuild a full-fledged process app without having to diagram a workflow in Workflow Designer orwrite a single programming code! It comes with preloaded themes and, for the moreadventurous, the ability to customize themes. It provides tools for organizing tasks inhierarchical structure to make completing processes easier and more manageable.Key Areas of Userview BuilderBefore we start filling our userview, here’s a look-see of the Userview Builder interface and itsfeatures.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 ToolboxForm 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 orstarting point of a userview.Inbox stores incoming and pending tasks.Link lets a user open another document from within the userview itself.73
  81. 81. 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 UserviewWe will now build a basic userview for our sample Leave App. Make sure that you are in theLeave 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. CreateNewUserview• In the Create New Userview dialog box, complete Userview Details as follows:ID: leavePortalName: Leave Portal74
  82. 82. Figure 7-2. CompletingtheUserviewDetails• Click on Save. This will launch Userview Builder.Add a New Category• Put your mouse over Menu in the design pane; you’ll see the Add Categorybutton pop up. Click on it to add a category.Figure 7-3. AddCategoryButton• Put your mouse over New Category; you’ll see the Edit Label, Permission andDelete Category buttons pop up. Click on Edit Label.75
  83. 83. Figure 7-4. ChangingtheNewCategoryName• 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 EditLabel box.Add an HTML Page• Drag HTML Page from the Element palette to the design pane, under Main.Figure 7-5. AddinganHTMLPage76
  84. 84. Userview always loads the first item under Menu. For our sample Leave Portal, the first item is an HTML pagewhich will serve as the userview landing page.• Put your mouse over HTML Page; you’ll see the Properties and Delete Menubuttons pop up. Click on Properties to bring up the Edit HTML Page dialog box.Figure 7-6. HTMLPagePropertiesButton• Complete the fields as follows:Custom ID: homeLabel: HomeContent pane: Welcome to the Leave Portal.Figure 7-7. EditingtheHTMLPage• 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 alongMenu.77
  85. 85. • Edit the New Category label by clicking on the Edit Label button found alongNew Category and typing Leave Applications in place of“New Category”.• Drag Inbox from the Element palette to the design pane, under LeaveApplications.• Put your mouse over Inbox; you’ll see the Properties and Delete Menu buttonspop up. Click on Properties to bring up the Edit Inbox dialog box.• Complete the fields as follows:Custom ID: inboxLabel: Inbox• Select All Assignments in the Assignments to Display list.• Select Leave Application Process in the Process list.Figure 7-8. SettingInboxProperties• Click on OK. The Edit Inbox dialog box will close.Add a Form• Drag Form from the Element palette to the design pane, under LeaveApplications.• Put your mouse over Form; you’ll see the Properties and Delete Menu buttons popup. Click on Properties to bring up the Edit Form dialog box.• Complete the fields as follows:Custom ID: application_newLabel: New Application• Select Leave Application Form in the Form list.• Leave Show in popup dialog?, Readonly? and Display field as Label whenreadonly? boxes unchecked.78
  86. 86. Figure 7-9. EditFormDialogBox• Click on Next. Under Redirection, complete the fields as follows:Message Shown After Form Submission: Application updated.URL Redirect After Form Submission: application_listURL 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
  87. 87. Add a List• Drag List from the Element palette to the design pane, under Leave Applications.• Put your mouse over List; you’ll see the Properties and Delete Menu buttons popup. Click on Properties to bring up the Edit List dialog box.• Complete the fields as follows:Custom ID: application_listLabel: Application List• Select Leave Application List in the List list. Click on Next.Figure 7-11. EditingtheApplicationList• Under UI, set the following:Put a check mark in the Show Number of Rows in Menu box.Button Position: Bottom LeftSelection Type: MultipleSelector Position: Left• Click on OK. The Edit List dialog box will close.80
  88. 88. Figure 7-12. ConfiguringtheUIAdd a Run Process Element• Drag Run Process from the Element palette to the design pane, under LeaveApplications.• Put your mouse over Run Process; you’ll see the Properties and Delete Menubuttons pop up. Click on Properties to bring up the Edit Run Process dialog box.• Complete the fields as follows:Custom ID: leaveProcessLabel: Apply Leave• Select Leave Application Process in the Process list.• Leave Run process without confirmation screen? and Show in popup dialog?boxes unchecked.Figure 7-13. EditingtheRunProcessElement81
  89. 89. • 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&PermissionSettingsTab• Select a theme in the Theme list.Figure 7-15. ThemeDrop-downList• Click on OK.Figure 7-16. PreviewofUserviewRemember to preview and then save your userview before closing the Userview Builder.82
  90. 90. Chapter 8Test-Drive Your ProcessThis is the part where you roll up your sleeves and test-drive your first 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 confirm by re-typing it in the Confirm Password text field before clicking on Save.Repeat the same steps for Jane.Let’s Run the Process!As Brad is our applicant, you can begin to run the process by logging out of the admin webconsole 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
  91. 91. Figure 8-1. RunApps• Click on the Launch button for Leave App under Published Processes.Figure 8-2. PublishedProcesses• Click on Run Process to confirm that you want to run the process.Figure 8-3. RunProcessConfirmationBox• Complete the Leave Application and then submit it by clicking on Complete. Tosubmit later, click on Save as Draft.84
  92. 92. Figure 8-4. SubmitCompletedLeaveApplicationFormThe calendar widget enables a user to select dates when using the Date Picker element. Click on the calendaricon to expand it.Remember that an asterisk (*) denotes a required field.Brad’s HOD, Jane, will now have to approve his leave application. For Jane to attend to theprocess:• Logout of Brad’s web console and login as Jane where you can check for tasks inher Inbox.Figure 8-5. Jane’sInboxandPendingTask• Click on the activity name Approve Leave to open the task. This will bring up theLeave Approval Form.85
  93. 93. Figure 8-6. LeaveApprovalForm• Complete the form by choosing Approved from the Status list and addingremarks (if any).• Submit the form by clicking on Complete.Check if the routing worked correctly by logging out of Jane’s web console and logging in as Brad tocheck his Inbox. You should see“Approved”under Activity Name.86
  94. 94. Chapter 9Joget PlacesJoget Workflow Community Knowledge Base isa collection of useful information about Joget Workflow.You’ll find 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 tobrowse and contribute tips and relevant know-how. Youcan 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. JogetWorkflowCommunityKnowledgeBase• Complete the Sign Up for Confluence form then click on the Sign up button tosubmit.87
  95. 95. Figure 9-2. SignUpforConfluenceJoget Marketplace offers a variety of plugins and ready-to-customizeprocess templates for your everyday business needs, in just a few mouseclicks. No bothersome steps and lengthy sales gabbing so you get yourwork done without delay! Visit http://marketplace.joget.org to findout more.Figure 9-3. GettingStartedwithJogetMarketplace88
  96. 96. Joget Unplugged is where Jogetians share their insights on Joget Workflow. Follow them atblog.joget.org to keep abreast of the latest buzz.Figure 9-4. JogetUnplugged89
  97. 97. GLOSSARYAactivity a form-based action or task that a participant doesAJAX (Asynchronous Javascript and XML) a term used when several technologies are usedtogether allowing for quick updates without reloading the browserAJAX subform an AJAX form within a formapp a program or software designed to accomplish a specific purposeaudit trail a record of information listed in a logical path linking a series of activitiesauto populate to automatically fill in with dataBBean Shell a free embeddable Java scripting languagebinder holds and keeps pieces of information synchronised so that when one is changed, therest are automatically updatedbrowser a graphical user interface for displaying and navigating webpagesCcalculation field a form field where arithmetic computations involving other fields can be donecheckbox a clickable box found in graphical user interfaces and which is used to turn an optionon or offchild form a form found within a multi-paged formcommand an instruction to perform a specific taskcommand prompt a symbol on a display screen awaiting a command inputcommand line the line on the display screen where a command is expectedcondition a situation that must exist before something else is possible or allowedCRUD (Create Read Update Delete) allows you to build and manage records in UserviewCSS (Cascading Style Sheets) a feature added to HTML that determines how elements such asheaders, footers and links are displayedCSV (Comma-separated Values) format used for representing dataCSV import enables one to transfer bulk data from one file into a form table90
  98. 98. Ddatabase a structured set of informationdatalist information displayed in list orderdatalist inbox inbox that contains form datadata migration the process of putting data from one format to anotherdatasource a name given to the connection set up to the database from a serverdate picker a drop-down calendar for selecting a datedeadline limit the latest time or date by which an activity should be completeddefault a preselected option when no alternative is specified by the userdefault formatter allows you to apply standard formatting to objects, such as textdepartment options binder enables a return of the list of departments based on theorganisationdeploy to put into actiondestination folder a user-specified folder to which the setup Joget Workflow program will beinstalleddirectory an organizational unit that contains files in hierarchical structuredirectory user someone who has access to the directorydirectory user form binder an option under Store Form Binder that allows you to create a userin the user directory with a form created in Form Builderduplicate value validator checks for and prevents identical valuesduration unit the measure of time during which something continuesEelement an entity that is a single member of a setelement palette a range of elements available to the userend bubble indicates where the process finishesenvironment variable value given to a parameter or setting that is frequently or repeatedlyused within the app91
  99. 99. equal value validator allows you to verify that the values of two fields match before submittinga formexception a condition, often an error, which causes an activity to branch out to a new activityFfield a space allocated for a specific informationfield value passover method determines how a redirect URL is formedfile upload allows one to attach a file to a formfilter limits the criteria through which data is passed or sorted for a listforeign key a key (or key field) that identifies records in a different tableform a document with blank fields to be filled in (with data)Form Builder enables one to design forms with the use of a simple and guided interfaceformatter allows you to set the properties of an object, such as text, displayed on the computerscreenform options binder allows you to fill in form data based on an organisation chartform selection dialog a window that appears on a display screen requesting for the user tochoose a formfront-end interface enables a user to communicate with and access other parts of a programGgrid a series of vertical and horizontal blocks of spacesgroup users put together under the same functional role within an organizationgroup options binder enables a return of the list of groups based on organisationHhash a unique numeric value commonly used for accessing datahash variable a hash that may take on more than one value during process execution (runtime)hidden field a general HTML form input element that allows one to set values that are out ofviewhost a remote computer system that contains the data being accessed by another remotecomputer connected to it by modems and telephone lines92
  100. 100. HTML (HyperText Markup Language) a standardised system for creating text files to achievefont, colour, graphic and hyperlink effects on web pageshyperlink allows you to jump from the current document to another document on yourcomputer, network or the Internethyperlink action allows the user to create a hyperlink between documents or parts of adocumenthyperlink parameter name name of the parameter to be added at the end of the hyperlinkhyperlink target the way or type of location where you want the hyperlink to open (ex: currentwindow, new window)IID generator field used to create numbers that continue to run in sequenceimage upload used for attaching picture files to a forminstaller a specialised program that puts software on a computerJJasper reports an open source Java reporting toolJasper reports definition (JRXML) source code for Jasper reportsJava a general purpose programming language with several features that make it ideal for useon the World Wide WebJDBC (Java Database Connectivity) allows Java programs to access database managementsystemsJDBC datalist database binderJSON (JavaScript Object Notation) a simple, language independent text file format forrepresenting dataKkey a field that you use to sort data (also called key field or index)Llaunch to start a computer programLDAP (Lightweight Directory Acesss Protocol) an agreed format for transferring data betweentwo devicesLinux an open-source operating system93
  101. 101. load binder where to copy and transfer data fromlocale a set of information specific to a a given language and country or geographical locationMmandatory required to be completedmap to associate an element in a set with an element in another setMS SQL Server software whose main function is to keep and fetch data as required by othersoftware applicationsmulti row form binder enables one to save data taken from a series of vertical and horizontalblocks of spaces, into a tablemulti paged form allows one to build a single form containing several other formsmulti select box allows one to choose several items at once from a list of optionsMySQL an open source relational database management system used for adding, removing,modifying and updating information in the databaseNOoption a choice in a menu, dialog box, checkboxoptions binder used for filling in optionsOracle a software company whose primary business is database productsorganisation options binder enables a return of the list of organisationsPparameter a characteristic that defines an elementparent form the form to which a child form is linkedparticipant a user or system that takes part in a processpassword a string of characters used for verifying the identity of a userpassword field the space allocated for entering a passwordpermission type determines which activities will be displayed under a users Userview Activityplaceholder similar to a dummy text which fills an empty field until the real text is placed inplugin a software extension that adds capabilities to an app94
  102. 102. popup select box allows one to choose from a datalist instead of the common horizontal menuthat displays a list of optionspreview to view something for checking before it is made availableprocess a series of interdependent activities taken to accomplish a desired resultprocess deadline checker interval how often an activity is checked for completionproperties attributes related to a a given data or data structureprotocol a set of rules defining a formatpublish an app to make an apps processes and userviews available to all usersQquery a request for information from a databasequery language a specialised system for requesting information from a databaseRradio a small round area in a form that you can use to click to choose an optionread-only capable of being displayed, but not modified or deletedredirect target the location or specified path after a form submissionrefNo (Reference No.) an example of an environment variable namerelational database management system the most commonly used database formatreturn to display the results of the searched informationrouting the process of directing information along a specified path from starting point (source)to target (destination)row actions allows one to associate a horizontal group of cells or boxes to an availablepredefined task (such as Delete and Hyperlink)row validation ensures that data entered in a horizontal group of cells or boxes are correctSschema database system structure that defines the behaviour of and the relationships betweentables and fieldsscript an automated series of instructions carried out in a specific orderserver a computer that manages access to a centralised resource or service in a network95
  103. 103. SLA (Service Level Agreement) limit agreed time limit for delivering a service or a solution to anincidentSQL (Structured Query Language) a standard query language used by data managementsystems for retrieving and modifying information in a databaseSQL chart allows you to customise your own SQL query when making reports in the form oftables, graphs or diagramsSQL query enables one to create and run queries using SQLstatus the situation at a particular time during a processstart bubble indicates where the process beginsstore binder the location for retaining or entering data for future retrievalsubflow a process within a processsubform a form within a formsuite a set of programs with a uniform design and the ability to share dataTtable data arranged and stored in rows and columnstarget a file or location to which data is copied or transferredTCP/IP a suite of communications protocols used to connect hosts in the Internetterminal window a display for entering data or commands and received outputtext area section used for text input in formstext field space used for text input in formsthumbnail a small picture of an image or page layout that represents the larger originaltime zone an area where a common standard time is usedtool a system-related activitytransition the path between two elements, such as between two activitiesUuniversal inbox shows all queued tasks across the process appURL (Uniform Resource Locator) the address of a World Wide Web page96
  104. 104. URL redirect the web page that will open after form submissionURL redirect value passover the form field value to be used as part of a URL redirectuser one who is given a unique account to login and participate in the Joget process appUI (User Interface) the means by which a user and a computer system interactuser options binder enables a return of the list of users based on organisation, department andgroupuser profile information about a user such as username, password and email addressusername a name used by a participant to gain access to a Joget process appuserview front end interface [also "UI"]userview key serves as a placeholder for a common value to be used when setting the limits ofcontents to a certain category or attributeuserview key name determines the form field ID where the userview key value will be takenfromVvalidation ensures that data entered is correctvalidator verifies that data entered falls within specified standards or conditionsvalue the computer representation of a piece of informationvariable a data item that may take on more than one value during process execution (runtime)Wwizard a help feature of a software package that automates complex tasks by asking the user aseries of easy-to-answer questionsworkflow a series of processes through which an action passes from initiation (start) tocompletion (finish)XXPDL (XML Process Definition Language) enables workflow management and businessprocesses to exchange and use informationYZzip a file that was compressed so that it takes less space in storage97
  105. 105. 98

×