As a SharePoint front-end developer it is important to understand the client life cycle in terms of DOM, Browser engine, etc. We will be talking about the Onload process in this post. There are different techniques used to Provide our custom JavaScript code loaded before / in the middle / alter OnLoad events in SharePoint.

Read some SharePoint 2013 tutorials:

Here we will see 8 different techniques used for the 0nload process. Below are the specified Techniques. Below are the code snippets for each technique in use.

Sys.Application.PageLoad

  1. Sys.Application.add load(SPLoad);
  2. function SPLoad(){
  3.     console.log(“Sys.Application.PageLoad.Time:” + ((Date.now()) – performance.timing.navigationStart))
  4. }

Sys.WebForms.PageRequestManager.PageLoaded

  1. Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(SPPageLoaded);
  2. function SPPageLoaded(sender,args){
  3.     console.log(“Sys.Webforms.PageRequestManager.PageLoaded.Time:” + ((Date.now()) – performance.timing.navigationStart))
  4. }

Document.ready Jquery

  1. jQuery(document).ready(jqueryLoadsSP);
  2. function jqueryLoadSP(){
  3.     console.log(“Document.ready Jquery.Time:” + ((Date.now()) – performance.timing.navigationStart))
  4. }
  5. function ProcessDefaultOnLoad() {
  6.     ProcessPNGImages();
  7.     UpdateAccessibilityUI();
  8.     UpdateAnimationUserControl(false);
  9.     window.setTimeout(‘ProcessImn()’, 10);
  10.     ProcessOnLoadFunctionNames(_spBodyOnLoadFunctionNames);     ProcessOnLoadFunctions(_spBodyOnLoadFunctions);
  11.     if (typeof _spUseDefaultFocus != “undefined”)
  12.         DefaultFocus();
  13. }

_spBodyOnLoadFunctionNames

  1. _spBodyOnLoadFunctionNames.push(‘OnPageLoad’);
  2. function OnPageLoad(){
  3.     console.log(“_spBodyOnLoadFunctionNames. Time: ” + ((Date.now()) – performance.timing.navigationStart));
  4. }

_spBodyOnLoadFunctions

  1. _spBodyOnLoadFunctions.push(raiseFunc);
  2. var raiseFunc = function(){
  3.     console.log(“_spBodyOnLoadFunction. Time: ” + ((Date.now()) – performance.timing.navigationStart));
  4. };

ExecuteOrDelayUntilScriptLoaded:sp.core.js

  1. ExecuteOrDelayUntilScriptLoaded(MyFunction, “sp.core.js”);
  2. function MyFunction(){
  3.     console.log(“ExecuteOrDelayUntilScriptLoaded:sp.core.js. Time: ” + ((Date.now()) – performance.timing.navigationStart));
  4. }

SP.SOD.executeFunc: sp.js

  1. SP.SOD.executeFunc(‘sp.js’, ‘SP.ClientContext’, sharePointReady);
  2. function sharePointReady(){
  3.     console.log(“SP.SOD.executeFunc: sp.js. Time: ” + ((Date.now()) – performance.timing.navigationStart));
  4. }

ExecuteOrDelayUntilBodyLoaded

  1. ExecuteOrDelayUntilBodyLoaded(delayBody);
  2. function delayBody(){
  3.     console.log(“ExecuteOrDelayUntilBodyLoaded. Time from NavStart: ” + ((Date.now()) – performance.timing.navigationStart));

}

Output

Chrome

Run 1

javascript load output sharepoint.png
javascript load output sharepoint.png

Run 2

javascript load output sharepoint online.png
javascript load output sharepoint online.png

Run 3

 

javascript load output sharepoint 2013.png
javascript load output sharepoint 2013.png

IE11

http://localhost:12813/pc/

javascript load output sharepoint 2013.png
javascript load output sharepoint 2013.png

Run 1

javascript load sequence output sharepoint.png
javascript load sequence output sharepoint.png

