Change Look for SharePoint List using Datatable JS

Here I am showing you to change the look of SharePoint list view using datatabse js and SharePoint JS link. If your SharePoint list having more items than performance will be quite slow, but still manageable.

So, here are the steps:

    • Create a view in your target SharePoint List. If you want “Edit” button on view then add “Edit (link to edit item)” field to that view.
    • Now edit the view Page and add script editor web part to the header of the page and add below references to script editor.
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    • Now edit the List view web part > Navigate to open web part properties > expand “Miscellaneous” and under JSLink > set your file URL as below. In my case, I kept the file under SiteAssets. Download source code from GitHub
~sitecollection/SiteAssets/dataTablesListView.js

Your output will be like this.

 

Horizontal radiobutton in SharePoint classic list form.

By default SharePoint Classic has vertical radio buttons. Sometime we are getting requirement to make it horizontal. There many ways to do that, one of them you can inject jQuery using content editor webpart on the new and edit form.
For example our default OOTB form as below :

Here is piece of code which you need to add on content editor, it will automatically make all radio buttons of the page to horizontal.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $( document ).ready(function() {
        $(".ms-formtable .ms-RadioText:eq(0)")
        $fields = $('.ms-formbody table');
        $.each($fields, function (i, e) {
                var getRadio = $(e).find('.ms-RadioText:gt(0)');
                $(e).find('.ms-RadioText:eq(0)').append(getRadio);
        }); 
    });
</script>

Once you add your output will be like below :

Upload list item attachment using Jquery and rest call

Most of the time we require to upload SharePoint list item attachment from the custom interface. So here is the simplest way to upload list item attachment. It requires jQuery to execute this code.

Call “fnUpload” just pass List title, Item ID that’s it.  I am assuming here you already created HTML with file upload control.

function fnUpload() {
    var allFiles = [];
    var input = document.getElementById('<ReplaceWithFileUploadID>');
    var file = input.files[0];
    if (file != null && file.size > 0) {
        allFiles.push(file);
    }
    if (allFiles.length > 0) {
        // replace list item name ,and list item id. 
        fnUploadFile('[Replace with List Name]', parseInt('[Replace with Item ID]'), allFiles[0]);
    }
    else {
        alert("There is no file selected, please select file...");
    }
}

function fnGetFileBuffer(file) {
    var deferred = $.Deferred();
    var reader = new FileReader();
    reader.onload = function (e) {
        deferred.resolve(e.target.result);
    }
    reader.onerror = function (e) {
        deferred.reject(e.target.error);
    }
    reader.readAsArrayBuffer(file);
    return deferred.promise();
}

function fnUploadFile(listName, itemID, file) {
    var deferred = $.Deferred();
    var fileName = file.name;
    fnGetFileBuffer(file).then(
        function (buffer) {
            var bytes = new Uint8Array(buffer);
            var binary = '';
            for (var b = 0; b < bytes.length; b++) {
                binary += String.fromCharCode(bytes[b]);
            }
            var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";
            $.getScript(scriptbase + "SP.RequestExecutor.js", function () {
                var createitem = new SP.RequestExecutor(_spPageContextInfo.webServerRelativeUrl);
                createitem.executeAsync({
                    url: siteurl + "/../_api/web/lists/GetByTitle('" + listName + "')/items(" + itemID + ")/AttachmentFiles/add(FileName='" + fileName + "')",
                    method: "POST",
                    binaryStringRequestBody: true,
                    body: binary,
                    success: function (data) {
                        alert("file Uploaded Succesfully.");
                        deferred.resolve(data);
                    },
                    error: function (data) {
                        alert(data + "There is a error while uploading..")
                        deferred.reject(data);
                    },
                    state: "Update"
                });
            });
        },
        function (err) {
            deferred.reject(err);
        }
    );
    return deferred.promise();
}