{"id":908,"date":"2017-07-13T12:48:40","date_gmt":"2017-07-13T07:18:40","guid":{"rendered":"https:\/\/blog.binarybits.net\/?p=908"},"modified":"2017-12-01T11:57:47","modified_gmt":"2017-12-01T06:27:47","slug":"hide-sharepoint-list-column","status":"publish","type":"post","link":"https:\/\/blog.binarybits.net\/hide-sharepoint-list-column\/","title":{"rendered":"Hide SharePoint list column"},"content":{"rendered":"
Sometimes we need to hide specific SharePoint columns in a list view webpart. The following code will help with that. <\/p>\n","protected":false},"excerpt":{"rendered":" Sometimes we need to hide specific SharePoint columns in a list view webpart. The following code will help with that. Make sure this code is placed in a JS file and referenced using JSLink webpart property. Just replace the HideColumn function’s array parameters [“Title”, “Created By”]\u00a0with necessary column’s display names. (function () { var overrideCurrentContext […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[62],"tags":[263,208],"yoast_head":"\n
\nMake sure this code is placed in a JS file and referenced using JSLink webpart property.
\nJust replace the HideColumn<\/em> function’s array parameters [“Title”, “Created By”]<\/em>\u00a0with necessary column’s display names.<\/p>\n(function () {\r\n var overrideCurrentContext = {};\r\n overrideCurrentContext.Templates = {};\r\n overrideCurrentContext.OnPostRender = PostRenderer;\r\n SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);\r\n})();\r\n\r\nfunction PostRenderer(ctx) {\r\n HideColumn([\"Title\", \"Created By\"],true);\r\n}\r\n\r\nfunction HideColumn(columns, hideOnlyHeader) {\r\n columns.forEach(function(columnName) {\r\n headerParentFirstNode = document.querySelectorAll(\"[displayname='\" + columnName + \"']\")[0];\r\n if (headerParentFirstNode != undefined) {\r\n var header = headerParentFirstNode.parentNode;\r\n header.style.display = \"none\";\r\n if (!hideOnlyHeader) {\r\n var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;\r\n for (var i = 0, cells = document.querySelectorAll(\"td:nth-child(\" + index + \")\"); i < cells.length; i++) {\r\n cells[i].style.display = \"none\";\r\n }\r\n }\r\n }\r\n });\r\n}<\/pre>\n