3

I am fairly new to SharePoint so please excuse my limited knowledge.

I would like to inject JS on all pages in the site but do not want to touch the master page. The script needs to be loaded on pageLoad.

I have been searching on the internet for the solution, from what I've found so far I think Ribbon customisation is what I need in order to achieve what I am after.

But here is the issue:

1) I don't want a custom button/tab.

2) I want the script to load on pageLoad, custom action script can be loaded on click.

3) I don't want the script to be hooked with a list or content type, it should be on site level/for all pages.

Does anyone know how to achieve this? Please bear in mind I am fairly new to SharePoint so an example code will be highly appreciated.

Thanks

3

If you want your custom js to be executed on all the pages for a site collection you could opt for JS injection through User custom action.

To achieve this you must complete the following 4 steps

  1. Place your logic in a seperate js file and upload this in the same site collection(*source from other site collections or CDN or layouts will not work). This script(MyScript.js) will be included on all pages on the SharePoint site.
  2. Use UserCustomActions to get all user custom actions defined on the SharePoint site.
  3. Creates a new custom action, and reference your script file created in step 1 in the scriptsrc attribute to the new custom action.

  4. Adds the new custom action to the website.

I injected my user custom action through a SP Hosted app using the following code.

    AddUserActions = function () {
                var userActionsDeferred = $.Deferred();
                var customActions = hostWeb.get_userCustomActions();
                hostContext.load(customActions);
                    var siteAction = customActions.add();
                    siteAction.set_title("My status bar");
                    siteAction.set_description("custom description");
                    siteAction.set_location("ScriptLink");
   siteAction.set_scriptSrc("~siteCollection/MyLibrary/Scripts/MyScript.js");
                    siteAction.update();

                hostContext.executeQueryAsync(function () {
                    $('#txtStatus').text('Success');
                    userActionsDeferred.resolve();
                }, function (message) {
                    userActionsDeferred.reject(message);
                });
                return userActionsDeferred.promise();
            }

The following sample code demonstrates how to display a status UI on top of a particular page
. You could remove the if condition for executing in all the pages.

 if ("undefined" != typeof g_MinimalDownload && g_MinimalDownload && (window.location.pathname.toLowerCase()).endsWith("/_layouts/15/start.aspx") && "undefined" != typeof asyncDeltaManager) {
    // Register script for MDS if possible
    RegisterModuleInit("MyScript.js", RemoteManager_Inject); //MDS registration
    RemoteManager_Inject(); //non MDS run
} else {
    RemoteManager_Inject();
}
function RemoteManager_Inject() {


        $(document).ready(function () {
            var message = "<img src='/_Layouts/Images/STS_ListItem_43216.gif' align='absmiddle'> <font color='#AA0000'>JavaScript customization is <i>fun</i>!</font>"

            // Execute status setter only after SP.JS has been loaded
            SP.SOD.executeOrDelayUntilScriptLoaded(function () { if (IsOnPage("xyz")) { SetStatusBar(message); } }, 'sp.js');
        });

}

function SetStatusBar(message) {
    var strStatusID = SP.UI.Status.addStatus("Information : ", message, true);
    SP.UI.Status.setStatusPriColor(strStatusID, "yellow");
}

function IsOnPage(pageName) {
    if (window.location.href.toLowerCase().indexOf(pageName.toLowerCase()) > -1) {
        return true;
    } else {
        return false;
    }
}

P.S: Sometimes the code can execute before jquery is loaded. So ensure all your dependant js files are loaded.

Reference link: Customize SharePoint site using Javascript

0

Create delegate control with user control(.ascx).

Use Control ID "AdditionalPageHead".Because this delegate control already available in Sharepoint default master Page.So No need to edit master page.

<SharePoint:DelegateControl runat="server" ControlId="AdditionalPageHead" AllowMultipleControls="true"/>

following is the element manifest file content for delegate control.

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">  
   <Control Id="AdditionalPageHead" Sequence="90" ControlSrc="~/_CONTROLTEMPLATES/Microsoft.PFE.DSE.Samples/jQueryControl.ascx" />
</Elements>  

Please refer following link for step by step guide: https://blogs.msdn.microsoft.com/kaevans/2011/04/06/adding-jquery-to-every-page-in-sharepoint-with-delegate-controls/

  • 1
    Thanks for your prompt reply Akshay. I have heard that delegate control are not permitted in Sharepoint Online/O365 if you will. Can you please confirm? If I can't use Delegate Control then what is the alternative? – user59866 Sep 8 '16 at 12:47
  • Yes,It is right – Akshay Belure Sep 8 '16 at 13:00
0

I think what you are looking for is the Core.EmbedJavaScript app. I haven't used it yet, but here is the walkthrough:

https://msdn.microsoft.com/en-us/pnp_articles/customize-your-sharepoint-site-ui-by-using-javascript

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.