Inspiration

As Sharepoint sites grow, and members share lists, folders and items withe their colleguses, it's exceedingly difficult for a site owner to determine who has access to what within a site. A site owner needs to manually navigate through all lists,libraries files and folders, then click the share option from the menu, then....... This has been known to take HOURS!

What it does

The react security grid webpart lets the site owner easily who has access to what content on a site. It displays a grid showing the sites users on the x-axis and lists, libraries, folders, items on the y-axis. The grid displays an icon indicating if the user has access to the object. The user can drill down into libraries and folders by clicking on the library or folder name on the x-axis, just like in windows explorer. The user can change the permission being tested by clicking the Permission in the command bar and selecting a new Permission: This can save a site owner hours and hours of time. The webpart can be configured via the property pane to let user select the security level tested, the users and lists displayed, etc. Or it can be configured by an administrator to test a specific security level or show particular users or lists.

How I built it

The security grid webpart is built using typescript, react, spfx, pnp-js-core and office ui fabric. It retrieves all the lists, users security grumps from sharepoint using pnp-js-core and then renders a grid, showing who has access to what using office ui fabric.

Challenges I ran into

The relationship between the sharepoint securableobject, role assignment and user object is quite complex, even more so when accccessing it using rest. The pnp-js-core library made this much simpler. On the UI side, there was little documentation on how to rotate column headers to save space (see https://yetanothersharepointblog.wordpress.com/2017/11/17/displaying-rotated-column-headers-on-an-office-ui-fabric-details-list-within-an-spfx-webpart/)or to indent columns so that the files appear to be under the folders in office ui fabric. Thankfully whenever i posted an issue on the office-uifabric-react github site i received a quick reply.

Accomplishments that I'm proud of

I think this solution will be useful to all users of sharepoint online,

What I learned

react,typescript ,fabric

What's next for SharePoint Security Grid

There ar several areas that need to be addressed to give the use a full view of their site.

Unaccepted requestrs for access do not appear in the grid beacause the user does not actually have access until she accepts the invitation.

If an anonymous access link exists on a file it's should be indicated somehow,

the grid does not reflect active directory group membership.

Built With

Share this project:

Updates