Overriding set_link_title Only Works for Child Table Link Field

Frappe Framework
1

Hi,

I’m encountering an issue while customizing Frappe’s ControlLink class. Here’s the code I’m using:

frappe.ui.form.ControlLink = class CustomControlLink extends frappe.ui.form.ControlLink {
validate(value) {
// validate the value just entered
return value;
}
get_translated(value) {
return this.is_translatable() ? __(value, null, “Custom Context”) : value;
}
async set_link_title(value) {
const doctype = this.get_options();
if (!doctype || !this.is_title_link()) {
this.translate_and_set_input_value(value, value);
return;
}

	this.translate_and_set_input_value(link_title, value);

}

}

Issue:

The above code correctly overrides the set_link_title method for link fields in child tables. However, it does not seem to affect the link fields in the parent form. I would like to understand why this is happening and how to ensure that the changes apply to link fields in both child and parent forms.

2

Hello @Lyes,

As you extend the main class ControlLink, it will be applied to all link fields, both child and parent. If this does not work, could you elaborate more on the issue and provide some code and steps on how you are doing it?

3

Hi @Rehan_Ansari,

My main reason for extending ControlLink class, is for providing the translation context when listing records.

I have the main doctype is Project Issue, that contains a link field Priority which is linked to Project Issue Priority Doctype.

the code I mentioned before is in the JS file of the main Doctype:

frappe.ui.form.on('Project Issue', {
	// refresh: function (frm) {

	// }
});
frappe.ui.form.ControlLink = class CustomControlLink extends frappe.ui.form.ControlLink {
	validate(value) {
		// validate the value just entered
		return value;
	}
	get_translated(value) {
		return this.is_translatable() ? __(value, null, "Project Issue Priority") : value;
	}
	async set_link_title(value) {
		const doctype = this.get_options();

		if (!doctype || !this.is_title_link()) {
			this.translate_and_set_input_value(value, value);
			return;
		}

		this.translate_and_set_input_value(link_title, value);

	}
}

Now I’ve added the same liked field in the child table just for testing:
I’ve got these results:

image
image953×742 68.6 KB

PS: even when I add console log in the JS code, it triggered only when selecting records in child table, and not in the parent link fields.

4

The following code works for me as a solution:

frappe.ui.form.ControlLink.prototype.get_translated = function (value) {
    let link_doctype = this.get_options();
    return this.is_translatable() ? __(value, null, link_doctype) : value;
}

Key Difference:

In the solution, the get_translated method is added directly to the prototype of frappe.ui.form.ControlLink. Using the prototype allows the method to be applied to all instances of ControlLink, including those in both child tables and the parent form.

  • Original Code: Defined a new class CustomControlLink which only affected specific instances of ControlLink.
  • Solution: By using prototype, the get_translated method is injected into the existing ControlLink class, ensuring it works for both child and parent forms across the board.

Tip: To Apply the Solution Globally to All Doctypes:

To ensure this solution applies to all doctypes in your Frappe application, include the following code in your_app/public/js/:

$(document).ready(function () {
    frappe.ui.form.ControlLink.prototype.get_translated = function (value) {
        let link_doctype = this.get_options();
        return this.is_translatable() ? __(value, null, link_doctype) : value;
    }
});
  • $(document).ready(): Ensures the custom method is applied when the document is fully loaded.
1 Like