A Responsive Blogger Website, That Take my blog to the next level.

I am a Software Developer, Learning and experementing with .Net Technology and try to put my Learning altogether here.


We have all sections related to .Net Technology, like .Net-C#, Asp.Net, MVC, jQuery, AngularJs, Sharepoint. Find out more...


Following are the some of the Advantages of using this Web site :-

  • Get Update about latest in .Net world.
  • Collection of Useful, Frequently used .Net Solutions.
  • It’s beautiful on every screen size (try resizing your browser!)
by

Sleek SharePoint Pages!

Chandan Kumar
shared this article with you from Inoreader
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.

p1

Now, Open Designer and Go to Site Pages library.

image

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.\
image
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.

image

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

p2

Click on the Advanced Mode to edit the contents.
image
You will get the page in edit-mode as shown below.

p3


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.

image

You can View the source. The source looks simple.

p4

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!

html

image
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"/>
<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.
image
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.
View on the web
Inoreader is a light and fast RSS Reader. Follow us on Twitter and Facebook.

0 comments :