Change design of child table

Frappe Framework Customization
1

Hello,

I want to change design of child table. for example I want to highlight those records who’s amount >= 1000 in child table.

In below image out of 5 records I want to highlight 3 records.

loan_repayment.png934×351 9.57 KB

Please assist me for same :smile:
Thank You

2

@Divyesh_Amreliya look this file erpnext/item_grid.html at develop · frappe/erpnext · GitHub, this file defines the layout of the grid for Items in Orders and Invoices

1 Like
3

Thank you @max_morais_dmm
For your reply,

Is there any way to do this by using js.

Note: I want to highlight child table records based on its field value.

4

@Divyesh_Amreliya in theory yeah, have a way!

But I dont fell that it is a good way!

Anyway you can do something like this:

frappe.ui.form.on("Your Child DocType", "amount", function(frm, cdt, cdn){
    cur_frm.doc.your_gridfield.forEach(function(child){
        var sel = format('div[data-fieldname="your_gridfield"] > div.grid-row[data-idx="{0}"]', [child.idx]);
        if (child.amount > 1000){
            $(sel).css('background-color', "#ff5858");
        } else {
            $(sel).css('background-color', 'transparent');
        }
    });
});

But, man! It is not beautiful!

5

Thanks @max_morais_dmm
For your reply,

I try this way by using your code but it is not working.

6

I’m sorry I forgot a detail!

frappe.ui.form.on("Your Child DocType", "amount", function(frm, cdt, cdn){
    var child = locals[cdt][cdn];
    cur_frm.doc.your_gridfield.forEach(function(child){
        var sel = format('div[data-fieldname="your_gridfield"] > div.grid-row[data-idx="{0}"]', [child.idx]);
        if (child.amount > 1000){
            $(sel).css('background-color', "#ff5858");
        } else {
            $(sel).css('background-color', 'transparent');
        }
    });
});
1 Like
7

Thank you @max_morais_dmm,

Its working fine for me. :smile:

8

@max_morais_dmm
@Divyesh_Amreliya
I am trying this code but its not working for me, I appreciate if anyone of you may help me in this context:

Child Doctype Name: Shipping List
Grid Filed Name: shipping_list
Child Table field name: one1
Below is my code:

frappe.ui.form.on("Shipping List", "one1", function(frm, cdt, cdn){
    var child = locals[cdt][cdn];
    cur_frm.doc.shipping_list.forEach(function(child){
    var sel = format('div[data-fieldname="shipping_list"] > div.grid-row[data-idx="{0}"]', [child.idx]);
        if (child.one1 > 0){
        $(sel).css('background-color', "#ff5858");
        } else {
            $(sel).css('background-color', 'transparent');
        }
    });
});

Edit: I tried putting message under if condition and the message did appear but didn’t get the grid format.
Regards
Ruchin Sharma

9

@max_morais_dmm I have same issue as @ruchin78 .

above code is not working for me as well.

What is the issue with this ?

10

I’m only guessing, but it might be that cur_frm global is deprecated¹ now:

Deprecated API: The API used in the pull request must be the latest recommended methods and usage of globals like cur_frm must be avoided.

¹ — Contribution Guidelines · frappe/erpnext Wiki · GitHub

11

@strixaluco then what is the way to achieve something like this ?

12

Sorry, can’t help with this. Would be useful to get some info on latest guidelines and best practices from developers.

13

Okay @strixaluco

Thanks for your Help. :slight_smile:

1 Like