Using the latest office 365 global nav in a Sharepoint app

Question

I've written a SharePoint app with the following header code which comes with the Visual Studio template for a new Sharepoint app:

<%@ Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

However, this displays what I presume is the "old" Sharepoint header - all the list of Office apps listed in a single, horizontal nav.

I'd like instead for it to display with the more modern Office 365 nav with the black bar. This will mean my app's pages fit with the rest of the Sharepoint site.

What header should I use to get this nav instead? Is there any documentation you can point me to that would help answer this.

Thanks for your help!

Answer 1

The App model you're using only pertains to the 'Classic' pages with the Blue Header. The second image (Communication Site) is actually a 'Modern' page which follows a completely different Development stack.

For more information on writing Apps for 'Modern' pages, check out SharePoint Framework (SPFx)

https://github.com/SharePoint/sp-dev-fx-extensions/tree/master/tutorials/app-extension

You can modify the header and footer using an Application customizer. Download the above example and deploy it to your App Catalog. There is a steep learning curve when starting with SPFx, so here are some more resources to get you started

https://www.youtube.com/watch?v=yrFNu6K7iuU

https://myignite.microsoft.com/videos/53866

https://blog.mastykarz.nl/build-sharepoint-framework-solutions-online-onpremises/

Good luck!