Expand my Community achievements bar.

SOLVED

Social Component Framework: adding required field, e.g. "name" to a comment form?

Avatar

Level 1
Level 1

Hi,

We are using AEM 5.6.1 with cq-socialcommunities-pkg-1.4.186 installed for introducing comments on our website. The basic setup works fine and we want to customize the comment form now.

Which is the best method to add required fields like "name" and "email" for a comment post, including error handling [1]. Is this functionality already integrated?

For testing purpose we have also installed community-components-guide-pkg-1.0.33.zip [2].

Thanks for any hint.

Regards,

Roland

[1] http://docs.adobe.com/docs/en/aem/6-0/develop/social-communities/scf.html
[2] http://localhost:4503/content/community-components/en/comments.html

1 Accepted Solution

Avatar

Correct answer by
Level 2

Hi Roland,

The comments component does have fields for name and email for anonymous users, are you looking to use those but make them required fields?

In general, you would add fields by extending the component and adding the new fields in the .hbs templates.

To submit the data for custom fields you can create a clientlib and in it extend the CommentSystemView JS object and overwrite the getCustomProperties() function and have it return the values for the custom fields in a JSON object.

For field validation you can use the same technique and add the validation logic to the addComment function.  Here's a code example:

(function($CQ, _, Backbone, SCF) { "use strict"; var superAddComment = SCF.CommentSystemView.prototype.addComment; SCF.CommentSystemView.prototype.addComment = function() { this.clearErrorMessages(); if (!SCF.Session.get("loggedIn")) { var userIdentifier = this.getField("anon-name"); var email = this.getField("anon-email"); if(userIdentifier == "" || email == "") { this.showErrorOnAdd({details:{status:{message:"Please enter a name and email id"}}}); return false; } } superAddComment.apply(this,arguments); }; })($CQ, _, Backbone, SCF);

 

View solution in original post

2 Replies

Avatar

Correct answer by
Level 2

Hi Roland,

The comments component does have fields for name and email for anonymous users, are you looking to use those but make them required fields?

In general, you would add fields by extending the component and adding the new fields in the .hbs templates.

To submit the data for custom fields you can create a clientlib and in it extend the CommentSystemView JS object and overwrite the getCustomProperties() function and have it return the values for the custom fields in a JSON object.

For field validation you can use the same technique and add the validation logic to the addComment function.  Here's a code example:

(function($CQ, _, Backbone, SCF) { "use strict"; var superAddComment = SCF.CommentSystemView.prototype.addComment; SCF.CommentSystemView.prototype.addComment = function() { this.clearErrorMessages(); if (!SCF.Session.get("loggedIn")) { var userIdentifier = this.getField("anon-name"); var email = this.getField("anon-email"); if(userIdentifier == "" || email == "") { this.showErrorOnAdd({details:{status:{message:"Please enter a name and email id"}}}); return false; } } superAddComment.apply(this,arguments); }; })($CQ, _, Backbone, SCF);

 

Avatar

Level 1
Level 1

Thanks, Chris

Your answer and code sample solved my question in a easy and straightforward way.

Regards,

Roland