Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents
stylecircle

 


 

Info
titlePrevious step

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

Widget Connector
width600
urlhttps://www.youtube.com/watch?v=vb4lMopaYEQ&index=5&list=PLFOgRDg2hmNIGv1ut8WHaCqw658TKUa2_

...

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 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 Removed Image AddedImage 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 RemovedImage 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 RemovedImage Added

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

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

  11. 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 will interpret the process diagram and load the process details.
    Image RemovedImage Added

  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 RemovedImage 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 RemovedImage Added

  3. As an example to handle an approval process, click on on Create New Form to  to create a new new Approval form form. In this new form, add a Subform that  that displays the original submitted form, and and radio buttons  buttons to capture the approval status.

  4. Configure this subform to select the original request form.
    Image RemovedImage Added

  5. Configure the the status radio  radio button to have Approved and Rejected options.
    Image RemovedImage 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 RemovedImage Added

  7. After all the configuration, the new approval form should look similar to the following screenshot:
    Image RemovedImage 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 RemovedImage Added

  2. For each tool, click on on Add/Edit Plugin to  to select and configure a plugin.
    Image RemovedImage 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 RemovedImage 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 RemovedImage Added

  3. Click on on Properties of  of the Run Process element and select the process to run.
    Image RemovedImage 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 RemovedImage Added

  5. Save the userview, and you will be able to run and perform assigned tasks in the published userview.
    Image Removed
    Image Added