How to add JS or css file reference to all pages with custom action ?
Scenario
- Suppose you wanted to add JS file or css file reference to all the pages in your site collection via javascript but you are not allowed to edit master page.
- Suppose you wanted to do branding like displaying message or modifying css to all the site collections then it would be difficult to go and edit css of each site collection. To overcome this we can write a utility which will iterate through each target site and add js and css reference.
Solution
- Custom action functionality to add ScriptLink can be used to add JS and CSS file references to all the pages without using master page
- We can do do this JSOM or managed CSOM based on our requirement
Using JSOM – You can add below function in any JS file or content editor webpart and call GetCustomActionsOfWeb from click event of button.
If you are calling on page load or something, make sure you wait till sp.js is loaded and then call your function.
ExecuteOrDelayUntilScriptLoaded(GetCustomActionsOfWeb, 'sp.js'); function GetCustomActionsOfWeb(){ clientContext = new SP.ClientContext.get_current(); var hostWeb = clientContext.get_web(); hostWebCustomActions = hostWeb.get_userCustomActions(); clientContext.load(hostWeb); clientContext.load(hostWebCustomActions); clientContext.executeQueryAsync(AddNewCustomAction, ErrorInGettingCustomActions); } function AddNewCustomAction(){ var customAction = hostWebCustomActions.add(); customAction.set_location('ScriptLink'); customAction.set_sequence(10001); customAction.set_scriptSrc('~SiteCollection/Site Assets/jquery-1.11.1.min.js'); customAction.update(); clientContext.load(hostWebCustomActions); clientContext.executeQueryAsync(onSuccess, OnFail); } function ErrorInGettingCustomActions(){ alert('Error in getting custom actions...'); } function onSuccess(){ alert('Added Script Link Successfully.') }); }); }); }); } function OnFail(){ alert('Enable to add script link via custom action'); }
Using CSOM
private void AddCustomAction(string SCURL) { using (ClientContext context = new ClientContext(SCURL)) { // Check URL is root site or web Web oWeb = context.Web; UserCustomActionCollection collCustomActions = oWeb.UserCustomActions; //var serverURL = oWeb.; context.Load(oWeb, webSite => webSite.UserCustomActions); context.ExecuteQuery(); //******** Delete file script link reference if already exsits in page ******** int actionCount = oWeb.UserCustomActions.Count; for (int i = actionCount - 1; i >= 0; i--) { // if (oWeb.UserCustomActions[i].ScriptSrc != null && (oWeb.UserCustomActions[i].ScriptSrc.Contains(Constants.ScriptFileNames.JqueryRef) || oWeb.UserCustomActions[i].ScriptSrc.Contains(Constants.ScriptFileNames.HeaderFile) || oWeb.UserCustomActions[i].ScriptSrc.Contains(Constants.ScriptFileNames.StickyFooter))) if (oWeb.UserCustomActions[i].ScriptSrc != null && (oWeb.UserCustomActions[i].ScriptSrc.Contains(Constants.ScriptFileNames.HeaderFile) || oWeb.UserCustomActions[i].ScriptSrc.Contains(Constants.ScriptFileNames.StickyFooter))) { Console.WriteLine(oWeb.UserCustomActions[i].Title + " Found"); oWeb.UserCustomActions[i].DeleteObject(); //break; } } context.ExecuteQuery(); UserCustomAction oUserCustomAction = collCustomActions.Add() oUserCustomAction = collCustomActions.Add(); oUserCustomAction.Location = "ScriptLink"; oUserCustomAction.Sequence = Constants.sequenceCounter + 2; oUserCustomAction.Title = "Custom Branding"; oUserCustomAction.Description = "Custom branding Description."; oUserCustomAction.ScriptSrc = SCURL + "/Site Assets/" + "branding.js"; // thi sis custom js file oUserCustomAction.Update(); context.ExecuteQuery(); } }
Hope this helps…Happy coding..!!!
(Visited 258 times, 1 visits today)