Use ‘Form Event Actions’ Feature Of NITRO Forms To Add Custom Functionality – II

Applies to:
Crow Canyon NITRO activated sites in:
SharePoint Online and On-Premises 2013/2016/2019

Description

NITRO Forms have lot of built-in functionality to customize layout, design and functionality as required in common business applications. For any specific cases not covered directly by the configurations, custom JavaScript and CSS can be added. These custom scripts can be invoked on form load, on column values change and before/after item submit. For all these cases, scripts can be invoked conditionally based on values entered in the form.

Please refer this article for form event actions basic usage and configurations.

This article describes some sample use cases to configure form event actions in NITRO forms.

Use Case 1: Clear the attachments column based on change in value of another column

Sample list schema and use case

  1. Standard SharePoint list
  2. ‘Category’: Single selection choice:
    1. Choice options:
      1. ‘Emails’
      1. ‘Internet’
    1. Based on selected value, retain attachments in corresponding column and clear others
  3. ‘Email Files’: NITRO attachments column
    1. If selected category is not ‘Emails’, then clear attachments from this column
  4. ‘Internet Files’: NITRO attachments column
    1. If selected category is not ‘Internet’, then clear attachments from this column

Steps to configure

Navigate to Crow Canyon NITRO Forms designer for the list -> Form Event Actions (under Advanced section in left-hand panel) and configure FEA on column value change as shown below:

Clear ‘Email Files’:

Clear ‘Internet Files’:

Note: In this sample we have cleared NITRO attachments column, we can follow same syntax to clear value for all other column types as well.

Sample Output

Use Case 2: Append multiple users in a multi-selection enabled person or group column

Sample list schema and use case

  1. Standard SharePoint list
  2. ‘Approval Notification’: Multiple selections enabled person or group column
    1. Populate multiple users in this column in new form

Steps to configure

  1. Navigate to Crow Canyon NITRO Forms designer for the list -> Form Event Actions (under Advanced section in left-hand panel) and configure FEA on load as shown below:

Update form controls action:

Script:

var users = ["james@contoso.com", "scott@contoso.com"];
return users;

Note: Specify email ID of users as required.

Use Case 3: Show a popup message when number column value is greater than some value

Sample list schema and use case

  1. Standard SharePoint list
  2. ‘Number of Employees’: Number column
    1. Show a popup message if ‘Number of Employees’ column value is greater than 1.

Steps to configure:

  1. Navigate to Crow Canyon NITRO Forms designer for the list -> Form Event Actions (under Advanced section in left-hand panel) and configure FEA on column value change as shown below:

Configure execute script action:

Script:

window.alert("Please attach spreadsheet with employee data");

Note: Replace the message as required.

Use Case 4: Show/hide a column based on entered date being less than 28 days from today or not

Sample list schema and use case

  1. Standard SharePoint list
  2. ‘Due Date’: Date column
  3. ‘Show Rush Notification’: Yes/No column (default value is ‘No’)
    1. This is a hidden column that will be updated using FEA based on ‘Due Date’ column value
  4. ‘Rush Justification’: Single line of text column
    1. Show this column only if ‘Due Date’ column value is less than 28 days from today

Steps to configure

  1. Navigate to Crow Canyon NITRO forms designer for the list -> Select ‘Show Rush Notification’ column -> Configure hide permission on this column from column settings (in right-hand panel).
  1. Configure FEA to update ‘Show Rush Notification’ column value based on ‘Due Date’ column value.
    1. Click ‘Form Event Actions’ (under Advanced section in left-hand panel) and configure FEA on column value change as shown below:
  1. Configure update form controls action:

Script:

var varDate = new Date();
varDate.setDate(varDate.getDate() + 28);
var DateNeeded = _ccs_FormUI.fetchColumnValueUI("Column Internal Name");
var validation = false;
if (DateNeeded) {
                if (typeof DateNeeded == "string") {
                                DateNeeded = DateNeeded.replace(/-/g, " ");
                }              
                validation = Date.parse(DateNeeded) >= Date.parse(new Date(varDate.toDateString()));      
}

if (validation == true){
				return "No";
}

if(validation == false){
                return "Yes";
}

Note: Replace highlighted text with ‘Due Date’ column internal name.

  1. Configure show/hide column permissions on ‘Rush Justification’ column.

Hide for everyone:

Show if ‘Show Rush Notification’ column value is ‘Yes’:

Use case 5: Disable non-working calendar days in date and time controls

Sample list schema and use case

  1. Standard SharePoint list
  2. ‘Date’: Date and time column
    1. Disable non-working days, i.e., Saturday and Sunday from ‘Date’ column date picker

Steps to configure

  1. Navigate to Crow Canyon NITRO Forms designer for the list -> Form Event Actions (under Advanced section in left-hand panel) and configure FEA on load as shown below:
  1. Configure execute script action:

Script:

var objControl = $("#ccs_control_Date").data("kendoDateTimePicker"); 
var oldOptions = objControl.options;
oldOptions.disableDates = ["su", "sa"]; 
objControl.setOptions(oldOptions);

Note:

  1. Replace ‘Date’ in above script with internal name of ‘Date & Time’ column.
  2. “kendoDateTimePicker” is for ‘Date & Time’ column. Replace with “kendoDatePicker” for ‘Date Only’ column.
  3. Disable weekdays from date picker as required using syntax: su, mo, tu, we, th, fr, sa for Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, respectively.

Sample Output