SharePoint Wiki Page with Web Parts Pattern for Custom UI

In my previous post I used a scoring system to come up with an answer to the question: What is the most ideal type of page to use when customizing SharePoint? Somewhat surprisingly, the answer based on my criteria is a SharePoint Wiki Page. A wiki page which has the advantage because all wiki pages are served from a shared template instead of being actual files. Creating a wiki page doesn’t create a custom ASPX page that requires maintenance. By relying on the central template, the structure and features of a wiki page stays up to date as SharePoint evolves.

In this post I will cover one of the patterns for custom UI based on wiki pages we use in our apps here at InstantQuick: Wiki Page with Web Parts. This pattern is best if we want to allow the owners of the target site to modify the solution after it is deployed. It does not require a provider host and works when an add-in is fully contained in SharePoint. You can see this design pattern in action in the IQParts – Cloud App Compatible Web Parts using AngularJS and Bootstrap sample framework.

Wiki Page with Web Parts Pattern

This pattern is the easiest to follow because you can implement it using nothing but SharePoint and a text editor like notepad. The pattern consists of a wiki page, the default page type in a Team site, and one or more Content Editor or Page Viewer Web Parts that load the custom solution. Logically, the pattern looks like this:

The pattern is simple, but one important rule is that a customization’s appearance and behavior should depend only on the scripts, style sheets, and other resources included in the customization – not on the parent document’s or its related resources. Following this rule gives your customization the best chance for a maintenance free future as the SharePoint platform evolves.

The easiest way to enforce this rule is to refine the pattern to contain the customization in an iframe.

The iframe creates a new document that allows the customization to work in isolation from the parent document. In this version of the pattern the app must be contained in an ASPX page. The default permissive file handling settings will cause the browser to download html files instead of rendering the html in a frame. The file extension prevents the download.

The container ASPX used in in the IQParts – Cloud App Compatible Web Parts using AngularJS and Bootstrap sample framework is shown below. As you can see it does not contain any actual server side code.