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
- 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.
Roles can only be created by the tenant administrator. The steps are:
Login to your tenant with the admin user account
You should be on the manage tenant page (if not click Manage in the upper-right hand corner)
Click Manage Roles
Click the + icon
Type in ‘employee’ into the role name and click submit
Users can also only be created by the tenant administrator. The steps are:
Click Manage Users on the Manage tenant page
Click the add new user icon which will bring up the Add New User form
Enter all the required information (use your email address) for the manager and click submit
You should be back on the user list - click the add new user icon again
Fill out all the required information (use your email address) for the employee
Select the employee role
Set “reports to” to the manager user you just created in the previous step
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.
The flow will consist of 3 steps:
A form step for the employee to fill out the project details
A form step for the anonymous vendor to provide quote information
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.
- Click on this 1st form step.
- Click on the icon to open the Flow Step Properties.
- Enter the Name “Employee”.
- 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:
Click on the Employee step in the flow designer (you should see some icons appear on the bottom of the step)
Click on the pencil to go into the form designer
Read-only employee info (First Name, Last Name & Email) that will be automatically populated based on the user that initiates this workflow.
Job request section where the employee will fill out the details of the work to be done.
Vendor quote section to be filled out by the vendor
Manager approval section
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:
Click on the rules toolbar button () which will bring up the rule editor.
Click the plus to create a new rule and a new rule will appear directly below.
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 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:
Click on the Employee step so that it has context
Click on the blue pencil icon within the step to bring up the form designer
Click on the Vendor Email to give that control focus
Make sure Required is checked (in the Settings section on the left properties panel)
While you’re at it, make Design Job and Vendor Name required too so that the vendor has enough information to formulate a quote
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)
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)
Click on the icon that looks like this .
A linked copy of the Employee form (double box), is added to the flow.
Click on the 2nd step in the flow.
Click on the icon to open the Flow Step Properties.
In the Settings tab Name the step Vendor.
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:Click on the Employee step so that it has context
Click on the blue pencil icon within the step to bring up the form designer
Click on the Vendor Quote Section to give that control focus
Uncheck all three Required, visible and printable checkboxes in the Settings section on the left properties panel
Now we create a rule to show the Vendor approval section to the vendor on the vendor step
Click the save toolbar button to go back into the flow designer.
Click on the Vendor step so that it has context
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)
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:
Go back into the Flow Designer (where you can see all the steps) if you are not already there
Select the “Employee” step by clicking on it
Click the link icon
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.
- Click on the icon of the manager step.
- 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.
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.
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:
Click on the lock icon for the flow in either the flow list or from within the flow designer
This will pop up a window where the designer can specify permissions for the flow
Change the Visibility of the flow to “Authenticated Users (Login Required)” and for the Permission select “Who can start the flow”
Now only a user that is logged into frevvo can access the first step and initiate a workflow.
Test the Vendor Quote Workflow
- Logon to your Live Forms tenant as the designer on your desktop.
- Click on your application and navigate to your flows tab
- Select the Vendor Quote Workflow.
- Click the Test icon under the flow name inside the flows tab
- Observe the pre-filled First Name, Last Name and Email
- Fill all the required field. Enter your email ID in the Vendor Email field to test the anonymous user step.
- Logout as the designer user.
- . 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.