Link To New Item Form

Give users the ability to add items to a list without showing the entire list web part. In my example, I’ve added a “Submit Request” button to a Document Set Welcome Page. Clicking this will open the New Item form for my Tickets list.


<script type="text/javascript">

 function displayLayover(url) {

 var options = SP.UI.$create_DialogOptions();

 options.url = url;

 options.dialogReturnValueCallback = Function.createDelegate(

 null, null);




<input type="button" onclick='javascript:displayLayover("/sites/sandbox/mustard/Lists/Tickets/NewForm.aspx")' value="Submit Request">


1. Add a Script Editor web part to your page.


3. Replace the URL in this line with the path to your list’s New Item form (you can also change what the button says by changing the ‘value’):

<input type="button" onclick='javascript:displayLayover("/sites/sandbox/mustard/Lists/Tickets/NewForm.aspx")' value="Submit Request">

NOTE: If your URL looks something like this: /sites/sandbox/mustard/_layouts/15/start.aspx#/Lists/Tickets/NewForm.aspx, remove /_layouts/15/start.aspx# from the path.


4. Click Insert and save the page.

5. To test, click the new “Submit Request” button.


6. Add some information and click Save.

7. Navigate to the list to confirm.


Edit Form Popup – Drag And Drop

By default, the edit form does not pop up when you drag and drop documents into a library. This piece of JavaScript will force an edit form to pop up for as many documents you drag and drop. For example, if you drag 5 documents at the same time, 5 individual edit forms will pop up in succession.

1. Make sure that the Metadata Navigation and Filtering site feature is enabled.

2. Navigate to and edit the page you are adding this to.

3. Insert a Script Editor web part and embed the following code (no changes need to be made, just copy/paste):

<script unselectable="on">

(function (_window) {

    var maxTimeForReplaceUploadProgressFunc = 10000;

    function replaceUploadProgressFunc() {

        if (typeof _window.UploadProgressFunc != 'undefined') {

            _window.Base_UploadProgressFunc = _window.UploadProgressFunc;

            _window.UploadProgressFunc = Custom_UploadProgressFunc;

            console.log('replaced dialog');

        } else if (maxTimeForReplaceUploadProgressFunc > 0) {

            maxTimeForReplaceUploadProgressFunc -= 100;

            setTimeout(replaceUploadProgressFunc, 100);



    setTimeout(replaceUploadProgressFunc, 100);

    function Custom_UploadProgressFunc(percentDone, timeElapsed, state) {

        _window.Base_UploadProgressFunc(percentDone, timeElapsed, state);

        var messageType = ProgressMessage.EMPTY;

        switch (state.status) {

            case 1:

                messageType = ProgressMessage.VALIDATION;


            case 3:

                messageType = ProgressMessage.UPLOADING;


            case 4:

                messageType = ProgressMessage.UPLOADED;



            case 5:

                messageType = ProgressMessage.CANCELLED;



        function OpenEditFormForLastItem(state) {

            var caml = '';

            caml += "<View>";

            caml += "<Query>";

            caml += "<Where>";

            if (state.files.length > 1) {

                caml += "<In>";

                caml += "<FieldRef Name='FileLeafRef'/>";

                caml += "<Values>";

            } else {

                caml += "<Eq>";

                caml += "<FieldRef Name='FileLeafRef'/>";


            state.files.forEach(function (file) {

                //only succesfull uploaded files that arent overwrites


                if (file.status === 5 /*&& !file.overwrite*/) {

                    caml += "<Value Type='File'>" + file.fileName + "</Value>";


            }, this);

            if (state.files.length > 1) {

                caml += "</Values>";

                caml += "</In>";

            } else {

                caml += "</Eq>";


            caml += "</Where>";

            caml += "<OrderBy><FieldRef Name='ID' Ascending='True' /></OrderBy>";

            caml += "</Query>";

            caml += "<ViewFields><FieldRef Name='ID' /></ViewFields>";

            caml += "<RowLimit>500</RowLimit>";

            caml += "</View>";


            var cntxt = SP.ClientContext.get_current();

            var web = cntxt.get_web();

            var list = web.get_lists().getByTitle(window.ctx.ListTitle);

            var query = new SP.CamlQuery();


            var items = list.getItems(query);

            cntxt.load(list, 'DefaultEditFormUrl');


            cntxt.executeQueryAsync(function () {

                var listEnumerator = items.getEnumerator();

                function openEditForItem() {

                    if (listEnumerator.moveNext()) {

                        var item = listEnumerator.get_current();

                        var id = item.get_id();

                        var options = SP.UI.$create_DialogOptions();

                        options.title = "Add File Metadata";

                        options.url = list.get_defaultEditFormUrl() + '?ID=' + id;

                        options.autoSize = true;

                        options.dialogReturnValueCallback = openEditForItem;


                    } else {





            }, function (error, args) {

                    console.log("failed to get new uploaded items");








4. Click OK and save the page.

5. Confirm that the edit form pops up when you drag and drop documents.

Custom Quick Edit Button

To add a custom Quick Edit button to a page or view, add a Script Editor Web Part and embed the following code. Make sure you change the number in [WPQ2SchemaData] to the ID of the Web Part you want to Quick Edit. You can find that by inspecting the list or library Web Part using Developer Tools (F12).


<!DOCTYPE html>
<button onclick="QuickEditFunction();return false;">Quick Edit</button>

function QuickEditFunction()



Filter Items By First Letter


Copy the following JavaScript into notepad and save it as a .txt file.

<script type="text/javascript">
         function qs(paramName) {
                 var args ="&");
                 for(j = 0; j < args.length; j++) {
                         nameValues = args[j].split("=");
                         if(nameValues[0] == paramName) return nameValues[1];
                 return null;

var filterField = "FL";
 var filterValuesDelimiter = " | ";

var filterValues = new Array

var selectedValueStyle = "font-weight: bold;";

var filterDivStyle = "margin: 5px; font-size: 15px;";
         var filterLinks = new Array();
         for (var i = 0; i < filterValues.length; i++) {
                 filterLinks.push('<a ' + (qs("FilterValue1") == filterValues[i] ? 'style="' + selectedValueStyle + ' ' : '') + 'href="' + document.location.href.split("?FilterField1")[0] + '?FilterField1=' +
 filterField + '&FilterValue1=' + filterValues[i] + '">' + filterValues[i] + '</a>');

<div style="' + filterDivStyle + '">' + filterLinks.join
 (filterValuesDelimiter) + ' | ' + '<a ' + (qs("FilterValue1") == filterValues[i] ? 'style="' + selectedValueStyle + ' ' : '') + 'href="' + document.location.href.split("?FilterField1")[0] + '">' + 'All</a>' + '</div>


Upload this text doc to the Site Assets library.

Create a calculated column on the library you want to filter and name it “FL”. Add this to the Formula field:



Add a Content Editor web part to the page and open up the settings. In the Content Link field, paste the URL for the text file you uploaded earlier.


Click Apply to confirm that the filter shows up correctly on the page. Also make sure you change the Chrome Type under Appearance to “None”.


Save the page and test the filter.




Show Files & Library Tabs


You want the Files and Library tabs to be visible when you browse to a page with multiple web parts.


JavaScript! Add this to a Script Editor web part on the same page.


        setTimeout(function() {

        var elem = document.getElementById("MSOZoneCell_WebPartWPQ2");

           if(elem != null) {

                var dummyevent = new Array();

                dummyevent["target"] = elem;

                dummyevent["srcElement"] = elem;


                _ribbonStartInit("Ribbon.Browse", true)


        }, 2000);


You may need to change “MSOZoneCell_WebPartWPQ2” to the web part ID of the web part you want to focus on. You can find this by opening dev tools.


Disable Drag And Drop

This handy piece of JavaScript will disable the drag and drop function for all library web parts on a single page. Other upload options will still work.

Just paste this into a Script Editor web part:


ExecuteOrDelayUntilScriptLoaded(function() {

    g_uploadType = DragDropMode.NOTSUPPORTED;

    SPDragDropManager.DragDropMode = DragDropMode.NOTSUPPORTED;

}, "DragDrop.js");