How to Add a JS Link Reference to the NewForm.aspx and EditForm.aspx Programmatically using CSOM PNP in SharePoint Office 365

Recently I met with a requirement that on the default OOTB list, while creating or editing the list item, we need to do some custom action in SharePoint Office 365. To achieve that, we thought of writing a separate JS file and on that JS file, we can do our functionality.

Now, the challenge comes like, we cannot edit the NewForm.aspx and EditForm.aspx and insert a Script Editor Webpart in the Production Environment. They wanted a small utility (EXE) which will be inserting the JS file to the NewForm and EditForm.

For this, PNP helped us a lot and thought of sharing to the community.

To show a demo,

1. Create a List

2. In the Site Assets, upload a JS file.

3. In my case, I have a JS file with only an Alert Message.

4. Go to the New Item Page of the List.

5. If we search in the developer tool, no JS file will be found.

Now, execute the below code.

 namespace Console.Office365
 {
     using Microsoft.SharePoint.Client;
     using Newtonsoft.Json.Linq;
     using System;
     using System.Collections.Generic;
     using System.IO;
     using System.Linq;
 
     class Program
     {
         static void Main(string[] args)
         {
             AddJSLinkReferencce();
         }
 
         public static void AddJSLinkReferencce()
         {
             OfficeDevPnP.Core.AuthenticationManager authMgr = new OfficeDevPnP.Core.AuthenticationManager();
 
             string siteUrl = "https://*****.sharepoint.com/sites/CommunitySite/";
             string userName = "Sathish@*****.onmicrosoft.com";
             string password = "*********";
 
             using (var ctx = authMgr.GetSharePointOnlineAuthenticatedContextTenant(siteUrl, userName, password))
             {
                 Web web = ctx.Web;
                 ctx.Load(web);
                 ctx.ExecuteQueryRetry();
 
                 List list = web.Lists.GetByTitle("MyList");
                 ctx.Load(list);
                 ctx.ExecuteQueryRetry();
 
                 list.SetJSLinkCustomizations(PageType.NewForm, "https://*********.sharepoint.com/sites/CommunitySite/SiteAssets/JS/TempJS.js");
 
                 list.Update();
                 ctx.ExecuteQueryRetry();
             }
         }
 
          
 
 
     }
 
 }
 

6. Go back and Refresh the NewForm, we will get the popup as below.

7. PageType is an Enum, which has the below options.

Invalid = -1,

DefaultView = 0,

NormalView = 1,

DialogView = 2,

View = 3,

DisplayForm = 4,

DisplayFormDialog = 5,

EditForm = 6,

EditFormDialog = 7,

NewForm = 8,

NewFormDialog = 9,

SolutionForm = 10,

PAGE_MAXITEMS = 11

With the above forms, the method is straight forward.

Happy Coding,

Sathish Nadarajan.