In the Web form’s List view I want to add a filter to the project field .How can i gain access to this Web Form’s list page ? I can access the Doctype’s List view with this code .
frappe.listview_settings["Doctype'] = {
}
But how can I gain access to web form’s Listview .
i was able to achieve this by this code . i created a new filter and placed it there from the ground up
frappe.ready(function() {
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList' || mutation.type === 'attributes') {
if (frappe.web_form_list && Object.keys(frappe.web_form_list).length > 0) {
console.log("Custom script for tickets web form list loaded");
frappe.call({
method: "path",
args: {
user: frappe.session.user
},
callback: function(r) {
if (r.message) {
let projectOptions = r.message.map(project => ({
label: project.project_name,
value: project.name
}));
// Add an empty option at the beginning
projectOptions.unshift({ label: '', value: '' });
// Create the Select control
let projectFilter = frappe.ui.form.make_control({
df: {
fieldtype: "Select",
// label :"Project",
fieldname: "project",
options: projectOptions,
onchange: function(event) {
let selectedProject = projectFilter.get_value();
frappe.web_form_list.filters = {
project: selectedProject || undefined
};
frappe.web_form_list.refresh();
}
},
parent: $(".web-list-filters"),
render_input: true
});
// Add custom styles for height
$(projectFilter.wrapper).css({
height: '70px', // Adjust the height as needed
padding: '0px'
});
// Add tooltip and placeholder
$(projectFilter.wrapper)
.addClass("col-md-3")
.attr("title", __("Project"))
.tooltip({
delay: { show: 600, hide: 100 },
trigger: "hover"
});
projectFilter.$input.attr("placeholder", __("Select Project"));
// Push the filter into the web_form_list filter_input array
frappe.web_form_list.filter_input.push(projectFilter);
// Disconnect the observer after setting filters
observer.disconnect();
}
}
});
}
}
});
});
// Start observing the target node for mutations
const targetNode = document.querySelector('.web-list-table');
if (targetNode) {
observer.observe(targetNode, {
childList: true,
attributes: true,
subtree: true
});
}
});
Dear @RanjaniV
This code of @rik_sanchez is designed to add a custom project filter to a web form list in Frappe.
Ideally, you have to be a 50% techie to get this sorted. Will explain.
The code runs when the Frappe framework is ready (frappe.ready )
It sets up a MutationObserver to watch for changes in the DOM, specifically looking for changes in the child elements or attributes of the target node (.web-list-table ).
When a mutation is detected, it checks if frappe.web_form_list exists and has elements.
If the condition is met, it makes an API call to a specified method (path ) with the current user as an argument.
Upon receiving a response, it processes the data to create a list of project options.
It creates a Select control with the project options and adds it to the web form list filters.
It applies custom styles, tooltips, and placeholders to the select control.
When a project is selected, it updates the filters in frappe.web_form_list and refreshes the list.
Finally, it disconnects the observer to stop watching for further mutations.
This code should be a Client Script because it interacts with the DOM and performs actions based on user interactions and changes in the web form list. Client scripts are designed to run in the browser and handle such tasks.
Client scripts are easier to manage by the end user.
@RanjaniV if the filter is based on a field that is present in the form then in the property for the field add show in filter to be checked.
