Links
Comment on page

Approval Workflow

Use Case

This tutorial illustrates the process of establishing an Approval Workflow system, where Employee Users complete a Leave Request form that undergoes a series of approvals from a sequence of Administrative Users. The Administrative users will have the authority to approve or reject the request. In certain cases, based on the type of leave, the request may directly go to the Manager, bypassing the Department Supervisors.
The Employee and Administrative user accounts will be stored in a Resource database within the Form.io project. When creating these accounts, roles will be assigned to each user group to distinguish the different groups.
To control the functionalities available to different users within the Approval Workflow process, permissions will be assigned to the Leave Request forms in conjunction with their respective Roles.
Additionally, a series of Emails will be configured to be triggered during various stages of the workflow, such as when a Leave Request is submitted, approved, or denied. Each Email will incorporate conditional rules and SSO tokens to ensure a smooth sign-on process.
Open the video to review the chapter list containing time-stamped links that lead to code snippets and URL examples featured in the tutorial video.

Project Creation

Start the workflow by creating a new project from the Developer Portal. We will be utilizing the default Admin Resource included with the Project during the Approval Workflow process.

Resource Creation

Resources are essential for establishing the RESTful databases required for the Approval Workflow process. These Resources will be used to establish our Employees filling out the Leave Request as well as the Administrative users that will be reviewing the requests.

Department Resource

Departments will be used to associate the different Employee and Administrative users utilized within the workflow.
Resources are flexible and can accommodate as many fields as needed. For instance, if the Department requires a physical location, you have the option to add fields such as Building address or the Department's HR contact information. However, for this example, the Department will be defined using a single "Name" field.
  1. 1.
    Start by creating a new Resource called Department.
  2. 2.
    Add a Text Field to the Resource and label it Name
    • Ensure the Property Name within the API setting tab is name
  1. 3.
    Create the Resource
  2. 4.
    Use the Resource and make 3 submissions to create the Departments:
Sales
IT
Customer Support
Click the Data tab to review your records. This table represents the RESTful database that contains the Department entries that will be utilized by other Resources and logic within the Approval Workflow process.

Employee Resource

Create an Employee Resource to establish a database for our Employee users. The records created within this Resource will utilize a Select component which will associate the Employee with a Department.
  1. 1.
    Create a new Resource called Employee
  2. 2.
    Add a Select component to the form and label it Department.
    • Click the API tab and ensure the Property Name is department
    • Click Data within the Department settings
    • Click the Data Source Type setting and select the Resource option
    • Click the Resource option and select Department
    • Set the Item Template to present the User with the Department Names
    <span>{{ item.data.name }}</span>
  3. 3.
    Next, add an Email and Password field to the Form
    • Ensure the Property Name for the Email field is email
  4. 4.
    Create the Resource.
Additional modifications will be made to this Resource after Roles have been created

Admin Resource

The Admin Resource will be used to create and manage Supervisor and Manager users. Within this Resource, a Select component will be used to determine whether the User is a Supervisor of a specific Department or a Manager overseeing all Departments.
Every Project created within Form.io automatically includes default Forms and Resources with the Admin Resource being one of those defaults. Instead of creating a new Resource, utilize the Admin Resource included with the Project for the following steps.
  1. 1.
    Click the Admin Resource to edit it.
  2. 2.
    Add a Select field called Department
    • Click the API tab and ensure the Property Name is department
    • Click Data within the Department settings
    • Check the Multiple Value setting
    • Click the Data Source Type setting and select the Resource option
    • Click the Resource option and select Department
    • Set the Item Template to present the User with the Department Names
      <span>{{ item.data.name }}</span>
    • Save the Department settings
  3. 3.
    Add another Select field and call it Role.
    • Within the Role field settings, click the Data tab
    • Add the following Labels to the options.
      Supervisor
      Manager
    • Save the Role settings
  4. 4.
    Save the Resource.
Additional modifications will be made to this Resource after Roles have been created

Creating & Delegating Roles

