Clientlibs for Communities Components clientlibs-for-communities-components
Introduction introduction
This section of the documentation describes how to add client-side libraries (clientlibs) to a page for Communities components.
For basic information, visit:
- Using Client-Side Libraries which provides usage details as well as debugging tools
- Clientlibs for SCF which provides useful information when customizing SCF components
Why Clientlibs are Required why-clientlibs-are-required
Clientlibs are required for the proper functioning (JavaScript) and styling (CSS) of a component.
When there exists a community function for a feature, all necessary components and configurations, including the required clientlibs, will be present in the community site. Only if additional components are to be available to authors would additonal clientlibs need to be added.
When the required clientlibs are missing, adding a Communities component to a page could result in javascript errors as well as an unexpected appearance.
Example: Placed Reviews without Clientlibs example-placed-reviews-without-clientlibs
Example: Placed Reviews with Clientlibs example-placed-reviews-with-clientlibs
Identifying Required Clientlibs identifying-required-clientlibs
The essential feature information for developers identifies the required clientlibs.
In addition, from an AEM instance, browsing to the Community Components Guide provides access to a listing of clientlib categories required for a component.
For example, at the very top of the Reviews page the required clientlibs listed are
- cq.ckeditor
- cq.social.hbs.reviews
Adding Required Clientlibs adding-required-clientlibs
When it is desired to add a Communities component to a page, it will be necessary to add the required clientlibs for the component if not already present.
Use CRXDE|Lite to modify an existing clientlibslist for a community site page.
To add a clientlib for a community site using CRXDE Lite:
-
Browse to https://<server>:<port>/crx/de
-
Locate the
clientlibslist
node for the page on which you wish to add the component/content/sites/sample/en/page/jcr:content/clientlibslist
-
With
clientlibslist
node selected-
Locate the String[] property
scg:requiredClientLibs
-
Select its
Value
to access the String array dialog-
Scroll down if necessary
-
Select
+
to enter a new client library- Repeat to add more client libraries
-
Select OK
-
-
Select Save All
-
Using the Getting Started with AEM Communities example, where site-name
is engage, this is how the clientliblist would appear if adding the reviews component: