Security Trimmed Hub Site Navigation Updates!

I had recently posted a blog  about a SharePoint Framework (SPFx) application customizer I built for use with hub sites in Office 365. The problem I currently have with Hub navigation is that all of the links are static links. This means, that whoever creates the common navigation must be cognizant of what links end users have access to. With that in mind, I built a new navigation the replaces the out-of-the-box hub site navigation elements with a security trimmed listing of sites within a Hub.

For brevity, this isn’t an all inclusive tutorial. It’s just discussing the high level changes to the original implementation of the application customizer.

How it works

The new navigation uses a combination of the SharePoint Search API and the new Hub sites API. When a user lands on a site collection that belongs with in a hub, I grab the hub site information to find all of the sites that exist within the hub using the Search API. The benefit of this, is that I can security trim a listing of sites with in the navigation. That means I can have sites in a hub that a user may not have access to, yet include them as elements in the global hub site navigation.

HubNavSite

What’s wrong with V1?

While this approach is great and I have had quite a bit of success building out security trimmed navigation, the default implementation lacks the ability to use the existing hub site navigation elements. This is why I have released v2 which is available on GitHub for download.

The new application customizer still implements the “Sites” listing node in the navigation.
NewNav

Adding existing Hub navigation

Version 2 is almost identical to version 1 with the exception that I am now pulling in the static elements from the default hub navigation. To do this, I’ve made some modifications to the base ReactHubsiteNavbarApplicationCustomizer.ts file, to set the Navigation property equal to the navigation array that returns from the _api/web/hubsitedata endpoint.

this._currentHubSiteData = await  searchService.getHubSiteData().then((hubData: IAssociatedSite) => {
if(hubData){
return searchService.getHubID(hubData).then((hub: IHubSiteData) => {
//add existing hub navigation
hub.Navigation = hubData.navigation;
return hub;
});
}
else{
return null;
}
});

Now that I have the elements as part of the _currentHubSiteData object, I just have to modify my HubNavBar.tsx component to accommodate loading the existing navigation nodes. One thing that isn’t working currently with the commandbar, is the ability to have a navigation element with children, in which the parent link is clickable.

SiteTrimmedMenuCode

You may notice the methods are almost identical. Rather than refactoring… I’ve separated them out because I have some future changes I’d like to make specifically to the rendering of the trimmed sites listing.

Ability to edit navigation

Now that we are showing the existing navigation elements and hiding the existing Hub navigation html…I needed a way to allow users to add and edit the original Hub navigation. There is an endpoint at _api/Navigation/SaveMenuState for saving changes to the menu, however it is undocumented by Microsoft so I will avoid using it for now. Instead, I am going to re-use the out-of-the-box Hub site navigation control to manage adding/editing elements.

To do this, I am checking if the user has ManageWeb permission, and then I will show an edit button which will show/hide the original Hub navigation.
//if user has manage web permissions, show edit button
const hasPermission:boolean = this.props.context.pageContext.web.permissions.hasPermission(SPPermission.manageWeb);


if(hasPermission){
commandBarItems.push({
key:"editButton",
name:"Edit",
itemType:ContextualMenuItemType.Header,
onClick:this._editOnClick,
className:"editButton",
href:"#"
});
}

Caveat: The out of the box permission for managing Hub navigation is the new “Edit” permission. Which means that users in the Member group have access to change the navigation. I think this is a bit too much permission, so I am restricting the permissions to “ManageWeb”.

The Result

hubnavnew

The end result is a combination of security trimmed sites listing within the hub and the existing hub site navigation. User’s with ManageWeb permissions on the Hub site will be able to see the edit button to modify the existing navigation elements.

Notes

Because of the caching in the customizer, it may take 15 minutes for changes to appear!

GitHub – https://github.com/bcameron1231/SharePoint-Framework/releases/tag/v2.0

Code is in pre-release and subject to change (refactoring).

 

