Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info
titlePrevious step

Make sure that you have first completed the previous tutorial - Designing a Userview

Table of Contents
maxLevel2
stylecircle


Widget Connector
width600
urlhttps://www.youtube.com/watch?v=

vb4lMopaYEQ

btsE3Zp7wGM&list=PLFOgRDg2hmNLg_I-BjTj3hGAi2pD57lZ1&index=5

&list=PLFOgRDg2hmNIGv1ut8WHaCqw658TKUa2_

Table of Contents

Introducing the new Process Builder

  1. In the App design page, click on the the Processes menu  menu on the left, and then on the the Design Processes button  button along the top.
    Image RemovedImage Added
  2. The The Process Builder is  is one of the main highlights in Joget Workflow v5 replacing the older older Workflow Designer.
    Image RemovedImage Added
  3. There are 3 main areas in the Process Builder. On the top (red), the the Navigator panel  panel contains a list of processes together with the action buttons on the right. On the left (blue), this is where the element palette is placed by default. One can move it around to suit one's style. The main panel in the middle is the the Graph area  area (green) that contains the actual process diagram.
    Image RemovedImage Added
  4. Click on the edit icon under the process name in the Navigator. This brings up the properties dialog where you can edit the process details.
    Image Removed Image Added
    Image RemovedImage Added
  5. Add Add Participants into  into the process by clicking on the green add button under current Participant. Participants represent users or roles that perform a certain task. Click on the edit button while hovering over the participant name to set its properties.
    Image RemovedImage Added
  6. Add Add activities, tools and  and routes into  into the process diagram. Activities represent forms which require human interaction. Tools represent system or automated tasks, and routes are decision points. Use Use transitions to  to link them all together in a flow. You may either expand your design by connecting from existing nodes or by dragging the required nodes from the element palette into the process diagram. Image Removed   
    Image Added
    Image Removed Image Added
    Image RemovedImage Added
  7. To handle routing (for example approval conditions),

    use

    use Routes

    in

     in combination

    with

    with workflow variables. To create a workflow variable, double click on the process name in the Navigator to bring up the process dialog. Click on the first small icon under the Workflow variable heading, and key in the ID of the variable e.g. status.

    Image Removed
    Info
    titleRoutes

    Learn more about Process Routes.

    Image Added

  8. Once a workflow variable has been defined, hover over on  on a transition and and click on  on the edit icon to open the transition dialog. Image Removed
  9. Image Added
  10. In the transition dialog, select type type Condition, select the variable variable status in  in Variable and  and key in in Approved into the  into the Value field field*.* This means that this transition will occur if the value of status is "Approved".
    Image RemovedImage Added
  11. Set the transition type to to Otherwise to  to indicate that it is the default path to take when other conditions are not met. The Otherwise transition is shown in orange. An example of a simple routing process is as shown below:
    Image RemovedImage Added
  12. Ensure that the process has a proper proper Start and  and End. Click on on Deploy to  to deploy the process to the server.

Mapping Participants to Users

  1. Once a process has been successfully deployed, return to the previous tab/window. The new process diagram will be generated after you click on on OK. Joget Workflow will interpret the process diagram and load the process details.
    Image Added
    Image Removed 
  2. Participants defined in the process are listed in the the Map Participants to Users tab tab, and you can map each participant to specific people. Click on on Add/Edit Mapping to  to map to specific groups, users, organization chart, etc. If no mapping is done for a participant, any tasks are automatically defaulted to the current user instead.
    Image Removed Image Added

Mapping Activities to Forms

  1. In the the Map Activities to Forms tab tab, all process activities are listed.

  2. For each activity, click on on Add/Edit Form to  to select from a list of current forms in the app.
    Image Removed Image Added
       
  3. As an example to handle an approval process, click on on Create New Form to  to create a new new Travel Approval formForm. In this new form, add a Subform that  that displays the original submitted form, and and radio buttons  buttons to capture the approval status.
    Image Added
      
  4. Configure this subform Subform to select the original request form.
    Image Removed Image Added
      
  5. Configure the the status radio  radio button to have Approved and Rejected options.
    Image Removed Image Added
      
  6. For routing purposes, an important setting in the radio button is the mapping to a workflow variable under  under Advanced Options. In this case, setting the mapping to to status means  means that the value will be stored in the the status workflow  workflow variable.
    Image Added
    Image Removed  
  7. After all the configuration, the new approval form should look similar to the following screenshot:
    Image Removed Image Added

Mapping Tools to Plugins

  1. In the the Map Tools to Plugins tab tab, you can map tools defined in the process to plugins.
    Image Added
    Image Removed  
  2. For each tool, click on on Add/Edit Plugin to  to select and configure a plugin.
    Image Removed Image Added

Test Driving the Process

  1. To perform a test run on a process, click on the the Run Process button  button along the top of the App design process page.
    Image Removed Image Added

Incorporating the Process into the Userview

  1. In the App design page, click on the name of an existing userview to launch the Userview Builder.
      
  2. Drag a Run Process element  element into a menu category. This menu element allows the user to start a process from the userview.
    Image Removed Image Added

  3. Click on on Properties of  of the Run Process element and select the process to run.
    Image Removed Image Added
      
  4. Drag an an Inbox element  element into a menu category. This menu element provides the user with an inbox to manage their assigned workflow tasks.
    Image Added
    Image Removed  
  5. Save the userview, and you will be able to run and perform assigned tasks in the published userview.
    Image Removed
    Image Added

 

 

Related Tutorials

Children Display