What is the best practice to inject js or css files in PnP Template Provisioning

%3CLINGO-SUB%20id%3D%22lingo-sub-225742%22%20slang%3D%22en-US%22%3EWhat%20is%20the%20best%20practice%20to%20inject%20js%20or%20css%20files%20in%20PnP%20Template%20Provisioning%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-225742%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20using%20PnP%20template%20provisioning%20xml%20templates.%20I%20would%20like%20to%20inject%20some%20js%20and%20css%20files%20like%20for%20example%20jquery.%20I%20try%20to%20do%20this%20with%20the%20custom%20action%20but%20I%20don't%20like%20this%20solution.%20I%20do%20it%20now%20like%20this%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%3CSPAN%3E%3C!--%C2%A0css%20--%3E%3C%2FSPAN%3E%3CBR%20%2F%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Epnp%3ACustomAction%3C%2FSPAN%3E%20%3CSPAN%3EName%3C%2FSPAN%3E%3CSPAN%3E%20%3D%20%3C%2FSPAN%3E%3CSPAN%3E%22CustomCss%22%3C%2FSPAN%3E%20%3CSPAN%3ELocation%3C%2FSPAN%3E%3CSPAN%3E%20%3D%20%3C%2FSPAN%3E%3CSPAN%3E%22ScriptLink%22%3C%2FSPAN%3E%20%3CSPAN%3ESequence%3C%2FSPAN%3E%3CSPAN%3E%20%3D%20%3C%2FSPAN%3E%3CSPAN%3E%221003%22%3C%2FSPAN%3E%20%3CSPAN%3EScriptBlock%3C%2FSPAN%3E%3CSPAN%3E%3D%3C%2FSPAN%3E%3CSPAN%3E%22document.write('%3C%2FSPAN%3E%3CSPAN%3E%26amp%3Blt%3B%3C%2FSPAN%3E%3CSPAN%3Elink%20rel%3D%3C%2FSPAN%3E%3CSPAN%3E%26amp%3Bquot%3B%3C%2FSPAN%3E%3CSPAN%3Estylesheet%3C%2FSPAN%3E%3CSPAN%3E%26amp%3Bquot%3B%3C%2FSPAN%3E%3CSPAN%3E%20type%3D%3C%2FSPAN%3E%3CSPAN%3E%26amp%3Bquot%3B%3C%2FSPAN%3E%3CSPAN%3Etext%2Fcss%3C%2FSPAN%3E%3CSPAN%3E%26amp%3Bquot%3B%3C%2FSPAN%3E%3CSPAN%3E%20href%3D%3C%2FSPAN%3E%3CSPAN%3E%26amp%3Bquot%3B%3C%2FSPAN%3E%3CSPAN%3E%7Bsitecollection%7D%2FStyle%2520Library%2FCustom%2Fcustom.css%3Fv%3D1.0%3C%2FSPAN%3E%3CSPAN%3E%26amp%3Bquot%3B%26amp%3Bgt%3B%26amp%3Blt%3B%3C%2FSPAN%3E%3CSPAN%3E%2Flink%3C%2FSPAN%3E%3CSPAN%3E%26amp%3Bgt%3B%3C%2FSPAN%3E%3CSPAN%3E')%3B%22%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3E%2F%26gt%3B%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CBR%20%2F%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%3C!--%20js%20--%3E%3C%2FSPAN%3E%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CFONT%20face%3D%22Consolas%22%3E%3CSPAN%3E%26nbsp%3B%3C%2FSPAN%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3Epnp%3ACustomAction%3C%2FSPAN%3E%20%3CSPAN%3EName%3C%2FSPAN%3E%3CSPAN%3E%20%3D%20%3C%2FSPAN%3E%3CSPAN%3E%22jquery%22%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%26nbsp%3B%20%3C%2FSPAN%3E%3CSPAN%3ELocation%3C%2FSPAN%3E%3CSPAN%3E%20%3D%20%3C%2FSPAN%3E%3CSPAN%3E%22ScriptLink%22%3C%2FSPAN%3E%20%3CSPAN%3ESequence%3C%2FSPAN%3E%3CSPAN%3E%20%3D%20%3C%2FSPAN%3E%3CSPAN%3E%220%22%3C%2FSPAN%3E%20%3CSPAN%3EScriptBlock%3C%2FSPAN%3E%3CSPAN%3E%20%3D%20%3C%2FSPAN%3E%3CSPAN%3E%22%3C%2FSPAN%3E%3CSPAN%3E%26amp%3B%23xD%3B%26amp%3B%23xA%3B%3C%2FSPAN%3E%3CSPAN%3E%20var%20headID%20%3D%20document.getElementsByTagName('head')%5B0%5D%3B%20%3C%2FSPAN%3E%3CSPAN%3E%26amp%3B%23xD%3B%26amp%3B%23xA%3B%3C%2FSPAN%3E%3CSPAN%3E%20var%20newScript%20%3D%20document.createElement('script')%3B%3C%2FSPAN%3E%3CSPAN%3E%26amp%3B%23xD%3B%26amp%3B%23xA%3B%3C%2FSPAN%3E%3CSPAN%3E%20newScript.type%20%3D%20'text%2Fjavascript'%3B%3C%2FSPAN%3E%3CSPAN%3E%26amp%3B%23xD%3B%26amp%3B%23xA%3B%3C%2FSPAN%3E%3CSPAN%3E%20newScript.src%3D'%7Bsitecollection%7D%2FStyle%2520Library%2Fcustom%2Fjquery.js%3Fv%3D1.15'%3B%3C%2FSPAN%3E%3CSPAN%3E%26amp%3B%23xD%3B%26amp%3B%23xA%3B%3C%2FSPAN%3E%3CSPAN%3E%20newScript.id%20%3D%20'jquery'%3B%3C%2FSPAN%3E%3CSPAN%3E%26amp%3B%23xD%3B%26amp%3B%23xA%3B%3C%2FSPAN%3E%3CSPAN%3E%20headID.appendChild(newScript)%3B%22%3C%2FSPAN%3E%20%3CSPAN%3E%2F%26gt%3B%3C%2FSPAN%3E%20%3C%2FFONT%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3E%3CFONT%20face%3D%22Consolas%22%3E%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%20%3C%2FFONT%3E%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-225742%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ECSS%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Einject%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Ejs%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3Eprovisining%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ETemplate%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-225802%22%20slang%3D%22en-US%22%3ERe%3A%20What%20is%20the%20best%20practice%20to%20inject%20js%20or%20css%20files%20in%20PnP%20Template%20Provisioning%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-225802%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F46174%22%20target%3D%22_blank%22%3E%40Khalid%20Hajjouji%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20css%20you%20can%20use%20the%20Alternate%20CSS%20option%20under%20master%20page%20setting%20if%20that%20is%20available%20to%20you.%3C%2FP%3E%3CP%3EFor%20JavaScript%2C%20I%20would%20use%20a%20custom%20action%20that%20points%20to%20a%20single%20JavaScript%20file%20that%20is%20then%20responsible%20for%20loading%20all%20the%20required%20scripts%20in%20the%20correct%20order%20of%20dependencies.%3C%2FP%3E%3CP%3EThere%20is%20a%20really%20nice%20extension%20for%20Google%20Chrome%20(%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2Ftavikukko%2FChrome-SP-Editor%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3ESP%20Editor%3C%2FA%3E)%20that%20lets%20you%20add%20a%20script%20action%20without%20having%20to%20execute%26nbsp%3Bany%20code!%20(another%20easy%20option%20is%20to%20use%20PnP%20PowerShell)%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

