Sleek SharePoint Pages!

In real-world projects I have noticed the following SharePoint Branding mistakes.

1. Inheriting a Publishing Page for a Fully Immersive UI where we don’t actually use any Publishing functionalities like Page Layouts, Approval Workflow, Content Authoring etc.

2. Using Content Editor web part to dynamically invoke an HTML file there by delaying loading through unwanted SharePoint stuffs.

Incurred Costs

This will have immediate costs of:

· Increased Development Time

· Reduced Performance

· Increased Download Size

This will have future costs of:

Forcing client to purchase SharePoint Standard/Enterprise editions rather using the Free Foundation

Requirement Context

The requirement context here is to have a Fully Immersive Page without SharePoint Branding and allowing REST Operations.

Key Solution

I am providing a Key Solution which is:

1. Sleek in SharePoint Branding

2. Applicable for Fully Immersive Pages

3. Minimal SharePoint Contents loaded

4. SharePoint Foundation compatible

Steps

Open a SharePoint Designer and Choose Site Pages > Page ASPX option.

Now, Open Designer and Go to Site Pages library.

You can see our page is listed there and the Content Type is of Wiki Page. We don’t worry about that since we are not using any Wiki Page functionalities. Plus, our page is SharePoint Foundation compatible.\

You can also use HTML page instead of ASPX. In this case we need to change the Web Application property to allow HTML extensions to render instead of download & work with more challenges.

Now open the Page and choose Edit file option.

You will see the following page with read-only mode.

Click on the Advanced Mode to edit the contents.

You will get the page in edit-mode as shown below.

From the Immersive Page Perspective, We are expecting a Full Custom Page which does not require any SharePoint Branding or Ribbon elements. The above Page fits our requirement.

Following is the page content.

<%@ Page Language=”C#” %>

<%@ Register tagprefix=”SharePoint” namespace=”Microsoft.SharePoint.WebControls” assembly=”Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c” %>

<SharePoint:CssRegistration Name=”default” runat=”server”/>

</head>

<body>

</form>

Your HTML content goes here..

</body>

</html>

You can save the page and test in browser. You can see now the SharePoint Branding elements got removed.

You can View the source. The source looks simple.

Now you are ready to use the above Page Template for building the Fully Immersive Page with Responsive Or Non-Responsive web design. Full Control! Sleek! Faster!

You can also use HTML page instead of ASPX. In this case we need to change the Web Application property to allow HTML extensions to render instead of download & work with more challenges.

The Challenge

Now we need to use JSOM or REST API on the ASPX page. Clearly, we cannot use API because it will throw lot of security errors. The solution is to include the Form Digest tag.

Form Digest tag marks the page with right Security Contexts. This will allow the page to do POST requests to modify the contents in SharePoint.

Following would be the modified code.

<SharePoint:CssRegistration Name=”default” runat=”server”/>

Add Form Digest value too.

<SharePoint:FormDigest runat=”server”></SharePoint:FormDigest>

Your HTML content goes here..

</form>

The additional contents added ensure that the Page is protected to Post data through APIs.

Since we are hiding SharePoint Ribbon, it will hide the User Display Name & Gear Icon too. If you require these, I would recommend creation of a Custom DIV and Add those Items manually.

Insert Test

Now let us really test an item insertion. You can use the following link for that.

http://www.jeanpaulva.com/index.php/2016/01/23/insert-using-rest-api/

References

SharePoint Pages http://bit.ly/1SKXOrI

SharePoint Editions & Features http://bit.ly/1K0UyY5

Form Digest http://bit.ly/1QIKzWB

Summary

In this article we have explored a sleek way of developing Fully Immersive SharePoint Pages.