Roles authorize users, allowing them to perform specific tasks and gain access to forms and their underlying submission data. These roles are managed within the Access tab of your project and utilized by the Role Assignment action to assign a designated role to a submission object. They operate in tandem with the Form.io Permission system, which helps regulate access and permissions throughout the project.

Create Roles

Before Roles can be delegated, they first need to be created within the Project.
  1. 1.
    Within your Project, click the Access tab on the left-hand side navigation bar
  2. 2.
    Click the +New Role button and create the following three roles:
Employee
Supervisor
Manager

Delegating Roles

With our Roles in place, we need to assign these Roles to the Permissions for our Resources.
  1. 1.
    Navigate to the Department Resource
  2. 2.
    Click the Access tab
  3. 3.
    Add the following to the Submission Data Permissions
Read All
Employee, Manager, Supervisor
  1. 4.
    Save the settings
  2. 5.
    Repeat the same steps for the Employee and Admin Resource

Assigning Roles

The next step is assigning the Roles to our User groups. This is done by adding the Role Assignment action to the various Resources we established in the previous steps.

Employee Resource - Employee Role

  1. 1.
    Navigate to the Employee Resource and click the Action tab
  2. 2.
    Click the Select an Action dropdown and select the Role Assignment
  3. 3.
    Click the +Add an action button
  4. 4.
    Click the Resource Association dropdown and select Existing Resource
  5. 5.
    Click the Action Type and select Add Role
  6. 6.
    Click the Role dropdown and select the Employee Role.
  7. 7.
    Save the Action settings

Admin Resource - Supervisor Role

  1. 1.
    Navigate to the Admin Resource and click the Action tab.
  2. 2.
    Delete the pre-existing Role Assignment Action by clicking the Trash Can icon
  3. 3.
    Click the Select an Action dropdown and select the Role Assignment
  4. 4.
    Click the +Add an action button
  5. 5.
    Set the Title of the Action to Role Assignment - Supervisor
  6. 6.
    Click the Resource Association dropdown and select Existing Resource
  7. 7.
    Click the Action Type dropdown and select the Add Role option
  8. 8.
    Click the Role dropdown and select the Supervisor Role.
  1. 7.
    Add Conditional Logic to the Action
    • Scroll down to the Action Conditions section
    • Click the Select the conditional field dropdown and select the Role option
    • Click the Select Comparison dropdown and select the Equals option
    • Add supervisor to the Enter Value field
  1. 8.
    Save the Action

Admin Resource - Manager Role

Add an additional Role Assignment action to the Admin Resource
  1. 1.
    Click the Select an Action dropdown and select the Role Assignment
  2. 2.
    Click the +Add an action button
  3. 3.
    Set the Title of the Action to Role Assignment - Manager
  4. 4.
    Click the Resource Association dropdown and select Existing Resource
  5. 5.
    Click the Action Type dropdown and select Add Role
  6. 6.
    Click the Role dropdown and select the Manager Role.
  1. 7.
    Add Conditional Logic to the Action
    • Scroll down to the Action Conditions section
    • Click the Select the conditional field dropdown and select the Role option
    • Click the Select Comparison dropdown and select the Equals option
    • Add manager to the Enter Value field
  1. 7.
    Save the Action

Establishing User Groups

With our Resource models created, Permissions in place, Role Assignment actions ready to distribute the Roles, we are now ready to establish the Employee and Admin user groups.
This tutorial will utilize an SMTP Transport where all emails sent through the transport will be received within one inbox. If you do not have an email transport that functions in this way, you may have to modify the emails submitted within these user groups to ensure you have unique user emails that can be received within one single inbox.

Employees

  1. 1.
    Navigate to the Employee Resource
  2. 2.
    Click the Use tab for the Employee Resource
  3. 3.
    Create an Employee for each Department by filling out and submitting the Form.
