Role-Based Conditions
Last updated
Last updated
Conditional logic allows users to show or hide components based on other factors on the form. This example will showcase how to use the user's Role ID to show or hide fields. The FormView Pro application will be used to authenticate the user base to facilitate the role-based conditions.
In this workflow, authenticated users will fill out an Expense Report form. Supervisor users will log in to view the report and conditional logic will trigger based on the Supervisor's role and display an approval panel. Managers will then log in to view the Expense Report and Supervisor's approval input. The Manager will then finalize the report with their own approval section that will display based on their role.
Start the workflow by creating a new project from the Developer Portal. The default User resource will be used to authenticate the users filling out the initial Expense Report.
Resources will be used to establish our Users filling out the Expense Report as well as the Supervisor and Manager users that will be reviewing the reports.
Create a Supervisor Resource to establish a data model for the Supervisor users.
Create a new Resource called Supervisor
Add an field to the Form
Create the Resource.
Create a Manager Resource to establish a data model for the Manager users.
Create a new Resource called Manager
Add an field to the Form
Create the Resource.
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. Roles operate in tandem with the Form.io Permission system, which helps regulate access and permissions throughout the project, forms, resources, and underlying submission data.
The Role ID will be used within the conditional logic found later in this workflow.
Before Roles can be delegated, they first need to be created within the Project.
Within your Project, click the Access tab on the left-hand side navigation bar
Click the +New Role button and create the following roles:
Within the Access tab, click each role and save the Role ID number found within the URL. These IDs will be used further in the walkthrough.
E.G. https://portal.form.io/#/project/1235abc689def/roles/
aghj12qwe890
/edit
The next step is assigning the Roles to the various User groups. This is done by adding the Role Assignment action to the Resources we established in the previous steps.
Navigate to the Supervisor Resource and click the Action tab
Click the Select an Action dropdown and select the Role Assignment
Click the +Add an action button
Click the Resource Association dropdown and select Existing Resource
Click the Action Type and select Add Role
Click the Role dropdown and select the Supervisor Role.
Save the Action settings
Navigate to the Manager Resource and click the Action tab
Click the Select an Action dropdown and select the Role Assignment
Click the +Add an action button
Click the Resource Association dropdown and select Existing Resource
Click the Action Type and select Add Role
Click the Role dropdown and select the Manager Role.
Save the Action settings
With our Resource models created and Role Assignment actions ready to distribute the Roles, we are now ready to establish the User, Supervisor, and Manager user groups.
The default User Resource will be used to create and manage the users filling out the Expense Reports.
Every Project automatically includes default Forms and Resources. The User Resource is one of these defaults.
Click the Resource tab from the left-hand sidebar
Navigate to the User Resource
Click the Use tab and make a submission to create a user E.G. user@example.com / password
Navigate to the Supervisor Resource
Click the Use tab for the Supervisor Resource
Create a Supervisor by filling out and submitting the Form. E.G. supervisor@example.com / password
Navigate to the Manager Resource
Click the Use tab for the Manager Resource
Create a Supervisor by filling out and submitting the Form. E.G. manager@example.com / password
The Expense Report form is what the Users fill out and submit for review. This same form will be used by the Supervisor and Manager users to either approve or deny the request. Conditional logic will be implemented to display additional panels on the form depending on what user is logged in. The User should only see the expense portion of the form. The Supervisor will see the expense portion and their own Supervisor panel for approval. The Manager will see the entire form, including their own Manager approval section to finalize the expense approval.
Click the Forms tab from the left-hand navigation bar
Click the +New Form button
Name the Form Expense Report and create the Form.
Alternatively, import the following Expense Report form into your project using the Import button from the form tab. https://examples-khvenypsypifjpi.form.io/rolebasedconditions
Users will fill this portion out
Add a Panel called Expense Report
Add some fields to the form for User Information (E.G> Text Field - Name, Email, Employee ID etc)
Add a DataGrid to the form called Expense
Add some fields within the Data Grid to indicate expenses (E.G. Text Field - Expense, Currency - Amount, Data/Time - Expense Date)
This field will use calculation to convert the role ID of the logged-in into a string-based value.
Add a Hidden field below the Expense Report panel called Permission
Within the Hidden field settings, click the Data tab and open the Calculated Value tab
Add the following JavaScript to the code block
Replace the placeholder ID number with your own Role ID referenced in the Create Role section of the walkthrough
Supervisors will view the expense and either Approve or Deny.
Add a Panel called Supervisor Approval
Within the Panel Settings, click the Conditional tab
Set the Show or Hide this field setting to Show This Field
Set the When setting to When any conditions is met
Click the +Add Condition button
Set When to Permission, Is to Is Equal To, and Value to s
Save the condition
Click the +Add Condition to add an additional condition
Set When to Permission, Is to Is Equal To, and Value to
Save the conditions and component settings
Add some fields to the Panel so the Supervisor can approve the request (E.G. Radio - Approved Request? Y/N, Signature field)
Managers will view the expense and either Approve or Deny.
Add a Panel called Manager Approval
Within the Panel Settings, 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 Permission, Is to Is Equal To, and Value to
Save the condition and component settings
Add some fields to the Panel so the Manager can approve the request (E.G. Radio - Approved Request? Y/N, Signature field)
Next, configure the Roles & Permissions on the form to determine what each User Group's role can do on the Leave Request form and its underlying data.
Click the Access tab for the Expense Report form.
Add the following Roles to the Submission Data Permissions:
Permission | Role(s) |
---|---|
Create Own | Authenticated |
Create All | Supervisor, Manager |
Read Own | Authenticated |
Read All | Supervisor, Manager |
Update Own | N/A |
Update All | Supervisor, Manager |
Delete Own | N/A |
Delete All | Manager |
Remove the Anonymous Role from the
Save the settings
The final step before testing out the workflow is to reconfigure the Login form.
Find the form from the list of Forms within the Project
Click the Action tab
Edit the Login Action
Click the Resources field and add Supervisor and Manager
Save the Action
This will ensure the Login action will search the correct records when authenticating the user into the Form.
With everything in place, let's test out the Workflow using the FormView Pro application.
Navigate to the Expense Report Form and click the Launch tab
Click the Go to Form button to launch within the FormView Pro application
Login using the credentials for one of the Users user@example.com / password
Fill out the Expense Report
Submit the form
Log out of the Application
Login using the credentials for one of the Supervisors supervisor@example.com / password
Within FormView Pro, click the Submission tab for Expense Report
Click the Edit button on the submission created by the user in the previous step
Approve or Deny the request and Submit the report
Log out of the Application
Implement SSO Tokens within the Email action to facilitate more advanced workflows for the Administrative users for reviewing and approving the Expense Report.
Login using the credentials for one of the Supervisors supervisor@example.com / password
Within FormView Pro, click the Submission tab for Expense Report
Click the Edit button on the submission reviewed by the Supervisor
Approve or Deny the request and Submit to finalize the report
Log out of the Application