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 CostsThis 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 ContextThe requirement context here is to have a Fully Immersive Page without SharePoint Branding and allowing REST Operations.
Key SolutionI 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
StepsOpen 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" %>
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="WebPartPageExpansion" content="full" />
<meta http-equiv="X-UA-Compatible" content="IE=10″ />
<SharePoint:CssRegistration Name="default" runat="server"/>
</head>
<body>
<form id="form1″ runat="server">
</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 ChallengeNow 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"/>
<script src="/_layouts/15/init.js"></script>
<script src="/_layouts/15/MicrosoftAjax.js"></script>
<script src="/_layouts/15/sp.core.js"></script>
<script src="/_layouts/15/sp.runtime.js"></script>
<script src="/_layouts/15/sp.js"></script>
Add Form Digest value too.
<form id="form1″ runat="server">
<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 TestNow 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/ReferencesSharePoint Pages
http://bit.ly/1SKXOrISharePoint Editions & Features
http://bit.ly/1K0UyY5Form Digest
http://bit.ly/1QIKzWBSummaryIn this article we have explored a sleek way of developing Fully Immersive SharePoint Pages.
0 comments :
Post a Comment