How to populate a child table on a webform

Hi

So I’ve built a custom app and am trying to populate a child table on a webform with data. I’ll explain with a simplified example. Say there are three DocTypes

  • Checklist Submission
    with DocFields:
    check_category (Field Type Data)
    checks (Field Type Table with Options = Checklist Submission Item)

  • Checklist Submission Item
    with DocFields:
    check_description (Field Type Link with Options = Checklist Master
    pass_or_fail (Field Type Select with Options Pass, Fail)

  • Checklist Master
    with DocFields:
    check_description (Field Type Data)
    check_category (Field Type Select with Options Category A, Category B, Category C)

Checklist Master can then be populated with these records:
----------Description ------ Category--------------

  • Machine Clean-------Category A
  • Power Working------Category A
  • Tools in place--------Category B
  • Quality Checked-----Category C
  • No breakdowns------Category B

So the idea is that a user creates a new Checklist Submission record. Once the check_category is selected, e.g. Category B, all the Checklist Master records with Category = “Category B” will be copied to the Child Table, effectively creating new Checklist Submission Item records. The user can then mark these as Pass or Failed, and then submit the doc.

I’ve built this successfully with something like this:
checklist_submission.js:

   frappe.ui.form.on('Checklist Submission', {
            //Populate child table as soon as Category is selected
    	check_category : function(frm) {
    		frappe.call({
                       method: "get_checklist_submission_items",
                       doc: frm.doc,
                       callback: function(r) {
    				cur_frm.refresh_field('checks');
    	           }
             }
    })

checklist_submission.py:

class StartUp(Document):
	def validate(self):
		"""Save and Validate"""

   	def get_checklist_submission_items(self):
	   """Get the checks from Checklist Submission Item based on check_category"""
	   sql_checks = frappe.db.sql("""SELECT t_checks.check_description
								FROM `tabChecklist Master` AS t_checks
								WHERE t_checks.check_category = %s """,(self.check_category), as_dict=True)
	for i in sql_checks:
		row = self.append('checks', {})
		row.description = i.description
		row.pass_or_fail = "Fail"

So if “Category B” is selected on creating a new Checklist Submission, the child table would populate with Category B checks:
-----Description----------------Pass/Fail?

  • Tools in place -------------Fail
  • No breakdowns ----------Fail

And finally my question then, can anyone point me in a direction to duplicate this logic on a webform? What does the getContext method do?

1 Like

Hello @ dirkvdl16
Can you please help me with this .
Question 1:
I am building a web Application using ERPNext and I want some data to be auto populated to a table. The table works only if click on ADD ROW button. I don’t want my website users to click on that manually. Please help me with this.

Question 2:
If you could see the URL Link over there I want that data to be auto populated to the table.
Example : Quantity: 1 and Plan: Child Care Weekly Silver

Please help me solving this. Thanks in advance

I don’t think you can populate a child table from parameters in the URL. What you can do though, is write a client-side Javascript method in the webform to parse the URL parameters and populate the child table.

  1. Parse parameters using window.location (like so)
  2. Populate child table with parameters (example - but in desk not in a webform)

Do note that there is currently an issue with saving child tables on webforms. I see there is a very recent PR to fix this, but I don’t know when this will be migrated to the version-12 branch