Create the Components create-the-components
The example of extending components uses the comment system, which is 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 must be put in place, especially if customizing the appearance of a posted comment.
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 is 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 that was created:
/apps/custom/components/comments
-
Select Save All
-
Right-click
comments.jsp
-
Select Delete
-
Select Save All
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 is 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 that was created:
/apps/custom/components/comments/comment
-
Select Save All
-
Right-click
comment.jsp
-
Select Delete
-
Select Save All
Copy and Modify the Default HBS Scripts copy-and-modify-the-default-hbs-scripts
Using CRXDE Lite:
-
Copy
comments.hbs
-
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
- From
-
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'}}
- Replace
-
-
Copy
comment.hbs
-
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
- From
-
-
Select
/apps/custom
node -
Select Save All
Create a Client Library Folder create-a-client-library-folder
To avoid having to include this client library, the categories value for the default comment system’s clientlib can be used ( cq.social.author.hbs.comments
). However, this clientlib would then have to be included for all instances of the default component, too.
Using CRXDE Lite:
-
Select
/apps/custom/components/comments
node -
Select Create Node
-
Name:
clientlibs
-
Type:
cq:ClientLibraryFolder
-
Add to Properties tab:
- Name
categories
TypeString
Valuecq.social.author.hbs.comments
Multi
- Name
dependencies
TypeString
Valuecq.social.scf
Multi
- Name
-
-
Select Save All
-
With
/apps/custom/components/comments/clientlib
s node selected, create three files:- Name:
css.txt
- Name:
js.txt
- Name: customcommentsystem.js
- Name:
-
Enter ‘customcommentsystem.js’ as the content of
js.txt
-
Select Save All
Register the SCF Model & View register-the-scf-model-view
When extending (overriding) an SCF component, the resourceType is different (overlaying uses 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
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 Activate button