Communities component sideloading is useful when a web page is designed as a simple, single page app that dynamically alters what is displayed depending on what is selected by the site visitor.
This is accomplished when Communities components do not exist in the page template, but instead are dynamically added following a site visitor's selection.
Since the social component framework (SCF) has a lightweight presence, only SCF components that exist at the time of initial page load are registered. For a dynamically added SCF component to be registered after page load, SCF must be invoked to "sideload" the component.
When a page is designed to sideload Communities components, it is possible to cache the entire page.
The steps to dynamically add SCF components are:
- Sideload the component using one of two methods:
- Boostrap all dynamically added components
- Add one specific component on-demand
Sideloading of non-existing resources is not supported.
Dynamically Add Component to DOM
Whether the component is dynamically included or dynamically loaded, it must first be added to the DOM.
When adding the SCF component, the most common tag to use is the DIV tag, but other tags may be used as well. Because SCF only examines the DOM when the page initially loads, this addition to the DOM will go unnoticed until SCF is explicitly invoked.
Whatever tag is used, at a minimum, the element must conform to the normal SCF root element pattern by containing these two attributes:
- data-component-id The effective path to the added component
- data-scf-component The resourceType of the component
Following is one example of an added comments component:
<div class="scf-commentsystem scf translation-commentsystem" data-component-id="<%= currentPage.getPath()%>/jcr:content/content-left/comments" data-scf-component="social/commons/components/hbs/comments" > </div>
Sideload by Invoking SCF
Dynamic inclusion uses a boostrap request that results in SCF examining the DOM and bootsrapping all SCF components found on the page.
To initialize SCF components anytime after page load, simply fire a JQuery event like this:
Dynamic loading provides control over loading SCF components.
SCF.addComponent(document.getElementById( someId ));
Where someId is the value of the data-component-id attribute.