Sales - [email protected] - password123
IT - [email protected] - password123
Customer Support - [email protected] - password123
The Department dropdown will determine what each account will associate with. Create enough submissions to associate an employee with all of the available Departments. Ensure you fill out the Department, Email, and Password fields for each submission.
Click the Data tab to review your records. This table represents the RESTful database that contains the Employee database.

Admins

  1. 1.
    Navigate to the Admin Resource
  2. 2.
    Click the Use tab for the Admin Resource
  3. 3.
    Create a Department Supervisor for each Department by filling out and submitting the Form.
  4. 4.
    Create a Manager for all Departments by adding all 3 departments to the Department field and submitting the form.
Sales - Supervisor - [email protected] - password123
IT - Supervisor - [email protected] - password123
Customer Support - Supervisor - [email protected] - password123
Sales, IT, Customer Support - Manager - [email protected] - password123
The Department dropdown will determine what each Admin account will associate with. Create enough submissions to associate a Department Supervisor with all of the available Departments. The Manager account will include all three departments. Ensure you fill out the Department, Role, Email, and Password fields for each submission.
Click the Data tab to review your records. This table represents the RESTful database that contains the Employee database.

Leave Request Form

The Leave Request form is what the Employee users will fill out when requesting their leave. This same form will be used by the Administrative users to either approve or deny the request and move the form status along in the Approval Workflow process.
  1. 1.
    Click the Forms tab from the left-hand navigation bar
  2. 2.
    Click the +New Form button
  3. 3.
    Name the Form Leave Request and create the Form.

Leave Request Panel

The Leave Request Panel section is designed for Employees to view and complete. This part of the form will be submitted by the Employee and subsequently reviewed by the Administrative users to either be approved or denied.
Remember to periodically save the form

Input Fields

The basic input fields within the Leave Request section of the form.
  1. 1.
    Add a Panel component to the form called Leave Request.
  2. 2.
    Within the Leave Request section, add a Select component called Status
    • Within the Display tab, check the Hidden setting.
    • Click the Data tab and the following Labels to the options.
      Requested Emergency Supervisor Approved Manager Approved Denied
    • Within the Data tab, click the Default Value setting and select Requested
    • Within the Data tab, uncheck the Clear Value When Hidden setting
The Status field will determine the State of the submission within the Approval Workflow process. Later in this documentation, a Form Controller will be used to control these values to create a State Machine for the Form, which will kick off the Approval Workflow process.
  1. 3.
    Add a Select component called Leave Type.
    • Click the Data tab and the following Labels to the options. Personal Sick Bereavement Maternal Emergency Other
  2. 4.
    Add a Date / Time component called Start Date.
    • Within the Display tab, remove the Time portion of the Format so it reads: yyyy-MM-dd
    • Click the Time tab and uncheck the Enable Time Input to ensure we only have a Date input within the field
  3. 5.
    Add another Date / Time component called End Date and repeat steps 4
Use different layout components to change the way the fields are presented on the Form. For example, a column component was used in the screenshot below to have the Date fields appear side by side.

Conditional Fields

Fields that will only show when certain values on the form are selected.
  1. 6.
    Add a Text Area component below the Leave Type field called Explain the type of leave you are requesting
    • Within the Display tab, click the Editor setting and select CKEditor
    • Click the Conditional tab
    • Set the Show or Hide this field setting to Show This Field
    • Set the When setting to When all conditions are met
    • Click the +Add Condition button
    • Set When to Leave Type, Is to Is Equal To, and Value to Other
    • Save the condition and component settings
  2. 7.
    Add another Text Area component below the Leave Type field called Please explain the emergency
    • Within the Display tab, click the Editor setting and select CKEditor
    • Click the Conditional tab
    • Set the Show or Hide this field setting to Show This Field
    • Set the When setting to When all conditions are met
    • Click the +Add Condition button
    • Set When to Leave Type, Is to Is Equal To, and Value to Emergency
    • Save the condition and component settings

Data Source & Hidden Fields

