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.
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:
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 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 from “Public in Tenant” to “Public” for the Permission “Who can use the flow”
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:
open the flow designer for the flow
click on the ‘Employee’ step so it is selected
select employee for Role
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.
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.