# 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. {% embed url="" %} {% hint style="info" %} 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. {% endhint %} ## 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**](https://help.form.io/how/broken-reference) 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. {% hint style="info" %} 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. {% endhint %} 1. Start by creating a new **Resource** called **Department**. 2. Add a **Text Field** to the Resource and label it **Name** * Ensure the **Property Name** within the **API** setting tab is **name**
3. **Create** the Resource 4. **Use** the Resource and make 3 submissions to create the Departments: ``` Sales IT Customer Support ``` {% hint style="info" %} 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. {% endhint %}
### Employee Resource Create an Employee Resource to establish a database for our Employee users. The records created within this Resource will utilize a [**Select**](https://help.form.io/how/broken-reference) component which will associate the Employee with a Department. 1. Create a new **Resource** called **Employee** 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. Next, add an [**Email** and **Password**](#user-content-fn-2)[^2] field to the Form * Ensure the **Property Name** for the Email field is **email** 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. {% hint style="info" %} 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. {% endhint %} 1. Click the **Admin** Resource to edit it. 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. Add another [**Select** field ](#user-content-fn-3)[^3]and call it **Role**. * Within the Role field settings, click the **Data** tab * Add the following [**Labels**](#user-content-fn-4)[^4] to the options. ``` Supervisor Manager ``` * **Save** the **Role** settings 4. **Save** the Resource. Additional modifications will be made to this Resource after Roles have been created
## Creating & Delegating Roles [**Roles**](https://help.form.io/how/broken-reference) 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**](https://help.form.io/how/broken-reference) tab of your project and utilized by the [**Role Assignment**](https://help.form.io/how/broken-reference) 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. Within your Project, click the **Access** tab on the left-hand side navigation bar 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. Navigate to the **Department** Resource 2. Click the **Access** tab 3. Add the following to the [**Submission Data Permissions**](#user-content-fn-5)[^5] | **Read All** | **Employee, Manager, Supervisor** | | ------------ | --------------------------------- | 4. **Save** the settings 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**](https://help.form.io/how/broken-reference) action to the various Resources we established in the previous steps. #### **Employee Resource - Employee Role** 1. Navigate to the **Employee Resource** and click the **Action** tab 2. Click the **Select an Action** dropdown and select the **Role Assignment** 3. Click the **+Add an action** button 4. Click the **Resource Association** dropdown and select **Existing Resource** 5. Click the **Action** **Type** and select **Add** **Role** 6. Click the **Role** dropdown and select the **Employee** Role. 7. **Save** the Action settings
#### **Admin Resource - Supervisor Role** 1. Navigate to the **Admin** Resource and click the **Action** tab. 2. Delete the pre-existing **Role Assignment** Action by clicking the **Trash Can** icon 3. Click the **Select an Action** dropdown and select the **Role Assignment** 4. Click the **+Add an action** button 5. Set the **Title** of the Action to **Role Assignment - Supervisor** 6. Click the **Resource Association** dropdown and select **Existing Resource** 7. Click the **Action Type** dropdown and select the **Add Role** option 8. Click the **Role** dropdown and select the **Supervisor** Role.
7. Add [**Conditional Logic**](#user-content-fn-6)[^6] 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`**](#user-content-fn-7)[^7] to the **Enter Value** field
8. **Save** the Action #### **Admin Resource - Manager Role** Add an additional Role Assignment action to the Admin Resource 1. Click the **Select an Action** dropdown and select the **Role Assignment** 2. Click the **+Add an action** button 3. Set the **Title** of the Action to **Role Assignment - Manager** 4. Click the **Resource Association** dropdown and select **Existing Resource** 5. Click the **Action Type** dropdown and select **Add Role** 6. Click the **Role** dropdown and select the **Manager** Role.
7. Add [**Conditional Logic**](#user-content-fn-8)[^8] 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`**](#user-content-fn-9)[^9] to the **Enter** **Value** field
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. {% hint style="warning" %} 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. E.g. - , {% endhint %} ### Employees 1. Navigate to the **Employee** **Resource** 2. Click the **Use** tab for the Employee Resource 3. **Create** an **Employee** for each Department by filling out and **submitting** the Form. ``` Sales - kelly@example.com - password123 IT - sally@example.com - password123 Customer Support - joe@example.com - password123 ``` {% hint style="info" %} 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. {% endhint %}
Click the **Data** tab to review your records. This table represents the RESTful database that contains the Employee database.
### Admins 1. Navigate to the **Admin** Resource 2. Click the **Use** tab for the Admin Resource 3. **Create** a **Department Supervisor** for each Department by filling out and **submitting** the Form. 4. **Create** a **Manager** for all Departments by adding all 3 departments to the Department field and **submitting** the form. ``` Sales - Supervisor - supervisor+sales@example.com - password123 IT - Supervisor - supervisor+it@example.com - password123 Customer Support - Supervisor - supervisor+support@example.com - password123 Sales, IT, Customer Support - Manager - manager@example.com - password123 ``` {% hint style="info" %} 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. {% endhint %}
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. Click the **Forms** tab from the left-hand navigation bar 2. Click the **+New Form** button 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. {% hint style="info" %} Remember to periodically save the form {% endhint %} #### Input Fields The basic input fields within the Leave Request section of the form. 1. Add a **Panel** component to the form called **Leave Request**. 2. Within the Leave Request section, add a **Select** component called **Status** * Within the **Display** tab, check the [**Hidden**](#user-content-fn-10)[^10] setting. * Click the **Data** tab and the following [**Labels**](#user-content-fn-4)[^4] to the options. [`Requested`](#user-content-fn-11)[^11] \ [`Emergency`](#user-content-fn-12)[^12]\ [`Supervisor Approved`](#user-content-fn-13)[^13] \ [`Manager Approved`](#user-content-fn-14)[^14]\ [`Denied`](#user-content-fn-15)[^15] * Within the **Data** tab, click the [**Default Value**](#user-content-fn-16)[^16] setting and select **Requested** * Within the **Data** tab, uncheck the [**Clear Value When Hidden**](#user-content-fn-17)[^17] setting {% hint style="info" %} 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. {% endhint %} 3. Add a **Select** component called **Leave Type**. * Click the **Data** tab and the following [**Labels**](#user-content-fn-4)[^4] to the options.\ `Personal`\ `Sick`\ `Bereavement`\ `Maternal`\ [`Emergency`](#user-content-fn-18)[^18]\ `Other` 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**](#user-content-fn-19)[^19] to ensure we only have a Date input within the field 5. Add another **Date / Time** component called **End Date** and repeat steps 4 {% hint style="info" %} 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. {% endhint %}
#### Conditional Fields Fields that will only show when certain values on the form are selected. 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**](#user-content-fn-20)[^20] 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**](#user-content-fn-21)[^21] * **Save** the condition and component settings 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**](#user-content-fn-22)[^22] 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**](#user-content-fn-23)[^23] * **Save** the condition and component settings
#### **Data Source & Hidden Fields** [**Hidden**](https://help.form.io/how/broken-reference) components will be added to hold Admin Resource data associated with the logged-in user. This data will be fetched by the [**Data Source**](https://help.form.io/how/broken-reference) component and will emit an event that our conditional and calculation logic will use detailed further in the documentation. 8. Add a **Hidden** component to the form called **Supervisor**. * Ensure the **Property Name** is **`supervisor`** 9. Add another **Hidden** component to the form called **Manager**. * Ensure the **Property** **Name** is **`manager`** 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 }}
{% hint style="warning" %} 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. {% endhint %}
* Within the **Fetch** tab, click the **Transform Data** tab * Add the following JavaScript to the **Code Block** ```javascript 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. 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:\ [`{{ item.data.email }}`](#user-content-fn-25)[^25] * Click the **Calculated Value** tab and add the following **JavaScript** to the **Code Block** ```javascript 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()**](https://help.form.io/how/broken-reference) 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. 12. Add a **Content** component to the form * Add the following table to the Content section * Check the [**Refresh On Change**](#user-content-fn-26)[^26] 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. 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** ```javascript 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. 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'**
3. Add a **Text Area** component called **Denial Reason** * Within the **Display** tab, click the **Editor** setting and select **CKEditor** * Click the [**Conditional**](#user-content-fn-27)[^27] 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**](#user-content-fn-28)[^28] * **Save** the condition and component settings 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. 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** ```javascript 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. 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'**
3. Add a **Text Area** component called **Denial Reason** * Within the **Display** tab, click the **Editor** setting and select **CKEditor** * Click the [**Conditional**](#user-content-fn-29)[^29] 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**](#user-content-fn-30)[^30] * **Save** the condition and component settings 4. Add a **Signature** component so the Manager can sign off on the request.
## Roles & Permission Next, configure the [**Roles & Permissions**](https://help.form.io/how/broken-reference) on the form to determine what each User Group's role can do on the Leave Request form and it's underlying data. 1. Click the **Access** tab for the **Leave Request** form. 2. Add the following **Roles** to the **Submission Data Permissions**:
PermissionRole(s)
Create OwnEmployee
Create All SubmissionsSupervisor, Manager
Read OwnEmployee
Read All SubmissionsSupervisor, Manager
Update OwnN/A
Update All SubmissionsSupervisor, Manager
Delete OwnN/A
Delete AllManager
3. Remove the **Anonymous** Role from the [**Form Definition Access**](#user-content-fn-31)[^31] 4. **Save** the settings ## Form Controller The [**Form Controller**](https://help.form.io/how/broken-reference) 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. Within the Leave Request Form, click the **More Settings (...)** tab and select **Form Settings** 2. **Copy** the following JavaScript code ```javascript 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(); }; ``` 3. Scroll down to the **Form Controller** code block and paste the code 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**](https://help.form.io/how/broken-reference) 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**](https://help.form.io/how/broken-reference) to seamlessly log in to the appropriate user within the workflow. {% hint style="warning" %} This tutorial is utilizing an SMTP Transport, like [**Mail Trap**](https://mailtrap.io/), 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**](https://help.form.io/how/broken-reference) for more information on setting up different transports. {% endhint %} ### **Supervisor Email** 1. Click the **Action** tab within the Leave Request form 2. Add an **Email Action** titled [**Supervisor**](#user-content-fn-32)[^32] 3. Click **Transport** and select your integrated email transport. 4. Add the following within the **To: Email Address**\ [`{{ data.supervisor.data.email }}`](#user-content-fn-33)[^33]
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**](https://help.form.io/how/broken-reference) 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. *** {% hint style="info" %} 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. {% endhint %} You can also use HTML classes and the integrated [**Bootstrap**](https://getbootstrap.com/docs/5.3/getting-started/introduction/) 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: ```html –Click here to approve or deny request.-- ``` 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**](#user-content-fn-34)[^34] in the **Value** field 6. **Save** the action
### **Manager Email** 1. Add an additional **Email Action** titled [**Manager**](#user-content-fn-35)[^35] 2. Click **Transport** and select your integrated email transport. 3. Add the following within the **To: Email Address**\ [`{{ data.manager.data.email }}`](#user-content-fn-36)[^36] 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. Within the **Action Execution** section, click **Methods** and add [**Update**](#user-content-fn-37)[^37] 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**](#user-content-fn-38)[^38] in the **Value** field 7. **Save** the action ### **Emergency Email** 1. Add an additional **Email Action** titled [**Emergency**](#user-content-fn-39)[^39] 2. Click **Transport** and select your integrated email transport. 3. Add the following within the **To: Email Address**\ [`{{ data.manager.data.email }}`](#user-content-fn-36)[^36] 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. 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**](#user-content-fn-40)[^40] in the **Value** field 6. **Save** the action ### **Approval Email** 1. Add an additional **Email Action** titled [**Approved**](#user-content-fn-41)[^41] 2. Click **Transport** and select your integrated email transport. 3. Add the following within the **To: Email Address**\ [`{{ data.employee.data.email }}`](#user-content-fn-42)[^42] 4. Modify the **Subject** of the action to **Your Leave Request Has Been Approved** 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. Within the **Action Execution** section, click **Methods** and select [**Update**](#user-content-fn-43)[^43] 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**](#user-content-fn-44)[^44] in the **Value** field 8. **Save** the action ### **Denial Email** 1. Add an additional **Email Action** called [**Denied**](#user-content-fn-45)[^45] 2. Click **Transport** and select your integrated email transport. 3. Add the following within the **To: Email Address**\ [`{{ data.employee.data.email }}`](#user-content-fn-42)[^42] 4. Modify the **Subject** of the action to **Your Leave Request Has Been Denied** 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. Within the **Action Execution** section, click **Methods** and select [**Update**](#user-content-fn-46)[^46] 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**](#user-content-fn-47)[^47] in the **Value** field 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. Find the **User Login** form from the list of **Forms** within the Project 2. Click the **Action** tab 3. Edit the **Login** **Action** 4. Click the **Resources** field and add **Admin** and **Employee** 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. Navigate to the **Leave Request** Form and click the **Launch** tab 2. Click the **Go to Form** button to launch within the **FormView Pro** application
### Employee Workflow 1. **Login** using the credentials for one of the **Employee** **Users**\ / password123\ You should see the email address populated in the Employee field and a summary of the Employee's Department, Manager, and Supervisor 2. Click the **Leave Type** field and select **Sick** 3. Input dates into the **Start Date** and **End Date** fields 4. **Submit** the form 5. **Log out** of the Application {% hint style="warning" %} 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 {% endhint %} 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. **Check** the inbox for the Department Supervisor 2. **Open** the Leave Request by clicking the **SSO** link within the email 3. You should see the **Supervisor Approval** panel 4. Review and **Approve** the request. 5. **Submit** the form. {% hint style="warning" %} 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 {% endhint %} 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. **Check** the inbox for the Department Supervisor 2. **Open** the Leave Request by clicking the **SSO** link within the email 3. You should see the **Supervisor** and **Manager Approval** sections 4. Review and **Approve** the request. 5. **Submit** the form. {% hint style="warning" %} 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 {% endhint %} The form will now be in the **Approved** state and will fire off another email to the Employee to notify them of the approved request. 6. Check the inbox of the **Employee** and ensure you have an email **Approving** the request
### Emergency Request Start a new workflow of the Leave Request form using the Emergency Leave Type. 1. **Launch** the **Leave Request** form 2. **Login** using the credentials for one of the **Employee** **Users**\ / password123 3. Click the **Leave Type** field and select **Emergency** 4. **Input** the reason for the emergency. 5. Input dates into the **Start Date** and **End Date** fields 6. **Submit** the form The form will now be in the **Emergency** state and will fire off an email that bypasses the Department Supervisor and go directly to the Manager to be approved or denied.
### Denied Request At any point during the Leave Request's workflow, the request can be Denied by the Department Supervisor or Manager. 1. **Check** the inbox for the **Manager** Supervisor 2. **Open** the Emergency Leave Request by clicking the **SSO** link within the email 3. You should see the **Supervisor** and **Manager Approval** sections 4. Review and **Deny** the request. 5. **Submit** the form. The form will now be in the **Denied** state and will fire off another email to the Employee to notify them of the denied request. Check the inbox of the **Employee** and ensure you have an email **Denying** the request
[^1]: 'name' is the API Property of the Name field within the Department Resource [^2]: These fields will be used to Authenticate Employees into our application. Feel free to add additional fields like Name, Occupation, Phone Numbers, etc to provide more information or context to the Employee [^3]: This field will be used to determine what kind of Administrator the User will be [^4]: The **Values** will auto-populate in camel case based on the Label input. [^5]: This permission allows anyone within the given Role to read all submission data for the Resource. [^6]: This condition will only execute when the Supervisor Role is selected [^7]: 'supervisor' is the value from the Role field within the Admin Resource [^8]: This condition will only execute when the Manager role is selected [^9]: 'manager' is the value from the Role field within the Admin Resource [^10]: User input for this field is not required and the Status will be handled by the State Machine detailed further in the documentation [^11]: Employee has submitted the Leave Request for review [^12]: Employee has submitted an Emergency request for review [^13]: Supervisor has reviewed and approved the leave request [^14]: Manager has reviewed and approved the leave request approval submitted by the supervisor [^15]: The request has been denied by the Department Supervisor or Manager [^16]: This will be the value set when an Employee initially submits the Leave Request form [^17]: Since this field will be hidden by default, we do not want the values being cleared [^18]: This value will be utilized later in the documentation to fire off a special workflow for Emergency Leave Requests [^19]: Unchecking this setting will ensure only date inputs will be included in the field [^20]: This conditional will display the Text Area when the Other value is selected from the Leave Type dropdown. [^21]: The Other option value from the Leave Type field within the form [^22]: This conditional will display the Text Area when the Emergency value is selected from the Leave Type dropdown. [^23]: The Emergency option value from the Leave Type field within the form [^24]: This URL will reference the Admin Resource submission data and ensures the Department ID from the Resource associates with the Employee Department [^25]: email is the API Property of the Email field within the Employee Resource [^26]: This ensures the data interpolation is triggered appropriately when the Employee field is populated with the User data. [^27]: This conditional will display the Text Area when the Denied value is selected from the Supervisor Approval dropdown. [^28]: The Denied option value from the Supervisor Approval field [^29]: This conditional will display the Text Area when the Denied value is selected from the Manager Approval dropdown. [^30]: The Denied option value from the Manager Approval field [^31]: This will ensure the user is prompted with the Login form to authenticate before viewing the Form. [^32]: This email will be sent to the Department Supervisor when a new Leave Request form is submitted [^33]: This code will interpolate the email of the Employee's Department Supervisor and send the email accordingly [^34]: The Requested option value set by the State machine within the form controller [^35]: This email will be sent to the Manager when a Leave Request form has been approved by the Department Supervisor [^36]: This code will interpolate the email of the Employee's Manager and send the email accordingly [^37]: This will ensure the action will execute when the form is updated for approval by the Department Supervisor [^38]: The Supervisor Approved option value set by the State machine within the form controller [^39]: This email will bypass the Department Supervisor and will be sent directly to the Manager when the Leave Type is an Emergency [^40]: The Emergency option value set by the State machine within the form controller [^41]: This email will be sent to the Employee when the Leave Request form has been approved by the Manager [^42]: This code will interpolate the email field for the Employee that submitted the Leave Request and will send the email accordingly [^43]: This will ensure the action will execute when the form is updated for approval by the Manager [^44]: The Manager Approved option value set by the State machine within the form controller [^45]: This email will be sent to the Employee when the Leave Request form has been denied by either the Department Supervisor or the Manager [^46]: This will ensure the action will execute when the form is either initially denied by the Department Supervisor or by the Manager [^47]: The Denied option value set by the State machine within the form controller