Hide column in SharePoint custom list based on values

There are certain requirements when creating new item in the SharePoint custom list user has to hide certain columns based on other value. There are two different ways to achieve it.

1. Server side


2. Client side

In Server side, we need to write our WebPart and add the webpart to the new form of the list and close the default one. In this you have full control of the controls and life cycle. But the pain will in the deployment and maintaining the code. Advantage is we have full control and the webpart and flexibility to achieve any kind of validations.





In Client side, it can be achieved using Javascript, especially using the Jquery. I'm big fan of JQuery and I'll be using the second option to achieve it in this blog.

1. Edit the new form and add CEWP to the form


2. Change the chrome state to none, we don't want to see the webpart title it's meant to invisible to the end users.


3. In the HTML view of the CEWP, add the below code snippet.


4. Change the HideColumn funtion parameters based on your columns in the custom list.

That's it try to add new item to the list, and based on the column values the other column will get hidden in the code I have used check box and text field. Based on check box I'm deciding here whether to show or hide the column.

 function HideColumn(targetColumn, hideColumn) {  
  var columnObj = $("input[Title='" + hideColumn + "']");
  $("input[Title='" + targetColumn + "']").bind('click',function() { 
  if($(this).is(':checked')) {          
   columnObj.closest("tr").hide();
  }
  else {
   columnObj.closest("tr").show();
  }
  });   
 }   
 $(document).ready(function() {
  HideColumn('YourCheckboxcolumn','columntobehidden');
 });

Please have a demo on the below video.