SPFx on Communication Site On-Prem

%3CLINGO-SUB%20id%3D%22lingo-sub-698254%22%20slang%3D%22en-US%22%3ESPFx%20on%20Communication%20Site%20On-Prem%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-698254%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20there%20a%20way%20to%20add%20a%20SPFx%20app%20customizer%20to%20a%20communication%20site%20template%20in%202019%20on-prem%3F%26nbsp%3B%20Essentially%20we%20have%20custom%20actions%20in%202016%20that%20we%20converted%20to%20an%20app%20customizer%20for%202019%20to%20load%20a%20JS%20file.%26nbsp%3B%20The%20solution%20works%20fine%20on%20all%20other%202019%20templates%20except%20the%20communication%20site%20template%20ignores%20it.%26nbsp%3B%20Is%20there%20another%20method%20we%20should%20be%20using%3F%26nbsp%3B%20Thanks!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-698254%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ESharePoint%202019%20On-Prem%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Framework%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-698434%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20on%20Communication%20Site%20On-Prem%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-698434%22%20slang%3D%22en-US%22%3EYes%2C%20I%20believe%20Extensions%20are%20supported%20in%20SP%202019%20but%20you%20need%20the%20right%20version%20of%20SPFx%20in%20place%3A%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-699672%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20on%20Communication%20Site%20On-Prem%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-699672%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F60%22%20target%3D%22_blank%22%3E%40Juan%20Carlos%20Gonz%C3%A1lez%20Mart%C3%ADn%3C%2FA%3E%26nbsp%3BThank%20you%20sir!%26nbsp%3B%26nbsp%3BSorry%2C%20I%20need%20to%20clarify.%20The%20SPFx%20package%20works%20well%20on%20a%20Communication%20site%2C%20what%20we're%20trying%20to%20do%20is%20have%20the%20same%20JS%20load%20on%20the%20back-end%20legacy%20pages%20like%20%2F_layouts%2Fsettings.aspx%20for%20example.%20One%20of%20my%20devs%20is%20using%20Add-PnPJavaScriptLink%20to%20add%20the%20JS%20to%20the%20page%20on%20the%20other%20site%20templates%20with%20success.%20This%20way%20the%20end%20user%20experience%20is%20the%20same%2C%20since%20the%20modern%20site%20templates%20ignore%20any%20attempt%20to%20inject%20ScriptLink%20or%20ScriptBlock%20code%20by%20design%2C%20so%20the%20SPFx%20app%20customizer%20kicks%20in.%20A%20page%20like%20%2F_layouts%2Fsettings.aspx%20is%20the%20same%20legacy%20page%20that%20has%20existed%20since%20SP2013%2C%20so%20the%20SPFx%20is%20ignored%20but%20the%20actions%20added%20by%20Add-PnPJavaScriptLink%20kick%20in%20and%20load%20the%20JS%20file%20as%20if%20nothing%20changed.%20The%20only%20exception%20is%20on%20the%20Commmunication%20site%20template.%20We're%20getting%20%22access%20denied%22%20when%20trying%20to%20use%20the%20Add-PnPJavaScriptLink%2C%20I%20assume%20because%20MSFT%20doesn't%20want%20ScriptBlock%20or%20ScriptLink%20in%20modern%20sites.%20However%2C%20we're%20able%20to%20add%20the%20file%20this%20way%20to%20the%20other%20modern%20site%20template%20(STS%233).%20I'm%20wondering%20if%20there's%20something%20else%20we%20can%20do%20to%20the%20SPFx%20solution%20so%20it%20runs%20on%20pages%20such%20as%20settings.aspx%20on%20the%20communication%20site%20template%20sites%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-702114%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20on%20Communication%20Site%20On-Prem%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-702114%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F361772%22%20target%3D%22_blank%22%3E%40eoszak%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EFor%20all%20system%20pages%20like%20%2F_layouts%2Fsettings.aspx%20etc%2C%20to%20display%20any%20custom%20component%20or%20run%20some%20JavaScript%2C%20you%20still%20need%20to%20use%20CustomAction%20with%20Location%3D%20ScriptLink.%20I%20haven't%20basically%20tried%20to%20use%26nbsp%3B%3CSTRONG%3EAdd-PnPJavaScriptLink%26nbsp%3B%3C%2FSTRONG%3Ecmdlet%20on%20Communication%20site%20on%20SharePoint%20Server%202019%20but%20that%20certainly%20works%20on%20SharePoint%20Online.%20If%20PnP%20PowerShell%20cmdlet%20doesn't%20work%2C%20you%20can%20write%20CSOM%20which%20can%20similar%20action.%20Let%20me%20know%20if%20you%20need%20CSOM%20code%20snippet.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-743522%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20on%20Communication%20Site%20On-Prem%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-743522%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F18230%22%20target%3D%22_blank%22%3E%40Rahul%20Suryawanshi%3C%2FA%3E%2C%20most%20of%20what%20we%20do%20uses%20CSOM%2C%20so%20we're%20good%20there.%26nbsp%3B%20It%20looks%20like%20it%20was%20possibly%20a%20permissions%20setting%20I%20failed%20to%20set%20when%20I%20stood%20up%20the%20web%20app.%26nbsp%3B%20Even%20though%20the%20web%20app%20policy%20was%20set%20properly%2C%20Communication%20Sites%20still%20misbehaved.%26nbsp%3B%20I%20ran%20something%20similar%20to%20this%20in%20PowerShell%20to%20allow%20us%20to%20be%20able%20to%20add%20Custom%20Actions%20to%20Communication%20Sites%3A%3C%2FP%3E%3CP%3E%3CBR%20%2F%3E(Get-SPSite%20-Identity%20%22%7Bcommunication%20site%20url%7D%22).DenyPermissionsMask%20%3D%20%5BMicrosoft.SharePoint.SPBasePermissions%5D%3A%3AEmptyMask%20%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
New Contributor

