Create the Components create-the-components

Last update: Wed May 03 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Topics:
Communities

CREATED FOR:

User

CAUTION

AEM 6.4 has reached the end of extended support and this documentation is no longer updated. For further details, see our technical support periods. Find the supported versions here.

The example of extending components uses the comment system, which is actually composed of two components

Comments - The encompassing comment system which is the component placed on a page
Comment - The component which captures an instance of a posted comment

Both components needs to be put in place, especially if customizing the appearance of a posted comment.

NOTE

Only one comment system per site page is allowed.

Many Communities features already include a comment system whose resourceType can be modified to reference the extended comment system.

Create the Comments Component create-the-comments-component

These directions specify a Group value other than .hidden so the component may be made available from the component browser (sidekick).

The deletion of the auto-created JSP file is because the default HBS file will be used instead.

Browse to CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
Create a location for custom applications:
- Select the /apps node
  - Create Folder named custom
- Select the /apps/custom node
  - Create Folder named components
Select the /apps/custom/components node
- Create > Component…
  - Label: comments
  - Title: Alt Comments
  - Description: Alternative comments style
  - Super Type: social/commons/components/hbs/comments
  - Group: Custom
- Select Next
- Select Next
- Select Next
- Select OK
Expand the node just created: /apps/custom/components/comments
Select Save All
Right-click comments.jsp
Select Delete
Select Save All

chlimage_1-70

Create the Child Comment Component create-the-child-comment-component

These directions set Group to .hidden as only the parent component should be included within a page.

The deletion of the auto-created JSP file is because the default HBS file will be used instead.

Navigate to the /apps/custom/components/comments node
Right-click the node
- Select Create > Component…
  - Label: comment
  - Title: Alt Comment
  - Description: Alternative comment style
  - Super Type: social/commons/components/hbs/comments/comment
  - Group: *.hidden*
- Select Next
- Select Next
- Select Next
- Select OK
Expand the node just created: /apps/custom/components/comments/comment
Select Save All
Right-click comment.jsp
Select Delete
Select Save All

chlimage_1-71 chlimage_1-72

Copy and Modify the Default HBS Scripts copy-and-modify-the-default-hbs-scripts

Using CRXDE Lite:

Copy comments.hbs
- From /libs/social/commons/components/hbs/comments
- To /apps/custom/components/comments
Edit comments.hbs to:
- Change the value of the data-scf-component attribute (~line 20):
  - From social/commons/components/hbs/comments
  - To /apps/custom/components/comments
- Modify to include the custom comment component (~line 75):
  - Replace {{include this resourceType='social/commons/components/hbs/comments/comment'}}
  - With {{include this resourceType='/apps/custom/components/comments/comment'}}
Copy comment.hbs
- From /libs/social/commons/components/hbs/comments/comment
- To /apps/custom/components/comments/comment
Edit comment.hbs to:
- Change the value of the data-scf-component attribute (~ line 19)
  - From social/commons/components/hbs/comments/comment
  - To /apps/custom/components/comments/comment
Select /apps/custom node
Select Save All

Create a Client Library Folder create-a-client-library-folder

To avoid having to explicitly include this client library, the categories value for the default comment system’s clientlib could be used ( cq.social.author.hbs.comments), but then this clientlib would be included for all instances of the default component as well.

Using CRXDE Lite:

Select /apps/custom/components/comments node
Select Create Node
- Name: clientlibs
- Type: cq:ClientLibraryFolder
- Add to Properties tab:
  - Name categories Type String Value cq.social.author.hbs.comments Multi
  - Name dependencies Type String Value cq.social.scf Multi
Select Save All
With /apps/custom/components/comments/clientlibs node selected, create 3 files:
- Name: css.txt
- Name: js.txt
- Name: customcommentsystem.js
Enter ‘customcommentsystem.js’ as the content of js.txt
Select Save All

chlimage_1-73

Register the SCF Model & View register-the-scf-model-view

When extending (overriding) an SCF component, the resourceType is different (overlaying makes use of the relative search mechanism that searches through /apps before /libs so that the resourceType remains the same). This is why it is necessary to write JavaScript (in the client library) to register the SCF JS model and view for the custom resourceType.

Enter the following text as the content of customcommentsystem.js:

customcommentsystem.js customcommentsystem-js

(function($CQ, _, Backbone, SCF) {
    "use strict";

    var CustomComment = SCF.Components["social/commons/components/hbs/comments/comment"].Model;
    var CustomCommentView = SCF.Components["social/commons/components/hbs/comments/comment"].View;

    var CustomCommentSystem = SCF.Components["social/commons/components/hbs/comments"].Model;
    var CustomCommentSystemView = SCF.Components["social/commons/components/hbs/comments"].View;

    SCF.registerComponent('/apps/custom/components/comments/comment', CustomComment, CustomCommentView);
    SCF.registerComponent('/apps/custom/components/comments', CustomCommentSystem, CustomCommentSystemView);

})($CQ, _, Backbone, SCF);

Select Save All

Publish the App publish-the-app

In order to experience the extended component in the publish environment, it is necessary to replicate the custom component.

One way to do so is

From global navigation
- Select Tools > Deployment > Replication
- Select Activate Tree
- Set Start Path: to /apps/custom
- Uncheck Only Modified
- Select Activatebutton

recommendation-more-help

5d37d7b0-a330-461b-814d-068612705ff6