Community Components Guide
The Community Components guide is an interactive development tool for the social component framework (SCF) . It provides a list of available 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 (localhost:4502) and publish (localhost:4503) instances.
The Community Components site is accessed by browsing to
Interactions with the Communities components will vary depending on:
- The server (author or publish)
- Whether or not the site visitor is signed in
- If signed in, the privileges assigned to the member
- Whether or not the default SRP, JSRP , is in use
On author, to enter edit mode, insert either editor.html or cf# as the first path segment after the server name:
- Standard UI:
- Classic UI:
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 in order 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:
- If added, text displayed is: "This component is included via its par node."
- If included, text displayed is: "This component is included dynamically."
- If not includable, then no text is displayed
- 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 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, in order 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 signout 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:showIde property 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 LiteFor example, http://localhost:4503/crx/de
- Select the component's jcr:content nodeFor example, /content/community-components/en/comments/jcr:content
- Add a property
- Name scg:showIde
- Type String
- Value true
- Select Save All
- Reload the Comments page in the guide
- Notice there are now 3 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 as well as highlighted in the editor.