12 thoughts on “Security Trimmed Hub Site Navigation Updates!

  1. Chris June 18, 2018 / 8:44 am

    Hi Beau – this article and the past are very informative. I’ve started with v2 and tried adding this to our tenant, and it does not appear to be taking hold. I deployed to the CDN, updated my path, added the app – my colleague can still see two sites in our test site collection, where he should only see one. Is there one simple way to tell that your component has deployed successfully?

    Like

    • Beau Cameron June 18, 2018 / 10:34 am

      Hi Chris, I replied on the company website post. However, I’ll re-post here, please respond wherever is easiest for you. Original Reply:

      Thank you for checking out the solution. I’ve been meaning to update the code and documentation for this, but I’ve been pretty busy! If you open up Dev Tools in your browser (F12), you should be able to figure out a) if the component is trying to load or not and b) if there is an error preventing it from loading.

      V2 is a bit different than V1 because it replaces the HubNav (which I actually don’t love at this point). Can you see if there is an error showing up for you, if there is, let me know and I’ll put out a remedy. Also, what commands are you using to deploy the Customizer to your site?

      I’d also like to note, this was more of a demonstration of the functionality, feel free to clone and change the code on the GitHub site to suit your needs! Looking forward to hearing from you.

      Like

      • Chris June 20, 2018 / 6:38 am

        Hi Beau – I dont know that I deployed the customizer, which might be my issue. I simply packaged the solution per the commands in the readme, deployed the app to the app catalog (checked that the CDN path was correct), and then looked to see if the menu was security trimmed. I checked my features (both site and site coll level) to see if anything was being shown there, but it doesnt appear that this uses feature deployment.

        Are there commands I have to run once the the app is installed to the app catalog? Fairly new to SPFx, and I really appreciate the help.

        Like

      • Chris June 20, 2018 / 6:49 am

        Hi Beau, a quick update – it appears that everything was deployed correctly. I do not see anything in the Dev Tools (F12) that indicates the solution is running, however. Again, if I missed a step between installing to the app catalog and then having the solution running on my modern hub site, then that may be the issue.

        Like

      • Chris June 20, 2018 / 8:30 am

        Ok, that seems to have changed my nav – so is that supposed to happen automatically, or are those commands required each time?

        Like

      • Chris June 20, 2018 / 12:13 pm

        Now that I have this working, just a couple more questions:

        – The navigation appears to disappear for a second before the new one appears – is this expected?
        – The navigation also appears to have different styling – again, expected?
        – Finally, the “Sites” node – renaming this can be done in code, obviously, but is there a way we can do this without hardcoding it?

        Like

      • Beau Cameron June 20, 2018 / 1:15 pm

        Hi Chris,
        Sometimes it will appear/disappear due to the nature of the page load for client side scripting. The Navigation does have different styling unfortunately, I’ve been working on a V3 which hopefully fits the needs better for some people. The “Sites” node can be modified. In that PowerShell script I sent you, you’ll notice on line 11, it says “NavHeading”. You can specify whatever you want the header to be! 🙂

        Also, I’d like to re-iterate, while I have published this code for use, I can’t always keep up with the demands of it, so if you wish to contribute or make modifications, please do. It was really meant as a means to show people “what you can do” with hub sites and SPFx.

        Let me know if I can be of any further assistance.

        Thanks,
        Beau

        Like

      • Chris June 20, 2018 / 1:19 pm

        No doubt – this is very helpful, and if I have anything I can contribute, I certainly will.

        Like

      • Chris June 20, 2018 / 1:36 pm

        Last point of feedback, and how I’m planning to modify this is – simply add the “Sites” header to the existing nav instead of creating a brand new Nav. By modifying the existing nav, you dont deal with the flicker, and you utilize the existing styles.

        I’m going to work on implementing this, and I’ll see where I get.

        Like

  2. Henrik July 10, 2018 / 1:39 pm

    Hi !

    I am very new to the whole sharepoint framework stuff.

    I ran the powershell script from the gist more than one time and got a new navigation bar everytime and I do not manage to understand how to remove them again 😛

    Another question, is it possible to NOT put the security trimmed sites in the submenu ? Just put them straight on the bar together with the static links.

    Thanks in advance and thanks for the awesome work with this customizer!

    Like

    • Beau Cameron July 16, 2018 / 11:44 am

      Hi! You could definitely modify the code to not use a sub menu, and instead just list them across the top. But it’s likely in most organizations, there will be many many sites within a hub, and that wouldn’t scale well visually unfortunately.

      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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s