Post
Ask Question

Sleek Way Of Developing Fully Immersive SharePoint Pages

Sleek SharePoint Pages

In real-world multi-million dollar 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, thereby loading 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 rather the Free Foundation.

The following are the few reasons we reached this stage:

  1. Poor SharePoint Branding knowledge
  2. Rush to Delivery

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, then Page and then select ASPX option.

file

Now, open Designer and go to Site Pages library.

library

You can see our page is listed there and the Content Type is of Wiki Page.

Note:

You can also use an 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.

option

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

mode

Click on the Advanced Mode to edit the contents.

mode

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

mode

You can also see that lot of unwanted contents are removed.

  1. No Title placeholder
  2. No Left Action placeholder
  3. No Ribbon placeholder

From the immersive page perspective, we are expecting a full custom page which does not require any SharePoint Branding or Ribbon elements.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <%@ Page Language="C#" %>  
  3.     <%@ Register tagprefix="SharePoint" namespace="Microsoft.SharePoint.WebControls" assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>  
  4.         <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">  
  5.   
  6.         <head runat="server">  
  7.             <meta name="WebPartPageExpansion" content="full" />  
  8.             <meta http-equiv="X-UA-Compatible" content="IE=10" />  
  9.             <SharePoint:CssRegistration Name="default" runat="server" />  
  10.         </head>  
  11.   
  12.         <body>  
  13.             <form id="form1" runat="server">  
  14.             </form>  
  15.             Your HTML content goes here..  
  16.         </body>  
  17.   
  18.         </html>  
You can save the page and test in browser. You can see now the SharePoint Branding elements got removed.

ie

You can View the source. The source looks simple.

source

Now you are ready to use the above Page Template for building the user interface.

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.

The following would be the modified code.
  1. <SharePoint:CssRegistration Name="default" runat="server" />  
  2. <script src="/_layouts/15/init.js"></script>  
  3. <script src="/_layouts/15/MicrosoftAjax.js"></script>  
  4. <script src="/_layouts/15/sp.core.js"></script>  
  5. <script src="/_layouts/15/sp.runtime.js"></script>  
  6. <script src="/_layouts/15/sp.js"></script>  
  7. Add Form Digest value too.  
  8. <form id="form1" runat="server">  
  9.     <SharePoint:FormDigest runat="server"></SharePoint:FormDigest>  
  10. </form>  
The additional contents added ensure that the Page is protected to post data through APIs.

Insert Test

Now let us test an item insertion. You can use this link for that.

References
Summary

In this article we have explored a sleek way of developing Fully Immersive SharePoint Pages. The source is attached with this document.

Read more articles on SharePoint:


Similar Articles