Comment on Search Results

The Appkit Social module lets users comment on search results and display other users' comments. This gives users a flexible way to interact and contribute in an application, and can be used to implement features such as feedback, discussion, and reviewing systems.

  • <social:commentForm> – Let users comment on search results.

  • <social:commentList> – Display the comments of other users.

Usage

A typical use of the comment form is to embed it in a search result list, as shown here:

 <search:resultList response="${symbol_dollar}{response}">
    <search:result>
        <%-- Title --%>
        <search:field fieldName="title" url="${result.fields.url}" style="title" />
        <%-- Description and URL, Comments --%>
        <search:field fieldName="summary" style="description" maxCharacters="250" />
        <search:field fieldName="url" style="url" maxCharacters="92" url="${result.fields.url}" />

		<social:commentForm target="${result.id}" buttonLabel="Post" placeholder="Leave a comment..." />
		<social:commentList target="${result.id}" format="dd MMM yyyy" />
  	</search:result>
</search:resultList>

This is an example of how the tags can be rendered when used in this manner:

Commenting screenshot

Required Tag Attributes

target (java.lang.String)
The ID of the document that should be commented on.

Optional Tag Attributes

collection (java.lang.String)
The collection to which the target document belongs.

topic (twigkit.model.Topic)
A topic to which the new "comment" annotation should belong.

buttonLabel (java.lang.String)
Label of form submit button (default: "Post Comment").

placeholder (java.lang.String)
Placeholder value to put in the comment text box (default: "Write a comment…").

legend (java.lang.String)
Legend for the comment form (default: "Comment").

Make the comment form visible

By default the commentForm is hidden and cannot be displayed without an icon/button that toggles it. See the screenshot above for an example of this icon (in this case a blue speech bubble).

To ensure that this icon/button is visible on your page, so that a user can toggle the comment form, insert this code snippet inside a <search:result> tag:

<search:result>
    ...
    <div class="actions">
        <div class="comment"><a class="action"></a></div>
    </div>
    ...
</search:result>