Hi,
I want to allow users to add comments directly from the list view by clicking on the comment icon (shown in the screenshot) without needing to open the document. Is there a way to achieve this using a dialog or any other method in Frappe?
I’d appreciate any guidance or examples. Thanks!
Hi @Saba_Awesabi:
Use this client script for listview
frappe.listview_settings['Your DocType'] = {
onload: function (listview) {
$(document).on('mousedown', '.comment-count', function (e) {
e.preventDefault();
e.stopPropagation();
const $listRow = $(this).closest('.list-row');
const docname = $listRow.find('.ellipsis[data-name]').data('name');
const doctype = $listRow.find('.ellipsis[data-doctype]').data('doctype');
const title = "Add comment"
const dialog = new frappe.ui.Dialog({
title: __(title),
fields: [],
});
const commentBoxWrapper = $('<div class="comment-box" style="margin-top:25px;"></div>').appendTo(dialog.body);
const commentBox = frappe.ui.form.make_control({
parent: commentBoxWrapper[0], // Ensure the DOM element is passed
render_input: true,
only_input: true,
enable_mentions: true,
df: {
fieldtype: "Comment",
fieldname: "comment",
},
on_submit: (comment) => {
if (strip_html(comment).trim() !== "" || comment.includes("img")) {
commentBox.disable();
frappe.call({
method: 'frappe.client.insert',
args: {
doc: {
doctype: 'Comment',
comment_type: 'Comment',
content: comment,
reference_doctype: doctype,
reference_name: docname
}
},
callback: function (response) {
if (!response.exc) {
dialog.hide();
listview.refresh();
} else {
frappe.msgprint(__('Failed to add comment.'));
}
}
});
}
else {
frappe.msgprint(__('Please enter a valid comment.'));
// reject(new Error('Invalid comment'));
}
},
});
// Render and display the comment box
commentBox.refresh();
// Customizations after rendering
setTimeout(() => {
const modal = dialog.$wrapper.find('.modal-content');
if (modal.length && window.innerWidth >= 768) {
modal.css({
width: '800px',
left: '50%',
transform: 'translateX(-50%)'
});
}
const box = dialog.$wrapper.find('.comment-box');
if (box.length && window.innerWidth >= 768) {
box.css({
'margin': '20px',
'margin-top': '25px'
});
}
// Remove the .comment-input-header
const header = commentBoxWrapper.find('.comment-input-header');
if (header.length) {
header.remove();
}
// Adjust the input box height to display 3 lines
const editor = commentBoxWrapper.find('.ql-editor');
if (editor.length) {
editor.css({
height: '5em', // Adjust height for ~3 lines
overflowY: 'auto',
});
}
}, 100);
// Show the dialog
dialog.show();
});
}
}
Inspiration by @adam26d
Hope this helps.
@avc
Thank you so much for your help! I tested the script, and it works perfectly. I really appreciate your support.
