Show hide div based on user permission using SPServices in SharePoint 2013


Here we will discuss how we can show and hide various divs (<div> </div>) based on user permission using jQuery and SPServies in SharePoint 2013. If you are new to SPServices SharePoint, learn Work with SPServices in SharePoint 2013.


New to Office 365 SharePoint Online? Get Office 365 Enterprise E3 Subscription & Try out all the features

Below is the full code;

<script src=” http://Demosite/sites/PS/Style%20Library/jquery-1.11.2.min.js” type=”text/javascript”></script>
<script src=”http://Demosite/sites/PS/Style%20Library/jquery.SPServices-0.7.2.min.js” type=”text/javascript”></script>

<script type=”text/javascript”>
$( document ).ready(function() {
var HireGroups = [“Group1 “Group2”];
var difference = [];
var actualgroup = [];
var loggedinUserGroup=[];
$().SPServices({
operation: “GetGroupCollectionFromUser”,
userLoginName: $().SPServices.SPGetCurrentUser(),
async: false,
completefunc: function(xData, Status)
{
$(xData.responseXML).find(“Group”).each(function()
{

loggedinUserGroup.push($(this).attr(“Name”));

});
}
});

jQuery.grep(HireGroups, function(el) {
if (jQuery.inArray(el, loggedinUserGroup) == -1) actualgroup.push(el);
});
jQuery.grep(HireGroups, function(el) {
if (jQuery.inArray(el, actualgroup) == -1) difference.push(el);
});

if(difference.length <= 0)
{
$(“#divid1”).hide();
$(“#divid2”).hide();
$(“#divid3”).hide();
$(“#OtherTr”).hide();
}
else
{
for(i=0;i<=difference.length;i++)
{
//alert(difference[i]);
if(difference[i] == “Group1”)
{


$(“#divid1”).hide();
$(“#divid2”).hide();
}
if(difference[i] == “Group2”)
{
$(“#divid3”).hide();
$(“#OtherTr”).hide();
}
}
}
});
</script>

You may like following SharePoint 2013 SPServices tutorials:

Hope this will be helpful to you to show or hide div based on user permissions in SharePoint 2013 using SPServices.

Check out Best Alternative to InfoPath -> Try Now

FREE SHAREPOINT 2019 PDF

(Installation & Features)