Hidden components will be added to hold Admin Resource data associated with the logged-in user. This data will be fetched by the Data Source component and will emit an event that our conditional and calculation logic will use detailed further in the documentation.
  1. 8.
    Add a Hidden component to the form called Supervisor.
    • Ensure the Property Name is supervisor
  2. 9.
    Add another Hidden component to the form called Manager.
    • Ensure the Property Name is manager
  3. 10.
    Add a Data Source component to the form called Admin
    • Ensure the Property Name is admin
    • Click the Trigger tab and add the following to the Trigger on Event setting fetchAdmins
    • Click the Fetch tab
    • Add the following URL to the Data Source URL setting
https://yourdomain.form.io/admin/submission?data.department._id={{ data.employee.data.department._id }}
The yourdomoain.form.io within the URL will need to be changed to your own Form.io project domain. You can find the domain within the header of your Project underneath the Project Title.
  • Within the Fetch tab, click the Transform Data tab
  • Add the following JavaScript to the Code Block
var manager = null;
var supervisor = null;
responseData.forEach(function(item) {
if (item.data.role === 'manager') {
manager = item;
}
else if (item.data.role === 'supervisor') {
supervisor = item;
}
});
if (manager) {
instance.root.getComponent('manager').setValue(manager);
}
if (supervisor) {
instance.root.getComponent('supervisor').setValue(supervisor);
}
This JavaSript will check the meta-data of the logged-in Employee and will populate the hidden components with the associated Admin data for the employee. This data will then be utilized within other conditions and calculations workflows within the Form.
  • Finally, within the Fetch tab, check the Form.io Authentication setting
Calculated Fields
Calculated Fields will be used to calculate data from the application and other fields within the form. These fields will output account information and other administrative information the form will utilize.
  1. 11.
    Add a Select component above the Status field called Employee.
    • Ensure the Property Name is employee
    • Click the Data tab within the component settings
    • Select Resource value from the Data Source Type dropdown
    • Select Employee value from the Resource dropdown
    • Set the Item Template to the following: <span>{{ item.data.email }}</span>
    • Click the Calculated Value tab and add the following JavaScript to the Code Block
if (_.isEmpty(value)) {
var user = Formio.getUser();
if (user && user.data && user.data.email) {
value = user;
clearTimeout(instance.fetchTimeout);
instance.fetchTimeout = setTimeout(function() {
instance.emit('fetchAdmins');
console.log('here');
}, 100);
}
}
This code will use the Formio.getUser() variable to populate the Employee's email within the field. It will also ensure this information is cleared out after a timeout occurs on the Form.
  1. 12.
    Add a Content component to the form
    • Add the following table to the Content section
    • Check the Refresh On Change setting
Department
{{ data.employee?.data?.department?.data?.name }}
Manager
{{ data.supervisor?.data?.email }}
Supervisor
{{ data.manager?.data?.email }}
This table will interpolate the metadata from the logged-in Employee and display the Employee’s Department, Supervisor, and Manager.

Supervisor Approval Panel

This Panel will display when the Department Supervisor logs in to review the Leave Request.
  1. 1.
    Add a Panel below the Leave Request panel called Supervisor Approval
    • Click the Conditional tab
    • Open the Advanced Conditions tab and add the following JavaScript to the Code Block
var user = Formio.getUser();
if (
!user ||
!user.data.email ||
!data.supervisor ||
!data.supervisor.data.email ||
!data.manager ||
!data.manager.data.email
) {
show = false;
}
else {
show = (user.data.email === data.supervisor.data.email) || (user.data.email === data.manager.data.email);
}
This Javascript is using the getUser variable to determine who is logged in. If the User carries the Supervisor or Manager role, the Panel will display within the Form.
  1. 2.
    Add a Select component within the Panel called Supervisor Approval.
    • Ensure the Property Name is supervisorApproval1
    • Click the Data tab and add the following option Labels Approved Denied
    • Ensure the Values for the options are approved and denied'
  1. 3.
    Add a Text Area component called Denial Reason
    • Within the Display tab, click the Editor setting and select CKEditor
    • Click the Conditional tab
    • Set the Show or Hide this field setting to Show This Field
    • Set the When setting to When all conditions are met
    • Click the +Add Condition button
    • Set When to Supervisor Approval, Is to Is Equal To, and Value to Denied
    • Save the condition and component settings
  2. 4.
    Add a Signature component so the Supervisor can sign off on the request.

