Versions Compared

Old Version 5

changes.mady.by.user Former user

Saved on

compared with

New Version 6

changes.mady.by.user Former user

Saved on

Key

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

This tutorial will show you how to build a workflow for obtaining a quote from a vendor.  In this workflow a user can describe the work that needs to be done, send it outside the organization to a 3rd party for the quote and finally to a manager for approval.  It illustrates some powerful features of frevvo including:

  • The ability to have people outside your organization participate in the workflow without needing a user account

  • Business rules to ensure the right information can be viewed by the right people at the right time

  • Ability to dynamically determine what data must be provided at a given step

Column
width375px

Table of Contents
maxLevel1

Section

What You Will Need

  1. A  account on the frevvo SaaS server or a working /wiki/spaces/frevvo80/pages/975572122 installation . 

Step 1: Create Roles and Users

In order to design and test the flow, you need to create a role called employee and 3 users.  The role will be used to control who can start a quote request.  The following user accounts are also required:

  • A designer to create the flow
  • A user that can initiate the quote request
  • A manager to approve the quote.
A user is not needed for the vendor.

Roles can only be created by the tenant administrator.  The steps are:

  1. Login to your tenant with the admin user account

  2. You should be on the manage tenant page (if not click Manage in the upper-right hand corner)

  3. Click Manage Roles

  4. Click the + icon

  5. Type in ‘employee’ into the role name and click submit


Manage Tenant Page


Create Role Page

 

Users can also only be created by the tenant administrator.  The steps are: 

  1. Click Manage Users on the Manage tenant page

  2. Click the add new user icon which will bring up the Add New User form

  3. Enter all the required information (use your email address) for the manager and click submit

  4. You should be back on the user list - click the add new user icon again

  5. Fill out all the required information (use your email address) for the employee

  6. Select the employee role

  7. Set “reports to” to the manager user you just created in the previous step

  8. Finally create a user for the designer and be sure to give this user the special frevvo.Designer system role


Create User Screen Example (for the employee user)

 Create User Example (for the designer)


You should now have a designer, manager and employee user (with the employee role) and a reporting relationship defined between the manager and the employee. 

Step 2: Create the Workflow

Now it is time to create the workflow.  Login to your tenant as the designer user.  Workflows are always contained within a frevvo application.  From the Applications page you can either click Edit on an existing application or click the New button in the upper right hand corner to create a new application.


Once you are in the application, click on Flows in the navigation bar on the left side.  Finally click the New button in the upper right-hand corner.


 


You will be in the flow designer now. Enter Vendor Quote for the flow name property on the left.

The flow will consist of 3 steps:

  1. A form step for the employee to fill out the project details

  2. A form step for the anonymous vendor to provide quote information

  3. A form step for the employee’s manager to review

Start by dragging a single form step on to the flow designer work space.  We will add the rest of the steps later.

  1. Click on this 1st form step.
  2. Click on the icon to open the Flow Step Properties.
  3. Enter the Name “Employee”.  
  4. Click Submit


Step 3: Build the Form

For this workflow, we are going to design the entire form layout as part of the first step.  We will then use the linked step feature of frevvo and business rules to customize the view based on which step is being performed.  The steps are:

  1. Click on the Employee step in the flow designer (you should see some icons appear on the bottom of the step)

  2. Click on the pencil to go into the form designer


The layout of the form consists of 5 components:

  1. Read-only employee info (First Name, Last Name & Email) that will be automatically populated based on the user that initiates this workflow.

  2. Job request section where the employee will fill out the details of the work to be done.

  3. Vendor quote section to be filled out by the vendor

  4. Manager approval section

  5. Hidden fields (used to capture the manager of the employee that filled) 

Enter the Form Name 'Employee' in the Properties Panel on the left

Drag and drop the various controls on your form, name the fields and give them labels so that the form looks something like the following:


The form you create does not have to look exactly like the picture above.  Using the form designer is out of scope for this tutorial so it will focus only on features relevant to this particular workflow.  For more detailed instructions on designing forms, go here.

When you are happy with the way the form looks, click on the Manager section of the form and uncheck the Visible property.  We will handle enabling this section in the last step of the setup. 

Step 4: Employee Info

First we will work with the fields designed to capture information about the user initiating the work flow:

  • First Name

  • Last Name

  • Email

  • Employee’s Manager 

The first 3 fields should be visible but disabled as we can determine these values automatically and don’t need to enter them manually or changed by someone using the workflow.  Select each control and then uncheck Enabled in the Settings section under Properties on the left side of the designer.  The Employee's Manager field should be hidden so uncheck Visible for that control.

Next we need to initialize these values with a business rule: 

  1. Click on the rules toolbar button () which will bring up the rule editor.

  2. Click the plus to create a new rule and a new rule will appear directly below.

  3. Click on the pencil icon next to the rule and you can change the rule name and description if you want.  Finally, enter the following for the rule itself: 

 
