CommentBox

The CommentBox widget allows users to submit comments about an entity instance. The widget includes an input field and submit button. When the submit button is clicked, an event handler can be used to save comments in MarkLogic. An image can also be included to identify users who submit comments.

The CommentBox widget typically works alongside the CommentList widget. The CommentList widget displays the comments associated with an entity instance.

CommentBox MarkLogic setup

To use the CommentBox widget to store comments in documents, the documents must have the appropriate permissions. See Protecting Documents for details.

Rendering a comment box

This example React application displays a CommentBox widget. The code is configured to save a user's comment in MarkLogic using the application context.

import { useContext } from "react";
import './App.css';
import { MarkLogicContext, CommentBox} from "ml-fasttrack";
  
function App() {
  
  const context = useContext(MarkLogicContext);
 
  const onSubmitComment = async (comment) => {
    let res = await context.patchComment(
      '/person/1001.json', { content: comment, context: "/envelope/array-node('comments')" }
    )
    if (res.success === true) console.log("Comment submitted");
  }
  
  return (
    <div className="App">
      <div>
        <div style={{height: '240px'}}>
          <CommentBox
            label="Comments"
            inputPlaceholder="Add a comment"
            buttonLabel="Submit"
            username="a-user"
            imgSrc="https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"
            profileImage={{
              alt: 'Avatar',
              path: 'https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg'
            }}
            onSubmit={(comment) => onSubmitComment(comment)}
          />
        </div>
      </div>
    </div>
  );
}
  
export default App;

Code explanation

In the Rendering a comment box code:

The username prop identifies the user who submits a comment. Typically, this value is dynamically set to the currently logged-in user. In this example, the value is hardcoded for simplicity.
The onSubmit prop accepts a callback function that saves the comment to MarkLogic. In this example, the callback executes the MarkLogicContext.patchComment() method to update the entity instance document.
For details about the other props available for CommentBox, see CommentBox API.

Saved comments

When the CommentBox and CommentList widgets are used with the MarkLogicContext methods, the comments can be saved in either XML or JSON.

Saved comments (XML)

In XML documents, comments are stored as children of an element in the document:

<comments>
  <comment id="cfbb02bc-680f-43f3-b0d3-2215aba5bc07">
    <content>This is the first comment.</content>
    <ts>2024-01-28T03:30:24.871Z</ts>
    <username>joe-user</username>
    <imgSrc>https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg</imgSrc>
  </comment>
  <comment id="4487fb6b-4605-4822-947c-0e8b0964ae4a">
    <content>This is the second comment.</content>
    <ts>2024-01-28T03:41:47.034Z</ts>
    <username>joe-user</username>
    <imgSrc>https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg</imgSrc>
  </comment>
</comments>

Saved comments (JSON)

In JSON documents, the comments are stored as an array of comment objects:

"comments": [
  {
     "id": "cfbb02bc-680f-43f3-b0d3-2215aba5bc07",
     "content": "This is the first comment.",
     "ts": "2024-01-28T03:30:24.871Z",
     "username": "joe-user",
     "imgSrc": "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"
  },
  {
     "id": "4487fb6b-4605-4822-947c-0e8b0964ae4a",
     "content": "This is the second comment.",
     "ts": "2024-01-28T03:41:47.034Z",
     "username": "joe-user",
     "imgSrc": "https://demos.telerik.com/kendo-ui/content/web/Customers/RICSU.jpg"
  }
]

CommentBox example rendering

The Rendering a comment box code displays this comment box:

CommentBox API

Prop	Type	Properties
label	string	Label appearing above the comment box.
buttonLabel	string	Label for the button for submitting comments.
inputPlaceholder	string	Placeholder text displayed in the comment input field.
onSubmit	(comment: { content: string, ts: string, username: string, imgSrc: string }) => void	Callback function triggered when the user clicks the submit button. It receives an object representing the comment data.
onChange	(comment: any) => void	Callback function triggered when the user changes the comment input field. It receives the current field text as an argument.
username	string	Username of the commenter.
profileImage	{ path: string; alt: string; }	Object for configuring the comment avatar. A `path` property defines the avatar image URL, and an `alt` property defines the alternative text.
imgSrc	string	Optional URL string for the image associated with the commenter. It is submitted as part of the comment payload.
renderImage	ReactNode	Optional custom React component for rendering the avatar image next to the comment box. If provided, it will override the default image.
renderButton	ReactNode	Optional custom React component for rendering the submit button. If provided, it will override the default button.
containerStyle	CSSProperties	CSS styles applied to the widget.
labelStyle	CSSProperties	CSS styles applied to the comment label.
imageStyle	CSSProperties	CSS styles applied to the avatar image.

In this section:

Develop with FastTrack