Within the Communities Builder it is possible to specify a generic <head>-markup (enrichment) which is applied to each page (Settings > Advanced > Edit Head Markup). Think of the possibility to a stylesheet or script from a Static Resource or external URL and apply it to the full community.
This short article tackles some known challenges on how to load content from a static resource within the Community Builder Head Markup.
Setup
- Create the static resource and make sure
Cache Controlis set toPublic; - In the Head Markup, reference the static resource:
- Community specific:
<script src="/{communityName}/resource/{RESOURCE_NAME}"></script> - Community independent:
<script src="/sfsites/c/resource/{RESOURCE_NAME}"></script> - Forced static resource version caching logic:
<script src="/sfsites/c/resource/123456789/{RESOURCE_NAME}"></script>
- Community specific:
Considerations
Caching time/version-reference
The number (123456789) specified in the static resource-reference indicates the number of milliseconds elapsed since 1970-01-01 and can be used to let Salesforce determine whether a newer version should be retrieved. In case you experience difficulties in your DEV environment, you could change this to force Salesforce to fetch the latest Static Resource version.
When you want this to be dynamic, you could use some Javascript to always set the current timestamp, which could be tricky, as it will cause every Community page load to retrieve the referenced static resource (no caching).
<script>
(function() {
var script = document.createElement('script');
script.src = '/sfsites/c/resource/'
+ Date.now()
+ '/MyStaticResource/js/some-code.js';
document.head.appendChild(script);
})();
</script>Luckily, Salesforce also allows to leave the version number out, but there is no clear documentation on how Salesforce is then retrieving and caching the static resource.
Script-tag closing
HTML5 started to apply a bit more strict policy on self-closing tags (<script />, <hr /> and <img />), they are simply ignored. However, many developers still apply them to make the code more dense/readable (vs. <script></script>) and as they still ‘do the trick’.
Unfortunately, I found out the hard way the Community Head Markup is less lenient. When specifying the script with a self-closing-trailing-slash, the following error is thrown: Uncaught TypeError: Cannot set property 'innerHTML' of null.
Do you run into this issue? Simply replace /> with ></script> and your issue will be resolved…
Use-cases
In doubt when you might want to reference a static resource in the Community Head Markup? I’ve documented some below which might help you out when setting up your next community:
- Load a variable-css-file to define (global) CSS variables for all components added to that page (see article on CSS Variables and how to apply them)
- Load some analytics scripts to track customer interaction;
- Setup the favicon;
<link rel="icon" href="{SR_REF}"></link>
