How to Hide SharePoint Field using jQuery/JavaScript

Hello friends, in this article, we will see how we can Hide SharePoint Field in NewForm.aspx/ DispForm.aspx/ EditForm.aspx

Add a content editor webpart on respective pages (NewForm.aspx/ DispForm.aspx/ EditForm.aspx) and use below JavaScript/jQuery code to hide sharepoint field. In this case, I am hiding named “Middle Name”.

  1. For NewForm.aspx OR EditForm.aspx

    using jQuery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $('nobr:contains("Middle Name")').closest('tr').hide(); //here we are hiding field named "Middle Name"
    });
    </script>

    using JavaScript

    <script type="text/javascript">
    
    // The new closest
    var closest = function(el, fn) {
      return el && (fn(el) ? el : closest(el.parentNode, fn));
    };
    
    // Get the "starting point" element
    var srcEl = document.getElementById('Middle_x0020_Name');
    
    // `<tr>` is the "ending point"
    var tr = closest(srcEl, function(el) {    
        return el.tagName.toLowerCase() === 'tr';
    });
    
    tr.style.display = "none";
    
    </script>
    
    
  2. For DispForm.aspx

    using jQuery

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
    $('[name="SPBookmark_Middle_x0020_Name"]').closest('tr').hide();
    });
    </script>

    using JavaScript

    <script type="text/javascript">
    
    // The new closest
    var closest = function(el, fn) {
      return el && (fn(el) ? el : closest(el.parentNode, fn));
    };
    
    // Get the "starting point" element
    var srcEl = document.getElementsByName('SPBookmark_Middle_x0020_Name');
    srcEl;
    // `<tr>` is the "ending point"
    var tr = closest(srcEl[0], function(el) {    
        return el.tagName.toLowerCase() === 'tr';
    });
    
    tr.style.display = "none";
    
    </script>

Explanation of code:

How to hide SharePoint field using JavaScript

If you see the first code for hiding SharePoint field on New or Edit forms, we have used the closest function of jquery. We are using <nobr> tag value to find the closest <tr> tag of the field and hiding it. You can refer below screenshot to find the <nobr> value (It’s always same as field display name).

Hide SharePoint Field
Hide SharePoint Field

A similar approach is used for remaining codes. I hope you have liked this article. If you have any queries, feel free to ask in the comment section below. Like our facebook page and subscribe to our newsletter for future updates. Have a nice day!

Recommended articles:

  1. SharePoint Interview Questions
  2. SharePoint Content Types – Best Explained
  3. SharePoint Site Columns – Best Explained
  4. How to Make Conditionally Mandatory Field in SharePoint 2013

How to call one function inside second in jQuery/JavaScript

Hello friends,

In this short article, we will see, how can we call one function inside second in JavaScript.

Let’s consider you have a function named makeAddition() as follows:

function makeAddition(a,b){
   var c = a+b;
   alert("Addition: "+ c);
}

Now if you have another function named makeSubtraction() as follows:

function makeSubtraction(a,b){
   var d = a-b;
   alert ("Subtraction: "+ d);
}

You can call makeAddition function inside makeSubtraction function as follows:

function makeSubtraction(a,b){
   var d = a-b;
   alert ("Subtraction: "+ d);
   makeAddition (4,5);
}

Now when you call makeSubtraction (10,5), it will first alert answer as 5 and then it will call makeAddition function and will alert answer as 9.

You may also like:

I hope you liked this article. If you have any queries, please use below comments section for the same. Please like our facebook page and subscribe to our newsletter for future updates. Have a nice day! tada…

Convert Excel to JSON using JavaScript code

Hello friends, in this javascript tutorial we are going to learn about how to Convert Excel to JSON using JavaScript code. We can read an excel file which is hosted on any server, SharePoint folder, etc with the help of javascript code. Here you can get readymade javascript code for Excel to JSON conversion.

Excel to JSON
Excel to JSON

Convert Excel to JSON using JavaScript Code

In this tutorial, we are going to use a js-xlsx library to convert Excel to JSON. It has xlsx.full.min.js file which we are going to refer in our HTML file. js-xlsx is a parser and writer for various spreadsheet formats. So without wasting time lets jump to coding part. We can also use .csv files as well.

Below is a code for reading Excel as a JSON object:

<!doctype html>
<html>

<head>
    <title>Excel to JSON Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script>
</head>

<body>

    <script>
        /* set up XMLHttpRequest */
        var url = "https://myclassbook.org/wp-content/uploads/2017/12/Test.xlsx";
        var oReq = new XMLHttpRequest();
        oReq.open("GET", url, true);
        oReq.responseType = "arraybuffer";

        oReq.onload = function(e) {
            var arraybuffer = oReq.response;

            /* convert data to binary string */
            var data = new Uint8Array(arraybuffer);
            var arr = new Array();
            for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
            var bstr = arr.join("");

            /* Call XLSX */
            var workbook = XLSX.read(bstr, {
                type: "binary"
            });

            /* DO SOMETHING WITH workbook HERE */
            var first_sheet_name = workbook.SheetNames[0];
            /* Get worksheet */
            var worksheet = workbook.Sheets[first_sheet_name];
            console.log(XLSX.utils.sheet_to_json(worksheet, {
                raw: true
            }));
        }

        oReq.send();
    </script>
</body>

</html>

In the above code, if you could observe, you will find that we have used xlsx.full.min.js file and a Test.xlsx file. We are going to read Test.xlsx Excel file to generate a JSON Object.

Note: While using the above code make sure that you have uploaded your Excel file on any server and give the correct full path of that file. You can use the same code to convert CSV to JSON.

Here is our Test.xlsx file which looks like below

Output

When you host your index.html file on the server, on the page load we are running our script to show the objects in the browser console. Below is the output in JSON object

JSON Object output
JSON Object output

Download Excel to JSON javascript

You can use any one of the links to download the source code

  1. Google Drive: Download
  2. MediaFire: Download

I hope you liked this article. Please let us know if you face any issues in the comment sections below. Like our facebook page and subscribe to our newsletter for future updates. Have a great time! 🙂