The Community Components guide is an interactive development tool for the social component framework (SCF). It provides a list of available Adobe Experience Manager (AEM) Communities components or the more complex features built of multiple components.
Along with basic information for each component, the guide allows for experimentation with how the SCF components/features work and how they can be configured or customized.
For information regarding development essentials related to each component, see Feature and Component Essentials.
The guide is intended for use on development installations of author instances (localhost:4502), and publish instances (localhost:4503).
The Community Components site is accessed by browsing to
Interactions with the Communities components vary depending on:
On author, to enter edit mode, insert either
cf# as the first path segment after the server name:
On author in Edit mode, the links on a page are not active.
To navigate to a component page, first select Preview mode to activate the links.
With the component page displayed in the browser, return to Edit mode to open the component’s edit dialog.
For general authoring information, view the quick guide to authoring pages.
If not familiar with AEM, view the documentation on basic handling.
The guide provides a listing of SCF components available for preview and prototyping along the left side of the page.
Components Guide as viewed on an author instance in Edit mode:
Select a component from the list along the left side of the page.
The main body of the guide displays:
Title: The name of the component selected
Client-Side Llibraries: A list of one or more required categories
Includable: If the component may be dynamically included, then the state can be toggled in author edit mode:
Sample Component or Feature: an active instance of the component or feature. If a component, it may be altered with changes made to the templates, CSS, and data provided in the tab section.
After making a selection from the left-hand side, the component will appear below, instead of beside, the listing of components when the browser window is too narrow.
When using the guide on an author instance, it is possible to experience configuring a component by opening its dialog. Information for developers is provided in the Component and Feature Essentials section of the documentation, while the dialog settings are described in Communities Components section for authors.
For the Community Components guide, some component dialog settings are overlaid with the Includable toggle state. To toggle between using the existing resource or a dynamically included resource, in edit mode select both the component and includable text and double-click to open the edit dialog:
Under the Templates tab:
Include the child component with sling:include
If unchecked, the Component Guide uses the existing resource in the repository (a jcr node which is a child of a par node).
If checked, the Component Guide uses sling to dynamically include a component of the child node’s resourceType (non-existing resource).
Default is unchecked.
When using the guide on a publish instance, it is possible to experience the components and features as a site visitor (not signed in) and as members with various privileges when signed in.
For more information, visit Clientlibs for Communities Components.
On the author instance, where one is often signed in as an administrator or developer, to experience the component logged in as another user, use the text box to the left of the Impersonate button to either type in the username or select from the pull-down list, and then click the button. Click Revert to sign out and end the impersonation.
The publish instance does not need to impersonate. Simply use the Login/Logout link to impersonate various users, such as the demo users.
When enabled, each SCF component is available for prototyping of possible customizations by temporarily modifying the component’s template, CSS, and data.
This tool is read-only. None of the edits made to templates, CSS or data are saved to the repository.
To quickly experiment with customizations, the
scg:showIdeproperty must be added to the component page’s content JCR node and set to true.
Using the comments component as an example, on either the author or publish instance, signed in with administrator privileges:
Browse to CRXDE Lite
For example, http://localhost:4503/crx/de
Select the component’s
Add a property
Select Save All
Reload the Comments page in the guide
Notice there are now three tabs for Templates, CSS, and Data.
Select the templates tab to see the templates associated with the component.
The Template Editor allows local edits to be compiled and applied to the sample component instance at the top of the page without affecting the component in the repository.
Running compile on local edits will highlight any errors along by placing a dot in the gutter and marking the text red.
Select the CSS tab to see the CSS associated with the component.
If a component is a composite of multiple components, some CSS may be listed under one of the other components.
The CSS Editor allows the CSS to be modified and applied to the sample component instance at the top of the page.
A rule may be selected to highlight the parts of the DOM using that rule by clicking next to the rule in the gutter.
Select the Data tab to show the .social.json endpoint data. This data is editable and is applied to the sample component instance.
Syntax errors may be marked in the gutter and highlighted in the editor.