Creating Custom Master Page for Hosted Apps

Introduction

When you are building SharePoint 2013 apps, the Chrome control is used to make sure your app is in sync with the Host Web. However, there may be some situations where you would want to create your own master page and use it within your app. I have detailed below the step by step approach to achieve this requirement.

Step 1

Create your custom master page. You can start with the minimal.master page and customize it as per your requirements.

• You can take the minimal.master page either from an on Premises SharePoint Server or from SharePoint Online. If you are using the master page from SharePoint Online, make sure you change the assembly version number to 15 instead of 16 so that the master page can be used within on Premises as well as SharePoint Online.
• You will have to change the doc type to HTML if you are building a master page with Responsive UI.

Step 2

Create a Module in your project to add the master page that you just created above.

• Add your custom master page to this module.
• You will need to modify the elements.xml file so that your master page will go to the master page gallery of your app as below:

<File Path="ModuleName\CustomMasterPageName.master" 
Url="_catalogs/masterpage/ CustomMasterPageName.master" 
Type="GhostableInLibrary"></File>

• Replace ModuleName with your module name.
• Replace CustomMasterPageName with your master page name.
• The above change will deploy the master page into the master page catalog document library of your app.
• GhostableInLibrary will make sure the document is placed within the document library.

Step 3

Change the master page name for your App Pages as below:

MasterPageFile="~site/_catalogs/masterpage/ CustomMasterPageName.master"