Is there a way to add a SPFx app customizer to a communication site template in 2019 on-prem?  Essentially we have custom actions in 2016 that we converted to an app customizer for 2019 to load a JS file.  The solution works fine on all other 2019 templates except the communication site template ignores it.  Is there another method we should be using?  Thanks!

4 Replies
Highlighted
Yes, I believe Extensions are supported in SP 2019 but you need the right version of SPFx in place:
Highlighted

@Juan Carlos González Martín Thank you sir!  Sorry, I need to clarify. The SPFx package works well on a Communication site, what we're trying to do is have the same JS load on the back-end legacy pages like /_layouts/settings.aspx for example. One of my devs is using Add-PnPJavaScriptLink to add the JS to the page on the other site templates with success. This way the end user experience is the same, since the modern site templates ignore any attempt to inject ScriptLink or ScriptBlock code by design, so the SPFx app customizer kicks in. A page like /_layouts/settings.aspx is the same legacy page that has existed since SP2013, so the SPFx is ignored but the actions added by Add-PnPJavaScriptLink kick in and load the JS file as if nothing changed. The only exception is on the Commmunication site template. We're getting "access denied" when trying to use the Add-PnPJavaScriptLink, I assume because MSFT doesn't want ScriptBlock or ScriptLink in modern sites. However, we're able to add the file this way to the other modern site template (STS#3). I'm wondering if there's something else we can do to the SPFx solution so it runs on pages such as settings.aspx on the communication site template sites?

Highlighted

@eoszak 

For all system pages like /_layouts/settings.aspx etc, to display any custom component or run some JavaScript, you still need to use CustomAction with Location= ScriptLink. I haven't basically tried to use Add-PnPJavaScriptLink cmdlet on Communication site on SharePoint Server 2019 but that certainly works on SharePoint Online. If PnP PowerShell cmdlet doesn't work, you can write CSOM which can similar action. Let me know if you need CSOM code snippet.

Highlighted

Thank you@Rahul Suryawanshi, most of what we do uses CSOM, so we're good there.  It looks like it was possibly a permissions setting I failed to set when I stood up the web app.  Even though the web app policy was set properly, Communication Sites still misbehaved.  I ran something similar to this in PowerShell to allow us to be able to add Custom Actions to Communication Sites:


(Get-SPSite -Identity "{communication site url}").DenyPermissionsMask = [Microsoft.SharePoint.SPBasePermissions]::EmptyMask