Expand
titleClick here to see how to create this rule

The Visual Rule Builder consists of 3 wizards:

  • Condition wizard - describe the conditions under which a set of actions should be executed
  • Action wizard - declare the actions that should be taken when the condition is true
  • Else Action wizard - declare the actions that should be taken when the condition is false

  1. Click the Employee step then click the blue pencil icon to edit it
  2. Click the  Rule icon on the Flow Designer toolbar
  3. Click the to add the rule.
  4. Click the red pencil icon on the rule to expand it.
  5. Name the rule Set Employee Information
  6. Click the Run Builder button then check the Initialization rule only checkbox. Click Add Condition
  7. Select Current Step from the first dropdown
  8. Select is on or after from the second dropdown
  9. Select Employee from the third dropdown
  10. Click Next
  11. Click the Add Condition button
  12. Select FirstName from the first dropdown.
  13. Select to from the second dropdown
  14. Select userFirstName function from the third dropdown. Complete the brackets.
  15. Click the Add Condition button again
  16. Select LastName from the first dropdown.
  17. Select to from the second dropdown
  18. Select userLastName function from the third dropdown. Complete the brackets.
  19. Click the Add Condition button again
  20. Select Email from the first dropdown.
  21. Select to from the second dropdown
  22. Select userEmail function from the third dropdown. Complete the brackets.
  23. Click the Add Condition button again
  24. Select Email from the first dropdown.
  25. Select to from the second dropdown
  26. Select userEmail function from the third dropdown. Complete the brackets.
  27. Click the Add Condition button again
  28. Select EmployeeManager from the first dropdown.
  29. Select to from the second dropdown
  30. Select userManagerID function from the third dropdown. Complete the brackets.
  31. Click Finish.

The Rule should look like this on the Rule Editor page:

 

Click the save toolbar button on the right to save the flow so we can test it out.  You should be back in the flow designer at this point.  Click save again to get back to the flow list.

Click Test and verify () that first name, last name and email are being populated correctly.

Step 5: Vendor Section

Now let’s set up the part of the workflow that the vendor is going to use.  The form should contain a field called VendorEmail.  The employee will need to enter this so frevvo knows where to send the email for the next step.  Let’s enforce this by going into the form designer for the first step and making VendorEmail required: 

  1. Click on the Employee step so that it has context

  2. Click on the blue pencil icon within the step to bring up the form designer

  3. Click on the Vendor Email to give that control focus

  4. Make sure Required is checked (in the Settings section on the left properties panel)

  5. While you’re at it, make Design Job and Vendor Name required too so that the vendor has enough information to formulate a quote

  6. While we’re in here note the name of the VendorEmail control (you could copy it into your clipboard as well since we’re gong to need this value using CTRL-C or CMD-C)

  7. Click the save toolbar button to go back into the flow designer

Next we need to configure the flow so that step 2 uses the the email address entered into the VendorEmail control. We also need the vendor to see everything that the employee has entered in the first step.  So Rather than creating a second form for this, we’ll used the linked step feature to create a step for the vendor that is derived from (or linked to) the form in the first step: 

