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.

Comments

  1. Venkat7:06 PM

    Hi Rajesh

    I am using SharePoint 2010.
    I have list A and list B in two webparts, I have connected both webparts using webpart connections.
    So when I select the connection link in list A it filters the items in List B baesd on ID.

    Now I want to customize list B to restrict end user to add only one item for one ID of list A.
    i.e., List A - List B
    AID001 - BID001
    AID002 - BID002
    At the moment I can add one or more items in List B for list A i.e.,
    AID001 - BID001, BID002, BID003 ...
    So I should be restricted to add only 1 item in list B associated to list A item , once the user add one item in List B then the " Add new item " should disappear.


    Any ideas or suggestions.
    Thanks

    ReplyDelete
  2. Anonymous12:11 AM

    Hi Rajesh,

    very interesting and nice blog. It works awesomely. I am pretty new to Javascripting. I was wondering how can I use this for drop down list?

    ReplyDelete
  3. Anonymous4:02 AM

    I don' undersand where I put this code , someone can help me pleaze

    ReplyDelete
  4. you can put the script in a text file on a document library of the site and refer it to the CEWP link property.keep in mind you are editing the "default new form" which can be accessible from List>Form Webparts menu. http://mroffice365.com

    ReplyDelete
  5. function HideColumn(targetColumn, hideColumn) {
    var columnObj = getCell('Feedback Comments');
    $("input[Title='" + targetColumn + "']").bind('click',function() {
    if($(this).is(':checked')) {
    alert('checked');
    columnObj.closest("tr").hide();
    }
    else {
    columnObj.closest("tr").show();
    }
    });
    }
    function getCell(cell) {
    var result = $('tr').find('td:contains(' + cell + ')');
    return result;
    }
    $(document).ready(function() {
    HideColumn('YourCheckboxcolumn','columntobehidden');
    });

    ReplyDelete

Post a Comment