What You Will Need

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

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

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

1. click Manager 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

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 4 activitiessteps:

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

2. an email activity step to send an email to the vendor

3. a form activity step for the vendor to provide quote information

4. a form activity step for the employee’s manager to review

Start by dragging a single form activity step on to the flow designer workspace and then an email activity step directly below it.  We will add the rest of the steps later.

Click on the 1st form activity step and set the Name to “Employee”.  Click on the 2nd activity step and change the name to ‘Send to Vendor’.

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 activity step feature of frevvo and business rules to customize the view based on which activity step is being performed.  The steps are:

1. click on the Employee step in the flow designer (you should see some icons appear in the upper right-hand corner of the activity step when it has focus)

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

Image RemovedImage Added

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) 

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 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 (3 horizontal lines) 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: 

if (form.load) {
  if (FirstName.value.length === 0) {
    FirstName.value = _data.getParameter('subject.first.name'); 
    LastName.value = _data.getParameter('subject.last.name'); 
    Email.value = _data.getParameter('subject.email');
    EmployeeManagerId.value = _data.getParameter('subject.reports.to');
  }
}

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.

Form Designer Toolbar (rule button highlighted)

Create Rule

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 activity step so that it has context

2. click on the pencil icon within the activity 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 of the designer)

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:

1. click on the 2nd activity step in the flow (“Send to Vendor”) to select it

2. in the Settings tab is a property called Email Address - 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.

Finally we need the vendor to see everything that the employee entered in the first step.  Rather than create a second form for this, we’ll used the linked activity step feature to create an activity step for the vendor that is derived from (or linked to) the form in the first activitystep:

1. click on the first activity step so it has focus (you’ll see at some icons appear within the activity step box)

2. click on the icon that looks like 2 links in a chain

You will see a new activity step inserted into the flow between the Employee activity step and the Email activitystep.  Linked activities steps are denoted by a dashed border.  Finally this activity step needs to be performed after the email step so drag the new activity step below the email address.

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 a minor modification to our initialize rule:

if (form.load) {
  var an = _data.getParameter('flow.activitystep.name');
  if (an === "Employee") {
    JobRequest.enabled = true;
    VendorQuoteSection.visible = false;
  } else if (an === "Vendor") {
    JobRequest.enabled = false;
    VendorQuoteSection.visible = true;
    VendorQuote.required = true;
    VendorSignature.required = true;
  }
  if (FirstName.value.length === 0) {
    FirstName.value = _data.getParameter('subject.first.name'); 
    LastName.value = _data.getParameter('subject.last.name'); 
    Email.value = _data.getParameter('subject.email');
    EmployeeManagerId.value = _data.getParameter('subject.reports.to');
  }
}

The updated rule first figures out the current activitystep.  If the current activity step is the employee step, the JobRequest section is enabled but the VendorQuoteSection is hidden.  If the current step is the vendor, we disable the JobRequest section, make the VendorQuoteSection 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 activitystep:

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

2. select the “Employee” activity step by clicking on it

3. click the link icon (2 links in a chain)

4. drag the activity step to the end and rename it “Manager”

This step should only be performed by the manager of the user that initiated the request.  When the “Manager” step has focused, you will notice role and user fields to the left under settings.  These properties allow the designer to specify what roles or even a specific user that can perform a given step.  This can’t be determined when the flow is being designed as it depends on the user that initiated the workflow.

Now we will make use of the hidden EmployeeManagerId control that we are initializing with the business rule we wrote in step 4.  Next to User enter {EmployeeManagerId}.  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 Msg property to the following:

Quote from {VendorName} has been successfully submitted.

Once again, we are leverage frevvo’s templating capability to use data from the from 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 change to our initializtion rule:

if (form.load) {
  var an = _data.getParameter('flow.activitystep.name');
  if (an === "Employee") {
    JobRequest.enabled = true;
    VendorQuoteSection.visible = false;
  } else if (an === "Vendor") {
    JobRequest.enabled = false;
    VendorQuoteSection.visible = true;
    VendorQuote.required = true;
    VendorSignature.required = true;
  } else if (an === "Manager") {
    JobRequest.enabled = false;
    VendorQuoteSection.enabled = false;
    Manager.visible = true;
    IApproveThisQuote.required = true;
  }
  if (FirstName.value.length === 0) {
    FirstName.value = _data.getParameter('subject.first.name'); 
    LastName.value = _data.getParameter('subject.last.name'); 
    Email.value = _data.getParameter('subject.email');
    EmployeeManagerId.value = _data.getParameter('subject.reports.to');
  }
}

Note that in addition to showing the manager section, we are making the IApproveThisQuote 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:

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

1. open the flow designer for the flow

2. click on the ‘Employee’ activity 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.

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.