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

  1. Create the static resource and make sure Cache Control is set to Public;
  2. In the Head Markup, reference the static resource:
    1. Community specific:
      <script src="/{communityName}/resource/{RESOURCE_NAME}"></script>
    2. Community independent:
      <script src="/sfsites/c/resource/{RESOURCE_NAME}"></script>
    3. Forced static resource version caching logic:
      <script src="/sfsites/c/resource/123456789/{RESOURCE_NAME}"></script>

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>

How useful was this post?

Average rating 5 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Leave a comment

Your email address will not be published.