Comment

💬 Comment Component in Lowcoder

The Comment component in Lowcoder facilitates user engagement by enabling the display and management of user-generated comments. It is ideal for applications requiring feedback, discussions, or threaded conversations.

🔧 Key Features

• User Information Display: Showcases user avatars, names, and timestamps alongside comments.

• Nested Replies: Supports threaded discussions by allowing replies to comments.

• Interactive Actions: Includes options for actions like replying, editing, or deleting comments.

• Dynamic Data Binding: Integrates seamlessly with data sources for real-time updates.

• Customisable Styling: Offers flexibility in appearance to match application themes.

🛠 Configuration Options

• Data Source Integration: Bind comments to APIs or databases for dynamic content.

• Avatar and User Details: Customize the display of user information associated with each comment.

• Action Handlers: Define behaviors for actions like reply, edit, or delete.

• Styling Options: Adjust layout, colors, and fonts to align with your application's design.

⚙️ Integration Tips

• Data Binding: Utilize Lowcoder's data binding syntax ({{ }}) to connect comment data to dynamic sources.

• Event Handling: Implement event handlers to perform actions when users interact with comments, such as submitting a reply or deleting a comment.

• Combining with Other Components: Integrate the Comment component with forms or user profiles to enhance user interaction.

Component Playground

On Component Playground, you can interact with the Comment component and explore it's Properties, Events and Methods. Play with different Styling properties to see the effect on the Comment component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Component Auto-Docs

In the Auto-Docs of Comment component, we have shown how to use different properties of the Comment component. It also includes the Styling properties of the Comment component.

Lowcoder | rapid App & VideoMeeting builder for everyone.

Properties of the Comment component

These properties are accessible in {{ }} notations, as well as in JavaScript Queries.

Property Name	Type	Description
commentList	Array	Returns an Array of Objects containing the list of Comments along with User details of the Comment component
deletedItem	Array	Returns an Array of Objects containing the most latest deleted comment of the Comment component
hidden	Boolean	Returns True or False based on whether the Comment component is hidden or not
mentionName	String	Returns a String containing the name of the most recently tagged Person of the Rating component
submittedItem	Object	Returns an Object containing the most recent Comment along with User details of the Comment component

Events

Events give you the ability to trigger further actions (with Event-Handlers).

Event Name	Description
Click	Triggers, when a User clicks on the User name or Avatar on the Comment component
Submit	Triggers, when a User submits a new Comment
Delete	Triggers, when a User deletes a Comment
Mention	Triggers, when a User mentions anyone in the Comment

Methods

You have the capability to engage with components via their respective methods, which can be accessed by their designated names within any segment where JavaScript is utilized. Additionally, these components can be activated through the 'Control Component' action, which is triggered in response to specific events.

setCommentList() :

comment1.setCommentList() method sets the Comment component's CommentList property, which gets shown in the Comment component.

comment1.setCommentList([
    {
        "user": {
            "name": "John Doe",
            "avatar": "https://ui-avatars.com/api/?name=John+Doe"
        },
        "value": "Has anyone tried using Lowcode for our new internal tool yet?",
        "createdAt": "2024-09-20T10:15:41.658Z"
    },
    {
        "user": {
            "name": "Jane Smith",
            "avatar": "https://ui-avatars.com/api/?name=Jane+Smith"
        },
        "value": "Yes, I’ve been experimenting with it for automating our workflows. It's super quick to set up.",
        "createdAt": "2024-09-20T10:17:12.658Z"
    }
]);

clearCommentList() :

comment1.clearCommentList() clears the Comment component's CommentList property and empties the Comments from the Comment component.

comment1.clearCommentList();

resetCommentList() :

comment1.resetCommentList() method resets the Comment component's CommentList property to the default CommentList of the Comment component.

comment1.resetCommentList();

setDeletedItem() :

comment1.setDeletedItem method sets the Comment component's DeletedItem property.

comment1.setDeletedItem([
    {
        "user": {
            "name": "Angel Maria",
            "displayName": "Angel",
            "avatar": "https://ui-avatars.com/api/?name=Michael+Brown"
        },
        "value": "That sounds interesting! What kind of automation are you building?",
        "createdAt": "2024-09-20T10:18:45.658Z"
    }
]);

clearDeletedItem() :

comment1.clearDeletedItem() clears the Comment component's DeletedItem property and empties the DeletedItem property from the Comment component.

comment1.clearDeletedItem();

resetDeletedItem() :

comment1.resetDeletedItem() method resets the Comment component's DeletedItem property to the default DeletedItem property of the Comment component.

comment1.resetDeletedItem();

setSubmitedItem() :

comment1.setSubmitedItem() method sets the Comment component's SubmitedItem property.

comment1.setSubmitedItem({
    "user": {
        "name": "Tom Cruise",
        "email": "[e-mail]"
    },
    "value": "This is a Test comment",
    "createdAt": "2025-05-13T19:48:35+05:00"
});

clearSubmitedItem() :

comment1.clearSubmitedItem() clears the Comment component's SubmitedItem property and empties the SubmitedItem property from the Comment component.

comment1.clearSubmitedItem();

resetSubmitedItem() :

comment1.resetSubmitedItem method resets the Comment component's SubmitedItem property to the default SubmitedItem property of the Comment component.

comment1.resetSubmitedItem();

📌 Use Cases

• Feedback Sections: Collect user feedback on products or services.

• Discussion Forums: Facilitate conversations among users on various topics.

• Support Threads: Enable users to ask questions and receive answers in a threaded format.

• Content Comments: Allow users to comment on articles, blogs, or media content.