Manager Approval Panel

This Panel will display when the Manager logs in to review the Leave Request.
  1. 1.
    Add a Panel below the Supervisor Approval panel called Manager Approval
    • Within the Panel settings, click the Conditional tab
    • Open the Advanced Conditions tab and add the following JavaScript to the Code Block
var user = Formio.getUser();
if (
!user ||
!user.data.email ||
!data.manager ||
!data.manager.data.email
) {
show = false;
}
else {
show = (user.data.email === data.manager.data.email);
}
This Javascript is using the getUser variable to determine who is logged in. If the User carries the Manager role, the Panel will display within the Form.
  1. 2.
    Add a Select component within the panel called Manager Approval.
    • Ensure the Property Name is managerApproval1
    • Click the Data tab and add the following option Labels Approved Denied
    • Ensure the Values for the options are approved and denied'
  1. 3.
    Add a Text Area component called Denial Reason
    • Within the Display tab, click the Editor setting and select CKEditor
    • Click the Conditional tab
    • Set the Show or Hide this field setting to Show This Field
    • Set the When setting to When all conditions are met
    • Click the +Add Condition button
    • Set When to Manager Approval, Is to Is Equal To, and Value to Denied
    • Save the condition and component settings
  2. 4.
    Add a Signature component so the Manager can sign off on the request.

Roles & Permission

Next, configure the Roles & Permissions on the form to determine what each User Group's role can do on the Leave Request form and it's underlying data.
  1. 1.
    Click the Access tab for the Leave Request form.
  2. 2.
    Add the following Roles to the Submission Data Permissions:
Permission
Role(s)
Create Own
Employee
Create All Submissions
Supervisor, Manager
Read Own
Employee
Read All Submissions
Supervisor, Manager
Update Own
N/A
Update All Submissions
Supervisor, Manager
Delete Own
N/A
Delete All
Manager
  1. 3.
    Remove the Anonymous Role from the Form Definition Access
  2. 4.
    Save the settings

Form Controller

The Form Controller is a powerful tool within Form.io that provides an additional layer of control over the rendered Form by using JavaScript. In this example, we are going to use the Form Controller to manage the State of the Form using JavaScript code. The State will be mapped to the Status field values within the form. Follow the steps below to more efficiently manage the workflow of the Leave Request Form:
  1. 1.
    Within the Leave Request Form, click the More Settings (...) tab and select Form Settings
  2. 2.
    Copy the following JavaScript code
instance.options.hooks.beforeSubmit = function(submission, next) {
if (!submission.data.status) {
submission.data.status = 'requested';
}
if (
submission.data.status === 'requested' &&
submission.data.supervisorApproval1 === 'approved'
) {
submission.data.status = 'supervisorApproved';
}
if (((
submission.data.status === 'supervisorApproved') ||
(submission.data.status === 'emergency')) &&
submission.data.managerApproval1 === 'approved'
) {
submission.data.status = 'managerApproved';
}
if (
submission.data.supervisorApproval1 === 'denied' ||
submission.data.managerApproval1 === 'denied'
) {
submission.data.status = 'denied';
}
if (
submission.data.status === 'requested' &&
submission.data.leaveType === 'emergency'
) {
submission.data.status = 'emergency';
}
next();
};
  1. 3.
    Scroll down to the Form Controller code block and paste the code
  2. 4.
    Save the settings
To summarize, the code is adding a beforeSubmit handler that identifies the State of the Form. The Workflow starts with the Employee submitting the Form with the Requested value from the Status field. When the Supervisor Approves the request, the Form enters into the Supervisor Approved state by applying that value to the Status field. From there, the Manager will review the request, and if approved, will enter into the Manager Approved state. If either the Supervisor or the Manager denies the request, the form will enter into the Denied state. If a Leave Request is submitted with the Emergency Leave Type, the form will carry the Emergency state.

