I have data in a child table. I want to fetch data from child table and show them to HTML field type table. How can I do it?
is it a print format ? or a web page ?
oh so you want to preview the table in a html field as a “html table”
Custom scripts . create an event on refresh to build the existing table and display it in the html field. (create an empty div in the html field with an id so you can call it with js),
Create a second event on child add-delete-update to update the existing table .
you can google how to build a table with js and insert it in a div element , it’s simple.
child table events (and other events) documentation : Form Scripts
@bahaou I have a child table. Many data already inserted in that child table. I want to fetch those data from that child table and show them in HTML type field which is html table. I need to get data from database I think. Do you get it?
@Cross_X is the html field in the same page ? if the answer is yes, your data I mean everything is already charged in the client side and you can just read it using js (frm.doc.field_name) .
If the html field is in another page you can still get the data using js.
Is this what are you trying to do ? showing a html table under the child table ?
@bahaou Yes exactly. Got it. My html table just like you showed. I used frm.doc.fieldname. But after saved. data showed in the child table but no data showing in the HTML table. My .js script is down below:
frappe.ui.form.on(‘Fetch Test’, {
refresh(frm) {
var row1 = cur_frm.add_child('test_table');
var test1 = row1.item_code;
var test2 = row1.size;
cur_frm.refresh_fields("test_table");
var newrow = '<tr><td>' + test1 + '</td><td>'+ test2 + '</td></tr>';
$('#examplezz tr:first').after(newrow);
});
}
})
try this :
create a table inside the html div (by editing the doctype) : and give it an id , let’s say myTable.
now in the refresh function :
you need to get the table first : (var table = document.getElementById(“myTable”); )
insert a new row : (var row = table.insertRow(-1); )
now insert cells :
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = “NEW CELL1”;
cell2.innerHTML = “NEW CELL2”;
when you refresh the page you should see a table with 2 cells.
Try this static table , if it works we move to data from your child table .
I have tried to add your suggested html code in the HTML field type. But table not showing from the option. Like this:
And if I save, error shows. This one.
I tested it and it works for me . here are all the screenshots.
the custom script :
the doctype form after refresh :
frappe.ui.form.on('Fetch Test', {
refresh(frm) {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
})
perfect . now instead of static row . we need to get data from table and insert them row by row :
in frm.doc.child.forEach , change “child” with your table name .
and repeat the 2 lines of the cell and each time change the value (item_code,uom…)
frappe.ui.form.on('Fetch Test', {
refresh(frm) {
var table = document.getElementById("myTable");
frm.doc.child.forEach(function(element){
var row = table.insertRow(-1);
//repeat the next 2 lines depending on how many cells you have
var cell1 = row.insertCell(0);
cell1.innerHTML = element.name;
})
}
})
1 Like
@bahaou, Its showing the data in table now.
Thank you so much. I’m very much thankful to you.
can you please help me just one little bit? How can I show child tables Heading name in tables header name?
you can add a line just like we created the static row (before fetching child data).
or edit the doctype, when you wrote the empty table, create it with a head row.
also you can add , styles , borders, colors … with JS . anything you want to change you can do it with js , just google (how to add border to table with js ).etc…
I’ve added this code inside foreach. Like this.
var header = table.createTHead();
var header_row = header.insertRow(0);
var header_cell1 = header_row.insertCell(0);
header_cell1.innerHTML = "<b>"+ element.item_code; +"</b>";
How can I show child tables cells header in tables Header?
hello , sorry I was busy .
your code is correct but you must place it outside the forEach, just before it .
how is your table now ? did you do some styles and stuff ?