Live Forms Latest - This documentation is for Live Forms 8.0 Not for you? Earlier documentation is available too.

Skip to end of metadata
Go to start of metadata

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

What You Will Need

  1. Live Forms account on the frevvo SaaS server or a working in-house 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. It is also not required to be printed in the final pdf generated so uncheck the printable option as well.

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: 

 
 Click 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. Click Add Condition
  7. Select Current Step from the first dropdown
  8. Select is 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.

We will need to do some settings.

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

  • Click on the to go into the flow step properties

  • In the settings tab enter 'Send to Vendor' in the Continue Label field

  • Click Submit

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. Enter 'Send Quote to frevvo Inc.' in the Continue label field.

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

  8. In the Subject field under the Task Notification Email enter text 'Request for Quote from frevvo'. Keep the default Message text.

  9. Click on the Messages tab

  10. Enter 'Job quote request sent to {VendorName}' in the Pending Message property field. This is the message the employee see when the form is submitted.

  11. Click Submit.

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

     Click 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. 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.
  3. Under the Task Notification Email Section enter the subject 'Quote from {VendorName} for Approval'. This is the subject of the email the manager will receive to notify of the approval task.
  4. Click on the Messages tab
  5. Enter the Task Information as 'Quote from {VendorName} for Approval'. This is the info the manager will see in the Task List
  6. Enter the pending Message as 'Quote for the job request - {DesignJob} successfully sent to frevvo.' This is the message the vendor sees on submission of the quote.

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:

 

 Click 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 Manager or whatever the name of your Manager section is from the first dropdown.
  13. Select as visible in the second drop down
  14. Click Add Action.
  15. Repeat the above steps for Manager to make it as required and to printable
  16. Also make the field ManagerApproveQuote (Radio buttons in the Manager Approval section) as Required.
  17. Click Next. We will be entering the false conditions here i.e if the step is not Vendor step.
  18. Select Manager or whatever the name of your vendor section is from the first dropdown.
  19. Select as hidden in the second drop down
  20. Repeat the above step to set the Manager to as optional and to not printable
  21. Make the field ManagerApproveQuote field as Optional.
  22. 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

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 lock icon for the flow in either the flow list or from within the flow designer

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

  3. Change the Visibility of the flow to “Authenticated Users (Login Required)” and for the Permission select “Who can start the flow”


Click the lock on the flow designer toolbar to configure access



Access Control Window

 

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

Step 9: Setting Document Action

Now we will set the Document Action so that the employee receives the approved quote form the Vendor. Follow these steps to configure this email:

  1. Click the  what happens to my data icon on the toolbar.
  2. Click on the Email data to a specified address wizard. 
    1. Enter {EmployeeEMail} and {VendorEmail} in the To: field. Separate them with a comma. Ex: {EmployeeEMail},{VendorEmail}

    2. Select PDF from the Send Snapshot dropdown. This adds a pdf to the email after the customer approves it or requests corrections.
    3. Uncheck the Send Data checkbox. Check the Files checkbox. These selections ensure the flow xml will not be attached to the email but any attachments that are uploaded will.
    4. Click Next
    5. Enter "Vendor Quote for frevvo's {DesignJob}" in the subject field.
    6. Copy the text below into the message field to replace the existing message.

       

      The Vendor Quote from {VendorName} for frevvo's {DesignJob} is attached. Please review.
      <br/>
      Thank You.
    7. Click the Finish button

Step 10: Setting the final submission message

We will set a message the user will see after the final submission.

  1. Click the  what does the user see? icon on the toolbar.
  2. Click on the Display message when users submit your form
  3. Enter 'Quote from the Vendor : {VendorName} has been successfully Approved.' in the message field.
  4. Click Finish.
  5. Save the flow.
  6. Log out of live forms.

Test the Vendor Quote Workflow

  1. Logon to your Live Forms tenant as the employee on your desktop.
  2. Click on your application and navigate to your flows tab
  3.  Click the  Test icon under the Vendor Quote Workflow.



  4. Observe the pre-filled First Name, Last Name and Email
  5. Fill all the required fields. Enter your email ID in the Vendor Email field to test the anonymous user step.
  6. Click Continue.
  7. Log out of Live Forms.

  8. Live Forms sends a notification email with your customized subject/message to the email address specified in the Vendor Email field on the first step. 

  9. Open the customer's email with a "Request for Quote from frevvo" subject. Click on the link provided.
  10. You can see the employee name and Job Request data section filled by the employee but it is not editable.
  11. Enter the Vendor Quote Details. Sign and click continue.
  12. Login to Live forms as the manager. You will see the task from Vendor Quote workflow.
  13. Click on the icon to lock the task.
  14. Approve the Quote and Click Finish
  15. Check the email account for the Employee and the Vendor. Verify that the pdf shows the Employee, Vendor and Manager approval section.

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.



  • No labels