Sharepoint Foundation 2013 Hide Webpart on page

Question

I created a Site Page in SharePoint Foundation 2013. The page is laid our with two columns an a header. In the second column I have a webpart for a document library that only certain users have access to. If the authenticated user does not have permission to the document library, I don't want the web part to appear. I am using SharePoint Foundation 2013 so the Audience feature is not an option. I have tried to edit the source code for that column and add the SPSecurityTrimmedControl. However, when I save the page then go back in to edit it, the SPSecurityTrimmedControl code is just gone. I have access to SharePoint Designer 2013 also but I simply cannot figure out how to do this. Some detailed help would be greatly appreciated.

UPDATE

So based on the information below I performed the following steps:

1. Went to my page in my browser.
2. Selected Edit to edit the page.
3. The header, left column and right column of my page then became editable.
4. I clicked on the title of the WebPart I want to hide (it is in the right column) then right mouse button clicked and selected Inspect Element from the pop up menu
5. In the DOM I found an ID of MSOZoneCell_WebPartWPQ3 that appeared to be associated with the WebPart I want to hide.

6. I added the following script to the page by clicking on the Inset tab in the Ribbon and selecting Embed code.

   document.getElementByID('MSOZoneCell_WebPartWPQ3').style.display="none";

I tried embedding the code in the header zone - it did not work. Then I tried embedding it after the web part in the right column I wanted to hide and that did not work either.

Am I missing something?

Answer 1

So for SharePoint Foundation 2013, here is what I got to work.

First - you do need to get the ID of the webpart you want to hide. While editing the page, right mouse button click on the title of the webpart you want to hide and select "Insepct Element" from the pop-up menu. In the DOM Explorer, scroll up a bit until you see a div with an id that starts something like 'MSOZoneCell_WebPartWP'. That is the id you need. The easiest way I found to copy the ID of the div is to right click on it in the DOM explorer and select "Edit as HTML" from the pop up menu. You will then be able to highlight the ID and copy it.

1. After you have the ID, make sure you are still editing the page and position your cursor at the bottom of the page zone that contains the webpart you want to hide.
2. From the tabs at the top ribbon select Insert, then select WebPart from the Ribbon.
3. In the WebPart selection pick 'Media and Content' in the Categories column, then select Script Editor from the Parts column.
4. Click the Add button near the bottom right hand corner of the WebPart dialog box.
5. On your page you will now see something titled "Script Editor". In the script editor webpart click the arrow near the upper right hand corner and select 'Edit Web Part' from the pop-up menu.
6. Once you do this, you will see a hyperlink under Script Editor that says "Edit Snipit". Click that link.

7. Paste the following code in the Script Editor.

      function checkAdminRights() {
       try {
           var userId = _spPageContextInfo.userId;
           var groupId = 6;
           var requestHeaders = { "accept": "application/json; odata=verbose" };
   
           $.ajax({
               url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/sitegroups(" + groupId + ")/users/getbyid(" + userId + ")",
               contentType: "application/json;odata=verbose",
               headers: requestHeaders,
               success: userAdmin,
               error: userNotAdmin
           });
           function userAdmin(data, request) {
               // if we reach here, the current user belongs to the group 
               var userName = data.d.LoginName;
           }
           function userNotAdmin(error) {
               var hideWP = document.getElementById("MSOZoneCell_WebPartWPQ3");
               hideWP.style.display = "none";  
          }
       }
       catch (err)
       {
               var hideWP = document.getElementById("MSOZoneCell_WebPartWPQ3");
               hideWP.style.display = "none";  
       }
   } 
   

   `checkAdminRights();

NOTE 1: You need to change the value of the variable groupId to the value of the group the user needs to be a member of in order to NOT hide the webpart. You also need to replace the value MSOZoneCell_WebPartWPQ3 with the ID of the webpart you want to hide.

NOTE 2: This site will not include the checkAdminRights(); line as part of the code but it is. Please be sure that is the last line of your code in the script editor.

NOTE 3: You need to include a reference to the jquery library at the very top of the scropt. The site will not let me paste that line of code unfortunately but I used a script tag with the src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"

NOTE 4: After the line of code to include a reference to jquery, you need to have the following text script type="text/javascript" as an element which means you put a less than sign before the s in script and a greater than sign after the quote at the end. You also need an end script tag at the very bottom of the script editor.

8. Once you have processed all of the NOTES above, you can click the Insert button at the bottom of the script dialog box. Then you can click the OK button in the Content Editor Dialog that is to the right side of the content you just entered.

Once you click the OK button the script should execute and the logic to hide a webpart based on a user being a member of a SharePoint group should be complete.

Answer 2

You can get the correct WebPart ID as shown below, The orange colored ID specifies the webpart ID.

Note : Make sure you add the below code using Content Editor Web Part or Script Editor Webpart which is added to the footer(bottom most webpart zone) of the page. If you add the Script to the header the script will run first and then the list view will be loaded. We want the list view to be loaded first followed by the script(that hides the list view) added to the footer.

<script type="text/javascript">
function hidepart() {
var hideWP = document.getElementById("MSOZoneCell_WebPartWPQ1");
hideWP.style.display="none";
}
</script>

Code to Check if User is present in Authenticated Group

Answer 3

You can use JavaScript. Add a content editor to the page and then edit the HTML of the content editor with this:

<script type=”text/javascript”>

document.getElementByID('YOUR_WEB_PART_ID').style.display="none";

</script>

You will have to search AD or SP Group using JavaScript though. More on that:

Check if user is in a specified group