I am using PnP template provisioning xml templates. I would like to inject some js and css files like for example jquery. I try to do this with the custom action but I don't like this solution. I do it now like this:

 

<!-- css -->
<
pnp:CustomAction Name = "CustomCss" Location = "ScriptLink" Sequence = "1003" ScriptBlock="document.write('&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;{sitecollection}/Style%20Library/Custom/custom.css?v=1.0&quot;&gt;&lt;/link&gt;');"  />

 <!-- js -->
 <pnp:CustomAction Name = "jquery"   Location = "ScriptLink" Sequence = "0" ScriptBlock = "&#xD;&#xA; var headID = document.getElementsByTagName('head')[0]; &#xD;&#xA; var newScript = document.createElement('script');&#xD;&#xA; newScript.type = 'text/javascript';&#xD;&#xA; newScript.src='{sitecollection}/Style%20Library/custom/jquery.js?v=1.15';&#xD;&#xA; newScript.id = 'jquery';&#xD;&#xA; headID.appendChild(newScript);" />
             
1 Reply
Highlighted

Hi @Khalid Hajjouji

 

For css you can use the Alternate CSS option under master page setting if that is available to you.

For JavaScript, I would use a custom action that points to a single JavaScript file that is then responsible for loading all the required scripts in the correct order of dependencies.

There is a really nice extension for Google Chrome (SP Editor) that lets you add a script action without having to execute any code! (another easy option is to use PnP PowerShell)