SOLVED

SharePoint Online Custom Master Page

Copper Contributor

Hi there,

 

I have to create SharePoint Online publishing site with lot of branding like dashboard. I read few articles but couldn't find proper way to start with.

 

First I want to customize master page, I know we can do using design manager & SharePoint designer but can I do using Visual studio so that I can utilize version control?

 

Any link  or sample would be appreciated.

19 Replies
best response confirmed by VI_Migration (Silver Contributor)
Solution

You definately could use Visual Studio to create a custom Master Page so that you can utilize version control / source control. You should however consider your approach to branding carefully. In general custom Master Pages should be avoided...

 

Please read about the latest guidance in the articles below:

https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/portal-branding

 

https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/branding-and-site-provisioning-sol...

 

Have you considered making use of Communication Sites in SharePoint Online? These type of sites are generally considerd to be the successor to traditional Publishing Sites

Totally agree with Paul. In general avoid to create custom master pages in SPO.

Thank you for the response.

I understand I should avoid custom master page route and I would also want to stick to the recommendation.

Please review the attached screenshot and the site https://www.parlament.ch/en (The Swiss Parliament). I want to build similar thing.

Basically, in Office 365 (E3 license), I want custom branding with webparts that pull information from various SharePoint Apps (such as Delve, PowerApps, Yammer, Planner) and few more webparts that contain news, events, rollup data from sharepoint etc...

I can build SharePoint Addins to pull data from various SharePoint Apps and create webparts to get data from within sharepoint.

The only question that remain is about branding the SharePoint landing page such that it only contains things that I want to expose to the users and not other things such as Apps launcher, Ribbon, etc..

I couldn't find anything that specific in the recommendation links you sent. Any suggestions on sticking to the recommendation and brand SharePoint similar to the screenshot/Swiss Parliament website?

Please advise.

The kind of customizations in the screenshot can be done without creating a custom master page. Basically you need to develop custom WebParts (SPFx or just Content Editor WebParts with JS embedded) + injecting the required JavaScript and CSS to customize top navigation bars

Agree with Juan Carlos' suggestions. Furthermore, for full and unlimited branding options you could even consider building and hosting a full custom website (in ASP.NET and Azure for example) and using SharePoint Online only as a backend service hosting the data.

Thank you @Paul Pascha and @Juan Carlos González Martín for the answers.

Users expect the App Launcher to be present, i would not recommend trying to hide it or anything on the Office Suite Bar. You cannot anticipate what a user wants to do next and trying to force them to go on a specific path will be huge waste of time and effort. 

I recommend thinking about this a little differently. Office 365 is a huge set of apps that is constantly changing, your app/intranet is going to be just one more of those apps. You will be more successful if you design your content to work within the Office 365 suite provided by MS than if you try to replace what is already there.

Hi @Shital Patel,

 

To answer your question, here is an article I wrote a long time ago on how to package master pages and page layouts with Visual Studio. However notice the date - this article was hot 7 years ago. To give some perspective - Windows 7 had recently come out, and iPhone had not even been announced when this was written! Just think how much the technology world has changed since then. Nobody cared about making web sites mobile-ready, for example, since there were no devices worth surfing the web on! So I'm going to pile on with everybody else and try to persuade you to take a more modern approach, much as I would tell a friend not to build a home on an eroding beach.

 

Having a custom master page has a couple of side-effects:

 

  • It locks you forever into "classic" SharePoint. Page sizes are bigger, performance is slower. Even if you invest in making your page responsive, none of the classic web parts are responsive, so your mobile experience won't be very good unless you write all custom web parts. None of the cool modern web parts work in classic mode (however as another commenter replied, you could write your own in SPFx and they'd work across classic and modern sites).

  • It's an ongoing "tax". Microsoft sometimes changes the master pages to fix bugs or introduce new O365 features. If you use your own master page, you need to take responsibility for checking to see if Microsoft has changed their master page, and then merge the changes in with yours.

Indeed, script injection (as I did in this article here) is a reasonable path, but you may find it difficult to do the level of branding you require, and script injection creates potentially brittle dependencies on certain HTML elements being present. If you hide an element that contains the O365 suite bar and then Microsoft changes its element ID, your code won't work anymore. Since you'd be essentially taking a dependency on product internals, there would be no warning as there would be with an API or feature change.

 

I have yet another option for you to consider: Write a web site outside of SharePoint, and pull the content into it using the API. This gives you complete control, and you can still use the CMS features of SharePoint. If you secure your page with Azure AD, you'll enjoy single sign-on with O365, and can use delegated permissions to act on the end user's behalf without ever touching a username or password.

 

WIth this approach authoring, document uploading, security, etc. could all be set in (unbranded) SharePoint, and your web site could reach in on the user's behalf and pull out the content and present it any way you want. Thus your coding effort is only on the UI, not authoring and administration. This is fully supported and completely immune to UI changes from Microsoft. Some 3rd party "Intranet in a Box" vendors have taken this approach. The downside is that you lose the ability to bring in web parts from SharePoint or 3rd parties, but maybe that's not so important if you want pixel-perfect control over the user experience.

 

 

 

Thanks and best of luck to you!

Hi,

I have a similar scenario. Building the azure or .net websites make sense but but it has an issue with the images. Image download from sp online onto azure is an issue..

 

Regards,

Syed

If we decide to use spfx widget for customization. Can we write a full page spfx app? hiding the quick launch?

 

Regards,

Syed

Interesting Mudsar, I didn't try it with an external page accessing images in SP. I can imagine that's an issue because the image can't do the authentication flow (even though it's transparent assuming your page is Azure AD authenticated), which requires a form post at one point, so it won't work for anything but a web page.

 

