Create the Components

Last update: April 24, 2024

CREATED FOR:

  • Developer

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.

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

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.

  1. Browse to CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

  2. Create a location for custom applications:

    • Select the /apps node

      • Create Folder named custom

    • Select the /apps/custom node

      • Create Folder named components

  3. 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

  4. Expand the node that was created: /apps/custom/components/comments

  5. Select Save All

  6. Right-click comments.jsp

  7. Select Delete

  8. Select Save All

create-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.

  1. Navigate to the /apps/custom/components/comments node

  2. 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

  3. Expand the node that was created: /apps/custom/components/comments/comment

  4. Select Save All

  5. Right-click comment.jsp

  6. Select Delete

  7. Select Save All

create-child-component

create-component-crxde

Copy and Modify the Default HBS Scripts

Using CRXDE Lite:

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 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 three files:

    • Name: css.txt
    • Name: js.txt
    • Name: customcommentsystem.js

  • Enter ‘customcommentsystem.js’ as the content of js.txt

  • Select Save All

comments-clientlibs

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: