Show / Hide a DIV tag based on a user group in SharePoint via SPServices

In this hint, I’ll elaborate How to show/hide a DIV tag based on a user existence in a specific group with a specific permission in SharePoint via SPServices?Show Hide DIV tag based on user group in SharePoint via SPServicesScenario:

Consider you have a SharePoint Page that holds a 2 Script Editor Web Part or more, and each Script Editor Web Part has its independent DIV as shown below.Show or Hide a DIV tag based on a user group in SharePoint via SPServicesNow, you need to hide the left (DIV) with ‘< div id="ID1"> Qassas div ID1< /div > from all users who belong to a specific SharePoint Group in your SharePoint site.

Steps:

  • Edit your page > Add a new Script Editor web part or use an existing one.

Script Editor Web Part

  • > Click on ‘EDIT SNIPPET‘.

EDIT SNIPPET

  • Add the below code.

Script Code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.js"></script>
<script type="text/javascript">
$(document).ready(function() {

 $().SPServices({
 operation: "GetGroupCollectionFromUser",
 userLoginName: $().SPServices.SPGetCurrentUser(),
 async: false,
 completefunc: function(xData, Status) {

 //If the current User does belong to the group "SharePoint Group Name"
 if($(xData.responseXML).find("Group[Name='Qassas Group']").length == 1)
 {
 // where circle1 is the id of div
 document.getElementById('ID1').style.display = "none";
 } else
 {
 document.getElementById('ID1').style.display = "block";
 }
 }
 });
});
</script>

At the blow line, replace the ‘Qassas Group‘ with your SharePoint Group.

if($(xData.responseXML).find("Group[Name='Qassas Group']").length == 1)

At the below line, replace the ‘ID1’ with your Div ID that you need to hide it.

document.getElementById('ID1').style.display = "none";
document.getElementById('ID1').style.display = "block";

Output

As the above code, you should note that when a user belongs to the specified SharePoint group ‘Qassas Group‘ login to the site. The specified DIV ‘ID1‘ should be disappeared as shown below.Show Hide a DIV tag based on a user group in SharePoint via SPServicesEnjoy 🙂

Advertisements

3 thoughts on “Show / Hide a DIV tag based on a user group in SharePoint via SPServices

  1. Note that this is NOT security, though depending on your needs it may be a very useful solution.

    Another approach would be to put items in a list for each circle. Then apply the permissions you need to each of those items. Use GetListItems to retrieve the items, adding the circles to the page which are returned. People without permissions to any particular item won’t see that circle.

    M.

    Like

    1. Mr.Marc, First of all,I would like to thank you for your precious comment that makes me so proud by receiving it.
      As for your suggestion, it is the best and that’s what I’m already doing on my side, but as you know to show these icons with this style from a list. it will require creating an Item Style that not easy for some readers.

      Meanwhile, In this article, I just want to explain how to hide or show a DIV tag based on a user existence in a specific group with a specific permission and using your SPService creativity.

      Let me please update my the article by specifying the scenario in details, and please don’t deprive us of your valuable comments.

      Like

  2. Salam Mohamed, Thanx for the post! However I want to know if the script is also working for Active Directory Groups inside SharePoint Groups.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s