Email Action Worfklow

The Email Action will fire off an email when something happens on the form, like when an Employee initially submits the Leave Request submission or an Admin updates the submission with an Approval or Denial. These Email Actions will take into account the current State of the form set by the State Machine and execute Actions based on the state. There will be several Email Actions saved to the Leave Request form that will execute each possible Leave Request scenario. Each Email will include an SSO Token to seamlessly log in to the appropriate user within the workflow.
This tutorial is utilizing an SMTP Transport, like Mail Trap, where all emails sent through the transport will be received within one inbox. It's required you set up your own Email Transport in order for this Email workflow to function properly.
Click Here for more information on setting up different transports.

Supervisor Email

  1. 1.
    Click the Action tab within the Leave Request form
  2. 2.
    Add an Email Action titled Supervisor
  3. 3.
    Click Transport and select your integrated email transport.
  4. 4.
    Add the following within the To: Email Address {{ data.supervisor.data.email }}
  1. 4.
    Modify the Message field to include an SSO Token that will authenticate the Supervisor. https://pro.formview.io/?token=[[token(data.email=admin)]]#/abcdqweruiiopjkkl/leaverequest/submission/{{ id }}/edit

Here's a summary of what the SSO token is doing:
https://pro.formview.io/
The Application domain the SSO token will authenticate the user into. In this example, we will be using the FormView Pro Application to test out the workflow.
token=[[token(data.email=admin)]]
The token will then search within the Admin resource and try to find a record that matches the To:Email Address within the action and the Email data within the given Resource. If a match is found, a special JWT token will be generated.
/abcdqweruiiopjkkl/leaverequest/submission/
This is the Form.io project domain, and the submission endpoint of the form the token will be authenticating the user into.
{{ id }}/edit
The specific ID of the submission the SSO token is authenticating the user into. The user will be viewing the submission in Edit mode when the SSO token is clicked.

In order for the SSO token to function with your own Project, you will need to modify the example URL to include your own Form.io project domain.
You can also use HTML classes and the integrated Bootstrap library to create your own custom ways of presenting the SSO link. Here’s an example of the SSO Token link within a button block:
<a class="btn btn-primary btn-block" href="https://pro.formview.io/?token=[[token(data.email=admin)]]#/myformio.domain/leaverequest/submission/{{ id }}/edit">Click here to approve or deny request.</a>--
  1. 5.
    Scroll down to the Action Conditionals
    • Click the Select the conditional field setting and click the Status option
    • Click the Select comparison setting and select Equals
    • Input requested in the Value field
  2. 6.
    Save the action

Manager Email

  1. 1.
    Add an additional Email Action titled Manager
  2. 2.
    Click Transport and select your integrated email transport.
  3. 3.
    Add the following within the To: Email Address {{ data.manager.data.email }}
  4. 4.
    Modify the Message field to include an SSO Token that will authenticate the Manager. https://pro.formview.io/?token=[[token(data.email=admin)]]#/myformio.domain/leaverequest/submission/{{ id }}/edit
  5. 5.
    Within the Action Execution section, click Methods and add Update
  6. 6.
    Scroll down to the Action Conditionals
    • Click the Select the conditional field setting and click the Status option
    • Click the Select comparison setting and select Equals
    • Input supervisorApproved in the Value field
  7. 7.
    Save the action

Emergency Email

  1. 1.
    Add an additional Email Action titled Emergency
  2. 2.
    Click Transport and select your integrated email transport.
  3. 3.
    Add the following within the To: Email Address {{ data.manager.data.email }}
  4. 4.
    Modify the Message field to include an SSO Token that will authenticate the Manager. https://pro.formview.io/?token=[[token(data.email=admin)]]#/myformio.domain/leaverequest/submission/{{ id }}/edit
  5. 5.
    Scroll down to the Action Conditionals
    • Click the Select the conditional field setting and click the Status option
    • Click the Select comparison setting and select Equals
    • Input emergency in the Value field
  6. 6.
    Save the action

Approval Email

  1. 1.
    Add an additional Email Action titled Approved
  2. 2.
    Click Transport and select your integrated email transport.
  3. 3.
    Add the following within the To: Email Address {{ data.employee.data.email }}
  4. 4.
    Modify the Subject of the action to Your Leave Request Has Been Approved
  5. 5.
    Modify the Message field to include an SSO Token that will authenticate the Employee. To do this, change admin to employee. This will change the SSO token to search the email field within the Employee Resource. https://pro.formview.io/?token=[[token(data.email=employee)]]#/myformio.domain/leaverequest/submission/{{ id }}/edit
  6. 6.
    Within the Action Execution section, click Methods and select Update
  7. 7.
    Scroll down to the Action Conditionals
    • Click the Conditional Field setting and select the Status field
    • Click the Comparison setting and select Equals
    • Input managerApproved in the Value field
  8. 8.
    Save the action

Denial Email

  1. 1.
    Add an additional Email Action called Denied
  2. 2.
    Click Transport and select your integrated email transport.
  3. 3.
    Add the following within the To: Email Address {{ data.employee.data.email }}
  4. 4.
    Modify the Subject of the action to Your Leave Request Has Been Denied
  5. 5.
    Modify the Message field to include an SSO Token that will authenticate the Employee. https://pro.formview.io/?token=[[token(data.email=employee)]]#/myformio.domain/leaverequest/submission/{{ id }}/edit
  6. 6.
    Within the Action Execution section, click Methods and select Update
  7. 7.
    Scroll down to the Action Conditionals
    • Click the Conditional Field setting and select the Status field
    • Click the Comparison setting and select Equals
    • Input denied in the Value field
  8. 8.
    Save the action
That completes the Actions for the Leave Request form.

Login Form

The final step before testing out the workflow is to reconfigure the Login form.
  1. 1.
    Find the User Login form from the list of Forms within the Project
  2. 2.
    Click the Action tab
  3. 3.
    Edit the Login Action
  4. 4.
    Click the Resources field and add Admin and Employee
  5. 5.
    Save the Action
This will ensure the Login action will search the correct records when authenticating the user into the Form.

Workflow

With everything in place, let's test out the Workflow using the FormView Pro application.
  1. 1.
    Navigate to the Leave Request Form and click the Launch tab
  2. 2.
    Click the Go to Form button to launch within the FormView Pro application

Employee Workflow

  1. 1.
    Login using the credentials for one of the Employee Users [email protected] / password123 You should see the email address populated in the Employee field and a summary of the Employee's Department, Manager, and Supervisor
  2. 2.
    Click the Leave Type field and select Sick
  3. 3.
    Input dates into the Start Date and End Date fields
  4. 4.
    Submit the form
  5. 5.
    Log out of the Application
To ensure the FormView Pro application does not get confused with multiple tokens being used to authenticate into the application, be sure to log out of the application after each workflow exercise
The form will now be in the Requested state and will fire off the initial workflow by sending an email to the Department Supervisor of the Employee.

Supervisor Workflow

There should now be a Leave Request email waiting for the Employee's Department Supervisor.
  1. 1.
    Check the inbox for the Department Supervisor
  2. 2.
    Open the Leave Request by clicking the SSO link within the email
  3. 3.
    You should see the Supervisor Approval panel
  4. 4.
    Review and Approve the request.
  5. 5.
    Submit the form.
To ensure the FormView Pro application does not get confused with multiple tokens being used to authenticate into the application, be sure to log out of the application after each workflow exercise
The form will now be in the Supervisor Approved state and will fire off another email to the Manager to further progress the workflow.

Manager Workflow

There should now be a Leave Request email waiting for the Supervisor of the Department the request came from.
  1. 1.
    Check the inbox for the Department Supervisor
  2. 2.
    Open the Leave Request by clicking the SSO link within the email