Field Outline color for Child Document Not Working

[pjoseph]

Hi,

The following code is working on Parent DocType records:
However, it is not working on the Child records. Is there any change in syntax for Child DocType records?

Here is the code :

	f1 = document.querySelector('[data-doctype="Parent Document"][data-fieldname="my-field"]');
	f1.style.border="solid 1px green";

Thanks,
Joseph

[NCP]

Hi @pjoseph,

Please check the post.

Can we change the color of the section with the different colors?

Hi @Parth_Vashista, Please check the syntax. frappe.ui.form.on('DocType', { refresh: function(frm) { // select the first row in the child table var rows = document.getElementsByClassName("grid-row"); for (var i = 0; i < rows.length; i++) { rows[i].style.backgroundColor = "cadetblue"; } } }); [image] Note: Next time, Please create a new thread for new issue. Thank You!

Colour child table rows based on logic

hey is there any way we can colour the rows of the grid in child table based on some logic. thank you in advance frappe.ui.form.on('DocType', { refresh: function(frm) { // select the first row in the child table var rows = document.getElementsByClassName("grid-row"); for (var i = 0; i < rows.length; i++) { rows[i].style.backgroundColor = "cadetblue"; } } }); [image] i want to colour the row based on item for eg for hotel i want …

I hope this helps.

Thank You!

[pjoseph]

No Luck Patel @NCP

I want border color for a field on a child table, not the entire record. your solution works for entire child table row.

[NCP]

Hi @pjoseph,

Please apply it and check it.

frappe.ui.form.on('Sales Order', {
    refresh: function(frm) {
        var rows = document.getElementsByClassName("grid-row");
        for (var i = 0; i < rows.length; i++) {
            var fieldElement = rows[i].querySelector(".grid-static-col[data-fieldname='item_code']");
            if (fieldElement) {
                fieldElement.style.borderColor = "red";
                fieldElement.style.borderWidth = "2px";
                fieldElement.style.borderStyle = "solid";
            }
        }
    }
});

Output:

Please set your field and doctype in the script.

I hope this helps.

Thank You!

[pjoseph]

Thanks Patel @NCP

This is working fine on the table view. But, I need it on the Child Form after pressing the “Edit” button at the end. Hope I communicate correctly.

[NCP]

Hi @pjoseph,

You can try with your logic. You can learn from documentation/video.

#BuildWithHussain Ep.7: JavaScript Essentials & Client Scripts

Hey Everyone ! The Official Build With Hussain Website is Live! ICYMI, I built the website buildwithhussain.dev live in Episode 5 and 5B of the series. Check out the shiny new website for Build With Hussain. Don’t forget to register to stay notified about all the upcoming episodes, Frappeverse goodies, and more! Up Next: JS Essentials & Client Scripts! In this week’s episode of Build With Hussain (14th June @ 2.30PM IST), we will start by learning how JavaScript fits in the whole equatio…

Thank You!

[ErpnextRaja]

@NCP , will this work even if the grid is more than 50 rows? Not working for me…

[NCP]

Hi @ErpnextRaja,

Please apply it.

frappe.ui.form.on('Sales Order', {
    refresh: function(frm) {
        applyBorderColor();
        $('body').on('click', 'button.btn.btn-secondary.btn-xs.prev-page, button.btn.btn-secondary.btn-xs.next-page, button.btn.btn-secondary.btn-xs.first-page, button.btn.btn-secondary.btn-xs.last-page', function() {
            applyBorderColor();
        });
    }
});

function applyBorderColor() {
    var rows = document.getElementsByClassName("grid-row");
    for (var i = 1; i < rows.length; i++) {
        var fieldElement = rows[i].querySelector(".grid-static-col[data-fieldname='item_code']");
        if (fieldElement) {
            fieldElement.style.borderColor = "red";
            fieldElement.style.borderWidth = "2px";
            fieldElement.style.borderStyle = "solid";
        }
    }
}

Output:

Thank You!

[ErpnextRaja]

@NCP , Thank you very much… It is working. But my situation is color should be based on condition where the selling price is less than the cost price…which is not available in the grid. I am working on it… Thanks a lot

[NCP]

You can manage and set it according to your scenario.

Thank You!

[ErpnextRaja]

@NCP , Really sorry… Since morning trying to sort it… but couldn’t. can you please help… I want to change the style if the rate is less than incoming_rate…
items child doctype is having 84 items. but
var rows = document.getElementsByClassName(“grid-row”);
showing only 63… I am having very less knowledge in js…