That shouldn't be issue if you ran your SPA on an empty SharePoint page in a document library; here is an example with a Settings page on it. Almost anything can go in the PlaceHolderMain element, including a full SPA. The advantage here is that you're running in SharePoint so you'll have the necessary FedAuth token.

 

ALSO Here's a good article with pros/cons on using classic sites with master page branding vs. modern.

 

SharePoint is in a time of transition, making these decisions more complex. I wanted to add an external SPA as another option for you to consider, but that's certainly more work... lots of tradeoffs!

There is no way to do this with SPFx right now; add your vote to this UserVoice if you'd like to see that added! Meanwhile you can always use a non-SPFx widget with SPFx type tooling (see Julie Turner's blog article) and host it on an .aspx page in a document library. If you're careful it will port easily to SPFx!

Bob,

Dint get this statement "so it won't work for anything but a web page." If i create a .aspx page instead of .html page are there chances of image working?

 

Regards,

Syed

My theory is that if you run it from a page in SharePoint, as opposed to another site somewhere, it will start working because it will have access to the FedAuth cookie that SharePoint uses when you log in.  You can also use the SharePoint REST API freely without the need for more authentication (though you need to deal with the "forms digest" when doing anything other than a GET request). Where is your page hosted now?

The reason I mentioned an .aspx page is that it turns out that if you put an .aspx page in a SharePoint doc lib, it will render. You can't put any code behind but you can use built-in SharePoint web controls and any HTML and JavaScript you wish. The sample I sent adds the web controls for SharePoint's navigation etc. in case you wanted to bring that onto the page with your SPA.

 

Does that help?

 

Thanks!

 

Hi Bob,

My Page is hosted in azure using ADAL to authenticate. I am able to call SPO APIs but images are not rendering.

Regarding uploading a aspx page to document(this will not work in the modern team or communication sites) as by default the page is getting downloaded instead of rendering.

 

Do you know anything about road map of publishing sites?. Will it be there or deprecated in future. If microsoft is keeping the publishing sites than we can use page layout approach for our customization but not sure about the publishing site roadmap

 

Regards,

Syed


@Bob German wrote:

My theory is that if you run it from a page in SharePoint, as opposed to another site somewhere, it will start working because it will have access to the FedAuth cookie that SharePoint uses when you log in.  You can also use the SharePoint REST API freely without the need for more authentication (though you need to deal with the "forms digest" when doing anything other than a GET request). Where is your page hosted now?

The reason I mentioned an .aspx page is that it turns out that if you put an .aspx page in a SharePoint doc lib, it will render. You can't put any code behind but you can use built-in SharePoint web controls and any HTML and JavaScript you wish. The sample I sent adds the web controls for SharePoint's navigation etc. in case you wanted to bring that onto the page with your SPA.

 

Does that help?

 

Thanks!

 



Hi Bob,

My Page is hosted in azure using ADAL to authenticate. I am able to call SPO APIs but images are not rendering.

Regarding uploading a aspx page to document(this will not work in the modern team or communication sites) as by default the page is getting downloaded instead of rendering.

 

Do you know anything about road map of publishing sites?. Will it be there or deprecated in future. If microsoft is keeping the publishing sites than we can use page layout approach for our customization but not sure about the publishing site roadmap

 

Regards,

Syed

To get the aspx pages to work - try disabling NoScript https://support.office.com/en-us/article/allow-or-prevent-custom-script-1f2c515f-5d7e-448a-9fd7-835d... before uploading your aspx file(s). I just tried it on both a modern Communication and Team site and it worked OK.

 

As for the roadmap on Publishing sites - the classic sites will continue to be supported for the forseeable future. I expect modern sites to start to support more of the Publishing features as well,  but there's nothing specific on the roadmap yet...

Hi,

I have a similar scenario and of course similar problems.

 

If i resume you have two options. If you want something really specific, create a full custom website and using SharePoint Online only as a backend service hosting the data is the best solution. otherwise you must stay inside the trend imposed by SPO, customize what it was possible and create some webparts.

 

So i decided to create webparts and add them to my homepage (Communication site). But quickly a great interogration appeared.

 

How to add automatically webparts to my homepage when a create subsites (and remove all defaults) when you have a site design ? With old senario and a basic SP, we added that to a pageLayout with a custom master page or inside onet.xml. But what about now with SPO...

 

- Create Add-in : Not exactly what i want.
- Create SPX : Of course i will create my webparts with SharePoint Framework and push to my app catalog site. But I do not think it's possible to automatically deploy webparts inside a specific pages at this level.
- Use PowerShell with Microsoft Flow : May be a good way but i never read something about it on documentation.
- Use external PowerShell and run it : Possible but it's not the best solution because it's not 100% automatic.

 

Otherwise I don't have ideas how to achieve this. And I have more or less the same problem if I want to create new page automatically, what is the best solution?

 

Best Regards,

1 best response

Accepted Solutions
best response confirmed by VI_Migration (Silver Contributor)
Solution

You definately could use Visual Studio to create a custom Master Page so that you can utilize version control / source control. You should however consider your approach to branding carefully. In general custom Master Pages should be avoided...

 

Please read about the latest guidance in the articles below:

https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/portal-branding

 

https://docs.microsoft.com/en-us/sharepoint/dev/solution-guidance/branding-and-site-provisioning-sol...

 

Have you considered making use of Communication Sites in SharePoint Online? These type of sites are generally considerd to be the successor to traditional Publishing Sites

View solution in original post