Frappe Client ScriptJavascript

How to Restrict Users from Adding or Deleting Rows in a Frappe Child Table?

Restrict users to Add/Delete Rows

Learn how to programmatically disable the 'Add Row' and 'Delete' buttons for a child table in Frappe/ERPNext using the cur_frm.toggle_enable client script method.

In Frappe and ERPNext, child tables are essential for handling one-to-many relationships, such as items in a sales order. However, there are business scenarios where you need to prevent users from adding or removing rows while still allowing them to edit existing data. This could be due to form status, user permissions, or other business logic.

This code snippet provides a simple and effective way to achieve this using a single line of client-side code, enhancing data integrity and user experience by dynamically controlling the UI.

javascript
View original ERPNext forum discussion
1cur_frm.toggle_enable('childtable_field', false);

Understanding This Code

What It Does

This code snippet disables the 'Add Row' and 'Delete' buttons for a specified child table field, effectively preventing users from modifying the table's structure while still allowing them to edit data within existing rows.

When To Use

Use this script in a Client Script that triggers on form events like 'onload', 'refresh', or when a specific field value changes. It's ideal for scenarios where child table entries should be static or controlled by another process.

Prerequisites

  • •Basic understanding of Frappe Client Scripts.
  • •A DocType with a Child Table field.

Key Concepts

Important ideas to understand in this code

cur_frm Object

The 'cur_frm' (current form) is a global object in Frappe's client-side scripting environment. It provides access to the current form's data (DocType fields), metadata, and a rich API for manipulating the form's behavior and UI.

Learn more

toggle_enable Method

The 'toggle_enable' method is part of the 'cur_frm' API. It is used to dynamically enable or disable a field on the form. When applied to a child table field, it specifically controls the enabled state of the 'Add Row' and 'Delete' buttons.

Learn more

Child Table (Table Field)

In Frappe, a Child Table is a field type that allows you to store a list of records (from another DocType) within a parent document. Each row in the table is a separate document, linked to the parent.

Learn more

Step-by-Step Tutorial

Follow along to understand how this code works

1

Identify Your DocType and Child Table Fieldname

First, open the DocType you want to customize. In the form builder, find your child table and note its 'Fieldname'. This is the identifier you'll use in the script.

javascript
// Example: If your child table field is named 'items',
// the fieldname is 'items'.
Next Step
2

Create a New Client Script

Navigate to 'Client Script' from the Awesome Bar. Click 'New' to create a new script. Select the DocType you identified in the previous step.

javascript
// In the Client Script form:
// Select DocType: 'Your DocType Name'
Next Step
3

Add the Code to a Form Event

In the script editor, place the code within a form event function. The 'refresh' event is usually the best choice to ensure the restriction is applied as soon as the form loads or is refreshed.

javascript
frappe.ui.form.on('Your DocType Name', {
    refresh: function(frm) {
        // Replace 'childtable_field' with your actual fieldname
        frm.toggle_enable('childtable_field', false);
    }
});
Next Step
4

Save and Test

Save the Client Script. Clear your browser cache (Ctrl+Shift+R) and open a document of your target DocType. The 'Add Row' and 'Delete' buttons for the specified child table should now be disabled.

javascript
// No code for this step. Verify the UI change in the DocType form.

Common Issues & Solutions

Troubleshoot problems you might encounter