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.
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.
Properties of the Comment component
These properties are accessible in {{ }} notations, as well as in JavaScript Queries.
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).
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": "[email protected]"
},
"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.
Last updated
Was this helpful?