Click on the first step so it has focus (you’ll see at some icons appear at the bottom of the step box)

  1. Click on the icon that looks like this .

  2. A linked copy of the Employee form (double box), is added to the flow.

  3. Click on the 2nd step in the flow.

  4. Click on the icon to open the Flow Step Properties.

  5. In the Settings tab Name the step Vendor.

  6. Click on the Assignment tab. In the field property called Assign to Email (No Login Required) (Only one address allowed)- enter the name of the control being used to collect the vendor email address surrounded by curly braces (for example {VendorEmail}. The usage of the curly brace syntax is used throughout frevvo as a shorthand to get a given control’s value.


At this point your form will look like this

 

Step 6: Changing Form Behavior Based On The Step

The same information is needed for both the employee and vendor steps however we don’t want the Vendor changing data that the employee entered.  Come to think of it, we don’t even want or need the employee to see the section that the vendor has to fill out.  This can be accomplished with the following steps: 

  1. Click on the Employee step so that it has context

  2. Click on the blue pencil icon within the step to bring up the form designer

  3. Click on the Vendor Quote Section to give that control focus

  4. Uncheck all three Required, visible and printable checkboxes in the Settings section on the left properties panel

  5. Now we create a rule to show the Vendor approval section to the vendor on the vendor step

    Expand
    titleClick here to see how to create this rule

    The Visual Rule Builder consists of 3 wizards:

    • Condition wizard - describe the conditions under which a set of actions should be executed
    • Action wizard - declare the actions that should be taken when the condition is true
    • Else Action wizard - declare the actions that should be taken when the condition is false
    1. Click the Employee step then click the blue pencil icon to edit it
    2. Click the  Rule icon on the Flow Designer toolbar
    3. Click the to add the rule.
    4. Click the red pencil icon on the rule to expand it.
    5. Name the rule Show Vendor Approval on Vendor Step
    6. Click the Run Builder button.
    7. Click the Add Condition button
    8. Select current step from the first dropdown.
    9. Select is on or after from the second dropdown
    10. Select vendor from the third dropdown.
    11. Click Next
    12. Select JobRequest or whatever the name of your Job Request section is from the first dropdown.
    13. Select to disabled in the second drop down
    14. Click Add Action
    15. Select VendorQuote or whatever the name of your vendor section is from the first dropdown.
    16. Select as visible in the second drop down
    17. Click Add Action.
    18. Repeat the above steps for VendorQuote to make it as required and to printable
    19. Click Next. We will be entering the false conditions here i.e if the step is not Vendor step.
    20. Make JobRequest Section enabled by selecting JobRequest in the first dropdown and to enabled in the second dropdown.
    21. Click Add Action
    22. Select VendorQuote or whatever the name of your vendor section is from the first dropdown.
    23. Select as hidden in the second drop down
    24. Repeat the above step to set the Vendor quote to as optional and to not printable
    25. Click Finish.

    The Rule should look like this on the Rule Editor page:

  6. Click the save toolbar button to go back into the flow designer.

  7. Click on the Vendor step so that it has context

  8. While we’re in here note the name of the VendorEmail control (you could copy it into your clipboard as well since we’re gong to need this value using CTRL-C or CMD-C)

  9. Click the save toolbar button to go back into the flow designer

The updated rule first figures out the current step.  If the current step is the employee step, the JobRequest section is enabled but the VendorQuote Section is hidden.  If the current step is the vendor, we disable the JobRequest section, make the VendorQuote Section visible and mark any fields that the vendor must fill in as required.

Step 7: Manager Approval

Finally we need to set up the manager approval.  Just as in the previous step we want to create a linked step:

  1. Go back into the Flow Designer (where you can see all the steps) if you are not already there

  2. Select the “Employee” step by clicking on it

  3. Click the link icon

  4. Drag the step to the end and rename it “Manager” by clicking the icon.

     


This step should only be performed by the manager of the user that initiated the request.  The Flow properties allow the designer to specify what roles or even a specific user that can perform a given step.  

Now we will make use of the hidden EmployeeManagerId control that we are initializing with the business rule we wrote in step 4.  

  1. Click on the icon of the manager step.
  2. On the Assignment tab enter {EmployeeManagerId} in the Assign to User field.  
  3. When the workflow gets to the manager approval step, frevvo will get the value from the EmployeeManagerId control in the form and assign the step to that user.

Once the vendor has completed the quote an email will be sent to the approving manager.  Let’s customize the message a bit by setting the Pending Message property in the Messages tab to the following:

Quote from {VendorName} has been successfully submitted.


Once again, we are using frevvo’s templatizing capability to use data from the form to provide some specific details about the quote to the approving manager.Finally we need to make sure the manager can see all the data in the form and can do the needed approval.  To accomplish this, we need one last rule:

 

Expand
titleClick here to see how to create this rule

The Visual Rule Builder consists of 3 wizards:

  • Condition wizard - describe the conditions under which a set of actions should be executed
  • Action wizard - declare the actions that should be taken when the condition is true
  • Else Action wizard - declare the actions that should be taken when the condition is false
  1. Click the Employee step then click the blue pencil icon to edit it
  2. Click the  Rule icon on the Flow Designer toolbar
  3. Click the to add the rule.
  4. Click the red pencil icon on the rule to expand it.
  5. Name the rule Show Manager Approval Section on Manager Step
  6. Click the Run Builder button.
  7. Click the Add Condition button
  8. Select current step from the first dropdown.
  9. Select is on or after from the second dropdown
  10. Select Manager from the third dropdown.
  11. Click Next
  12. Select JobRequest Manager or whatever the name of your Job Request Manager section is from the first dropdown.
  13. Select to disabled as visible in the second drop down
  14. Click Add Action.
  15. Select Manager or whatever the name of your Manager section is from the first dropdown.
  16. Select as visible in the second drop down
  17. Click Add Action.
  18. Repeat the above steps for Manager Repeat the above steps for Manager to make it as required and to printable
  19. Also make the field ManagerApproveQuote (Radio buttons in the Manager Approval section) as Required.
  20. Click Next. We will be entering the false conditions here i.e if the step is not Vendor step.Make JobRequest Section enabled by selecting JobRequest in the first dropdown and to enabled in the second dropdown.Click Add Action
  21. Select Manager or whatever the name of your vendor section is from the first dropdown.
  22. Select as hidden in the second drop down
  23. Repeat the above step to set the Manager to as optional and to not printable
  24. Make the field ManagerApproveQuote field as Optional.
  25. Click Finish.

The Rule should look like this on the Rule Editor page:


Note that in addition to showing the manager section, we are making the ManagerApproveQuote control required.

Step 8: Access Control

Since this flow requires contributions from people that are anonymous (don’t have a frevvo user id) we need to make the flow accessible to anyone.  This can be done by:

click on the

Changing the flow to Anyone will allow the vendor to access their step but we don’t want just anyone to able to start the flow (which someone could with a public flow if they know have the URL).  To fix this, we set the visibility and permission to the flow: 

  1. Click on the Image Addedlock icon for the flow in either the flow list or from within the flow designer

  2. this This will pop up a window where the designer can specify permissions for the flow

  3. change Change the Visibility of the flow from “Public in Tenant” to “Public” to “Authenticated Users (Login Required)” and for the Permission select “Who can use start the flow”


Click the lock on the flow designer toolbar to configure access
Image RemovedImage Added



Access Control Window

Image Added

Image Removed

Changing the flow to public will allow the vendor to access their step but we don’t want just anyone to able to start the flow (which someone could with a public flow if they know have the URL).  To fix this, we can assign the employee role to the first step in the flow: 

  1. open the flow designer for the flow

  2. click on the ‘Employee’ step so it is selected

  3. select employee for Role 

  4. save the flow

Now only a user that is logged into frevvo and has the employee role can access the first step and initiate a workflow. 

Now only a user that is logged into frevvo can access the first step and initiate a workflow. 

Test the Vendor Quote Workflow

  1. Logon to your Live Forms tenant as the designer on your desktop.
  2. Click on your application and navigate to your flows tab
  3.  Select the Vendor Quote Workflow.
  4. Click the Image Added Test icon under the flow name inside the flows tab

    Image Added

  5. Observe the pre-filled First Name, Last Name and Email
  6. Fill all the required field. Enter your email ID in the Vendor Email field to test the anonymous user step.
  7. Logout as the designer user.
  8. . Fill in the screen flow. Use the Back and Next buttons or swipe to navigate the pages of the forms established by the designer's use of the PageBreak control. The Next button will change to Continue when the flow is navigating to a new form.

     8. You will only see a Save button if the Save/Load property on the flow has been selected. This property saves a  partially complete form/flow on the Live Forms Form Server.

     9. Later the user can re-open the form either in the same browser or a different browser or even from a different computer, and reload the partially completed form and continue working on it. Saved forms are accessed from the users Task List. The Cancel button will take you back to the Space menu.

    10. The Manager's name should be filled in by Live Forms on the first page of the screen flow if you added the rule to do that from the logon information. 

    11. Check to see that the correct keyboards and date pickers are shown for the iPad.

    12. The address should be filled in if you implemented the location feature on the Employee Information Form.

    13. Test to see that you can take a profile picture with the iPad camera and upload it to the Employee Information form.

    14. Verify that the calculation to compute the W - 4 allowances are working and are yielding correct results on the Allowances form. Check that today's date is filled in the Today's Date field if you added the rule to do so.

    15. Sign the Wet Signature control using your finger.

    16. Enter data into the table control on the Education History page. Be sure to try the Degree attained dropdown choices.

    17. Review the data in the W - 4 PDF. Remember, we only mapped a small section of the Employee's Withholding Allowance Certificate.

    18. Click the Send to Manager button when the screen flow is complete. Verify your customized message is displayed to the new employee The flow should progress to the Approval phase now.

    19. Click the Back button then logoff the iPad. Verify Jerry received a task Notification email if you set that up. Do not click on the link in the email as that will take you to the login screen on the desktop.

    20. Logon to the iPhone as Jerry.

    21. Check that the Employee On Boarding task from Tom Cat shows up in Jerry, the manager's Task List.

    22. Tap the task for Tom Cat's Employee On Boarding information. Since we enabled the Quick View feature, you will see the task information, a field to enter a comment and Approve, Reject, Details and a Cancel button. Enter a comment and approve the task. 

    23. You can run through the flow again to see what happens if the task is rejected.

    24. Check to see that the correct pending message is displayed.

    25. Click the Back button and logoff the iPhone.

    26. Logon to Live Forms from a desktop computer as user Sue. Click the Perform this Task icon from Sue's Task List to complete the flow. Verify the correct completion message is displayed.

    27. Logoff Live Forms.

 

 

 


Summary

While this type of quoting workflow would need to be enhanced to suit specific business cases (mostly by adding more form fields) it illustrates how quickly a workflow can be created that can include collaboration with people that are not in your organization and do not have frevvo accounts.