<< Click to Display Table of Contents >> Navigation:  Using JavaScript > Custom JavaScript

Custom JavaScript code on Form Load

You can add custom JavaScript that is loaded at the time of form load. To specify the custom script, go to NITRO/Portal Form settings, in the left pane expand "Advanced" section and click "Custom JavaScript". In the dialog select the appropriate optionThis can be done in two ways:

 1) LINK: Put the script in a file and include the link to the file in the form settings. In case of link, the script is available on the form after the form is loaded and can be called any time, e.g. the script may handle column value change event and will be invoked when that happens.

 2) EVAL: Directly specify the script in the form settings. This runs only once after the form load. Note that Form Event Action's "Execute Script" can be used instead for this same purpose.

 

Custom JavaScript - Link Sample Code

The example code below sets the value of a column on the form when value of another column is changed

Scenario: Select applications for employee based on the selection in the Employee column. In the main list there is a user type field for employee and there is a separate list that has application for each employee. When a user value is specified in the employee column, this code handles that value change and then fetches the data from the other list based on specified user and populates the data in another column which if of type lookup.

 

var EmployeeColmnInternalName = "Employee";

var EmployeeApplication = [];

var ApplicationsColmnInternalName = "Applications";

function CrowCanyon_ChangeControlEvent(columnInternalName, formContext){        

 if (columnInternalName == "Employee") {

         EmployeeApplication = {}

       var employeeID = formContext.fetchColumnValueForLookup(columnInternalName);

         if(employeeID){

                 var viewQuery = '<View><Query><Where>'

                                                                                 + '<Eq>'

                                                                                         + '<FieldRef Name=\'Employee\' LookupId=\'TRUE\' />'

                                                                                         + '<Value Type=\'Lookup\'>' + employeeID + '</Value>'

                                                                                 + '</Eq>'

                                                                         + '</Where>'

                                                         + '</Query><RowLimit>1</RowLimit>'

                                                 + '</View>';

                 var camlQuery = new SP.CamlQuery();

                 camlQuery.set_viewXml(viewQuery);

                 var objUserslist = spContext.get_web().get_lists().getByTitle("Users");

                 var objItem = objUserslist.getItems(camlQuery);

                 spContext.load(objItem);

                 spContext.executeQueryAsync(function () {  

                         if (objItem.get_count() == 1 ) {

                                 var listItemEnumerator = objItem.getEnumerator();

                                 while (listItemEnumerator.moveNext()) {

                                         var oListCurrentItem = listItemEnumerator.get_current();

                                         EmployeeApplication = GetLookupItemValuesasArray("Applications", oListCurrentItem);

                                 }

                         }                                

                         var applicationColObj = formContext.listFields[ApplicationsColmnInternalName];

                         formContext.setColumnControlValue(applicationColObj, EmployeeApplication);                        

                 },

                 function(){

                         console.log("Reading Applications from Users list failed");

                 });

         }        

   }

}

 

function GetLookupItemValuesasArray = function (colName, oListItem) {

   var objVal = null;

   var result = [];

   try {

       objVal = oListItem.get_item(colName);

   }

   catch (ex) {

       console.log(ex.message);

   }

   if (objVal != null) {

       if (Object.prototype.toString.call(objVal) === "[object Array]") {

           for (var i = 0; i < objVal.length; i++) {

               result.push(objVal[i].get_lookupId());

           }

       }

       else {

           if (objVal.get_lookupId) {

               result.push(objVal.get_lookupId());

           }

       }

   }

   return result;

}

 

function CrowCanyon_OnLoadForm(paramFormUIUtils) {

   window.NITROFormContext = paramFormUIUtils;

}

// If you need to use NITRO forms context later then save it in a variable.

// Please note that this is not used in above example and is given just for reference.

 

Custom JavaScript - Eval Sample Code

Example code below is used to check the status of a lookup item and based on that disallows creating/editing the item.

Scenario: In this case, creation of a new line item is disallowed for a purchase request if the request is already approved. So script is added to the line item form which has a lookup to purchase request..

 

// Parameters:

 // spContext: SharePoint client context object

 // formContext: NITRO Form context

 // listColumnsInfo: Object with key as the internal name of column and value as list column meta data

 // currentItem: SharePoint object for the current list item.

                       

try{

 var purchaseRequestsListName = "Purchase Requests";

 var purchaseRequestFieldName = "PurchaseRequest";

 var purchaseRequestStatusFieldName = "Status";

 var purchaseRequestID = currentItem.get_item(purchaseRequesttFieldName);

 if(purchaseRequestID){                

         var olist = spContext.get_web().get_lists().getByTitle(purchaseRequestsListName);

         var objItem = olist.getItemById(purchaseRequestID);

         spContext.load(objItem);

         spContext.executeQueryAsync(function () {  

                 var purchaseRequestStatus =objItem.get_item(purchaseRequestStatusFieldName);

                 var validStatuses = ["Pending Submission", "Sent Back"];

                 if (validStatuses.indexOf(purchaseRequestStatus) == -1) {

                         document.getElementById('s4-ribbonrow').style.display = "none";

                         document.getElementById('contentBox').style.display = "none";

                         alert("Adding/Editing line items is not allowed at this stage");

                         RedirectToViewPage(true);

                 }

         },

         function(){

                 console.log("Reading Applications from Users list failed");

         });

 }        

}

catch(ex){

 if(console && console.log){

         console.log(ex.message);

 }

}