Dynamically Hiding PWA web components for Every user Except Admin


Hello Readers!!

In my previous article have discussed how to hide PWA web components but that process hides web components for every user regardless of what permission the user have.

In real time, PWA administrator must perform some operations/activities at the server side so he would require seeing PWA options to navigate. In this article I’m going to discuss on how to hide PWA web components everyone else except “PWA Administrators”. So that Admins can still see the web options like Top navigation, Quick launch, top link navigation, Gear button and sharing feature etc.)

Here, I’m going to use JavaScript  with jQuery and Ajax to check the current user permissions. If the user is part of Admin group don’t hide anything, else hide the components.

Here, I’m looking into Web Administrators (Project Web App Synchronized) group as PWA site maintains the default groups, you can find these groups at Site settings->Under Users and Permissions -> Site Permissions.

Alternatively, we can also use SetFullScreenMode option but getting few issues (will discuss in a new article) with this option in real time use.

Below is the piece of code used for checking the user permissions.

<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>


$(document).ready( function()

function isCurrentUserMemberOfGroup(groupName) {

var userIsInGroup = false;


async: false,

headers: { "accept": "application/json; odata=verbose" },

method: "GET",

url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/currentuser/groups",

success: function (data) {

data.d.results.forEach( function (value) {

if (value.Title == groupName) {

userIsInGroup = true;




error: function (response) {




return userIsInGroup;


function HideMasterStyles() {

var isAdmin=false;

isAdmin = isCurrentUserMemberOfGroup("Web Administrators (Project Web App Synchronized)"); // //Administrators for Project Web App



// alert("User belongs to Admin group");



// SetFullScreenMode(true);



$("#sideNavBox").css("display", "none"); //1

$("#contentBox").css("margin-left", "20px"); //2

$("#suiteBarDelta").css("display", "none"); //3

$("#DeltaTopNavigation").css("display","none"); //4

$("#DeltaSiteLogo").css("display","none"); //5








Thanks for Reading.

In the next article will discuss on “PWA site Branding” without using SP designer.