Run 2

javascript load sequence output sharepoint.png
javascript load sequence output sharepoint.png

Run 3

javascript load sequence output sharepoint online.png
javascript load sequence output sharepoint online.png

As you see the above images of the output of the code snippet run on both chrome and IE11 browsers, here we discover the sequence of execution.

We will talk about both the sequences,

Order Chrome IE11
1 ExecuteOrDelayUntilBodyLoaded document.ready Jquery
2 Sys.Application.PageLoad. ExecuteOrDelayUntilBodyLoaded
3 document.ready Jquery Sys.Application.PageLoad.
4 SP.SOD.executeFunc: sp.js. SP.SOD.executeFunc: sp.js.
5 _spBodyOnLoadFunctionNames _spBodyOnLoadFunctionNames
6 _spBodyOnLoadFunction _spBodyOnLoadFunction
7 ExecuteOrDelayUntilScriptLoaded:sp.core.js ExecuteOrDelayUntilScriptLoaded:sp.core.js
8 Sys.WebForms.PageRequestManager.PageLoaded Sys.WebForms.PageRequestManager.PageLoaded

– ExecuteOrDelayUntilBodyLoaded function is always executed first in chrome (but at this stage we cannot access  SP methods). Whereas the document.ready Jquery function is executed first in IE11.

– This could be useful to execute our custom code at a really early stage in the OnLoad process keeping in mind the order of execution.

– There are two SharePoint onLoad functions _spBodyOnLoadFunctionNames and _spBodyOnLoadFunction. Always executed in the order. SO, if we want to execute some code after all functions included by us (or other devs) in _spBodyOnLoadFunctionNames, then it is useful to use this one _spBodyOnLoadFunction, because is executed the last.

SharePoint 2013: how to create a custom access denied page

Procedure

  1. Log into one of the farm WFEs as a farm administrator.
  2. Open Windows Explorer, and then navigate to this folder:

    C:\Program Files\Common Files\microsoft shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\

     

  3. Add a subfolder to this folder, naming it CustomPages.

    Note that this is the physical path to the CustomPages folder. The relative path would be:

    [web app URL]/_layouts/15/custompages

  4. In the LAYOUTS folder copy the file AccessDenied.ASPX into the CustomPages subfolder, renaming itAccessDeniedNew.ASPX. .
  5. Modify AccessDeniedNew.ASPX as desired.  To add text or other HTML elements to this page, be sure to introduce them within <asp:Content tags. In the example below, formatted text has been added so that it will appear just below the “Sorry, this site…” message.  The intent here is to keep the message simple in order to facilitate rapid comprehension and engagement. Added text is highlighted. .
  6. After completing the modification on this WFE, copy the CustomPages subfolder into the LAYOUTS folder of each of the WFEs in your farm.

    NOTE: if you don’t do this, your users will experience inconsistent responses – some getting the default accessdenied page and some the new one, depending on which WFE the farm’s NLB service routed the user’s request to.

  7. Open a SharePoint Management Shell using a farm administrator account having the SharePoint_Shell_Accessrole for the farm configuration database.  To check for those accounts that do have this role for the farm configuration database, execute Get-SPShellAdmin.
  8. Execute Get-SPCustomLayoutsPage to view what custom pages have already been configured. If you haven’t configured any custom message pages yet, you will see something like the following: .
  9. Execute the command that will update the farm configuration database to point to the new location of the AccessDenied page:
    Set-SPCustomLayoutsPage -Identity "AccessDenied" -RelativePath "/_layouts/15/custompages/AccessDeniedNew.aspx" -WebApplication "http:/mywebapplication/"

    The AccessDenied page path is now updated:

     .

  10. Open a browser using a standard account, and then navigate to a site or page that your account does not have access to.  The new AccessDenied page is presented.  Note that an IISReset does not need to be performed.  The change takes affect immediately. .

“SharePoint 2013: how to create a custom access denied page” verder lezen