Implementing a custom user experience in a CMS is a complex process. Having the right tools at your disposal can simplify the process tremendously.

(Design) Manager

One of the new capabilities of SharePoint 2013 is Design Manager. Using an HTML-based approach it allows you to turn your static HTML templates into SharePoint Master Pages and Page Layouts. Particularly if you are new to SharePoint you will appreciate working with Design Manager.

Some scenario’s require you however to use more complex techniques for implementing custom user experience in SharePoint. In such cases you might want to edit Master Pages and Page Layouts directly as opposite to using Design Manager.

Even if you are not working with Design Manager itself, you can still benefit of it. By mapping Master Page Gallery as a network drive you can use the web editor of your choice to edit branding assets.

Inconvenient implementing SharePoint branding in a team

Although this approach seems pretty straightforward, it’s going to work as long as you are the only person working on the branding files. As soon as more people start editing Master Pages and Page Layouts you will want to ensure that you won’t overwrite each other’s changes. Having configured versioning settings on the Master Page Gallery, working with a network drive and a web editor of your choice becomes less convenient. You cannot see whether the particular Master Page or Page Layout is checked in and if you need to check it out, you have to switch to your browser. Luckily there is a better way to edit Master Pages and Page Layouts with the editor of your preference.

Edit Document: a hidden gem

When you select a Page Layout or a Master Page in the Master Page Gallery, and pay a close attention to the Ribbon, you will see the Edit Document button become enabled.

Inconvenient Edit Document

By default, when you click the Edit Document button, the selected asset file will be opened in SharePoint Designer. This process is controlled, depending on your browser, either by an ActiveX control (IE browsers) or a plugin (Mac: Safari 3+, Firefox 3+,  Chrome; Windows: Firefox 3+, Chrome). After instantiating of the applicable control, the EditDocument2 method is called. Unfortunately, although it is supposed to accept a parameter specifying which program to use to open the file (varProgID), it seems to ignore that parameter altogether. As a result the asset file is opened in SharePoint Designer. Luckily SharePoint Designer isn’t hardcoded into this process – it is merely being used because it’s configured as the default editor for Page Layouts and Master Pages and this is exactly what you need to change to use editor of your choice instead.

Editing Page Layouts and Master Pages with the tool of your choice

In order to use your editor of choice instead of SharePoint Designer for editing asset files from within the Master Page Gallery, there are three things that you need to do. In the following examples we will use Notepad++ as the editor of our choice to use instead of SharePoint Designer.

Important: All of the following changes must be applied to your client machine.

Registering the ProgID for your editor

First of all you have to register a ProgID for your editor. This is being done in Windows Registry.

Following code snippet presents the contents of a .reg file that you can use as a starting point to add the ProgID of your editor to registry.

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.aspx.1]
@="ASP.NET Server Page"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.aspx.1\DefaultIcon]
@="\"C:\\Program Files (x86)\\Microsoft Office\\Office15\\SPDESIGN.EXE\",58"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.aspx.1\shell]

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.aspx.1\shell\Edit]
@="&Edit"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.aspx.1\shell\Edit\command]
@="\"C:\\npp\\notepad++.exe\" \"%1\""

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.aspx.1\shell\New]
@="&New"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.aspx.1\shell\New\command]
@="\"C:\\npp\\notepad++.exe\" \"%1\""

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.master.1]
@="ASP.NET Master Page"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.master.1\DefaultIcon]
@="\"C:\\Program Files (x86)\\Microsoft Office\\Office15\\SPDESIGN.EXE\",58"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.master.1\shell]

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.master.1\shell\Edit]
@="&Edit"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.master.1\shell\Edit\command]
@="\"C:\\npp\\notepad++.exe\" \"%1\""

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.master.1\shell\New]
@="&New"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Npp.master.1\shell\New\command]
@="\"C:\\npp\\notepad++.exe\" \"%1\""

There are a few things worth noting in the snippet above. First of all you have to register separate ProgIDs for each extension, so there is one for Page Layouts (Npp.aspx.1) and one for Master Pages (Npp.master.1). When defining your own ProgIDs it’s a good practice to follow the convention such as <identifier>.<filetype>.<version>.

For each ProgID we register two commands: new and edit. Those are required for this change to work correctly. Finally, to limit the alteration we keep using the standard SharePoint Designer icons for Page Layouts and Master Pages.

Associating the ProgID with the file types

The next step is to associate your newly created ProgID with the .aspx and .master extensions. Also this step is done in the registry. You can use the following code snippet as a starting point:

Windows Registry Editor Version 5.00

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\.aspx]
@="Npp.aspx.1"

[HKEY_LOCAL_MACHINE\SOFTWARE\Classes\.master]
@="Npp.master.1"

The final step is to set the editor of your choice as the default program for both file types. In Windows 2012 you can do this by right-clicking a file and from the context menu choosing the Open with > Choose default program… option.

Having completed those configuration steps, the next time you navigate to the Master Page Gallery, select a Page Layout or a Master Page and click the Edit Document button from the Ribbon, the selected asset file will be opened in the editor of your preference.

Important: Should you get the “We’re sorry, we couldn’t find a program to open this document.” error message after clicking the Edit Document button, click the Open in Explorer button when in Master Page Gallery first. As opposite to SharePoint Designer, Notepad++ doesn’t authenticate separately to SharePoint and if you haven’t authenticated before, opening the file will fail with a generic error message.

Additional great benefit of using the Edit Document button for opening branding assets is, that if you have configured the versioning settings on the Master Page Gallery so that it’s required to check out a file before it can be edited, you will be automatically prompted should it be necessary to check out the particular file.

Summary

Implementing modern user experiences in content management systems is a complex process. Having the right tools at your disposal can simplify the process. Although by default SharePoint Designer is being used when directly editing Master Pages and Page Layouts you can change it to use the editor of your choice instead.