Add button to Child Table in Frappe

// Step 1: Override formatter so the button renders in the cell
function apply_button_formatter() {
  const map = frappe.meta.docfield_map['YOUR_CHILD_DOCTYPE'];
  if (!map || !map['your_field_name']) return;

  map['your_field_name'].formatter = function(value, df) {
    return `Click Me`;
  };
}

// Step 2: Intercept clicks in capture phase before Frappe opens the row
function setup_button_handler(frm) {
  if (frm._my_btn_handler) {
    frm.wrapper.removeEventListener('click', frm._my_btn_handler, true);
  }

  frm._my_btn_handler = function(e) {
    const btn = e.target.closest('.my-action-btn');
    if (!btn) return;

    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();

    const gridRow = btn.closest('.grid-row');
    const cdn = gridRow && gridRow.dataset.name;
    if (cdn) handle_button_click(frm, cdn);
  };

  frm.wrapper.addEventListener('click', frm._my_btn_handler, true);
}

// Step 3: Action to run when button is clicked
function handle_button_click(frm, cdn) {
  const row = locals['YOUR_CHILD_DOCTYPE'][cdn];
  if (!row) return;

  frappe.msgprint({
    title: 'Row Details',
    message: `Item: ${row.item_code}`,
    indicator: 'green'
  });
}

// Step 4: Hook into form lifecycle
frappe.ui.form.on('YOUR_DOCTYPE', {
  setup(frm) {
    apply_button_formatter();
    setup_button_handler(frm);
  },
  refresh(frm) {
    apply_button_formatter();
    setup_button_handler(frm);
  }
});

/* Keep button visible when row is in edit mode */
.grid-static-col[data-fieldname="your_field_name"] .static-area {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

/* Hide the edit input for this column — the button handles all interaction */
.grid-static-col[data-fieldname="your_field_name"] .field-area {
  display: none !important;
}

Read ./child_table_button.md and follow the instructions in it

You are setting up a clickable button inside a Frappe child table.
This is a custom app project (not a client script).

Frappe does not render Button fields in child tables — they show as empty
cells. The workaround is:
1. Add a Data field and override its formatter to render button HTML
2. Add CSS to keep it visible in edit mode
3. Intercept clicks using a capture-phase event listener

## Step 1 — Gather info
Ask the user for the following, one message at a time:
1. What is the parent DocType? (e.g. Stock Entry)
2. What is the child DocType? (e.g. Stock Entry Detail)
3. What should the button label say? (e.g. "Check Stock")
4. What function should run when clicked? (e.g. check_stock)
5. What should the function do? (e.g. "call a server API to check stock")

## Step 2 — Field setup instructions
Tell the user:
"Go to Customize Form > [child DocType]. Add a Data field.
Name it [child_doctype_prefix]_[button_name] to avoid CSS conflicts.
Mark it as In List View. Save, then confirm the exact field name here."

## Step 3 — Generate and place the code
Find the correct files in the app:
- JS: existing .js file for the parent DocType
- CSS: app's main CSS file

If the JS file has a frappe.ui.form.on block, merge into it.
If no JS file exists, create one and add to hooks.py.
If no CSS file exists, create one and add to app_include_css in hooks.py.

Generate this code with all placeholders replaced:

### JS:
function apply_[function_name]_formatter() {
  const map = frappe.meta.docfield_map['[CHILD_DOCTYPE]'];
  if (!map) return;
  map['[field_name]'].formatter = function(value, df) {
    return `[BUTTON_LABEL]`;
  };
}

function setup_[function_name]_handler(frm) {
  if (frm._[function_name]_handler) {
    frm.wrapper.removeEventListener('click', frm._[function_name]_handler, true);
  }
  frm._[function_name]_handler = function(e) {
    const btn = e.target.closest('.[function_name]-btn');
    if (!btn) return;
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    const cdn = btn.closest('.grid-row')?.dataset.name;
    if (cdn) [function_name](frm, cdn);
  };
  frm.wrapper.addEventListener('click', frm._[function_name]_handler, true);
}

function [function_name](frm, cdn) {
  // Implementation based on user's description
}

frappe.ui.form.on('[PARENT_DOCTYPE]', {
  setup(frm) {
    apply_[function_name]_formatter();
    setup_[function_name]_handler(frm);
  },
  refresh(frm) {
    apply_[function_name]_formatter();
    setup_[function_name]_handler(frm);
  }
});

### CSS:
.grid-static-col[data-fieldname="[field_name]"] .static-area {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
.grid-static-col[data-fieldname="[field_name]"] .field-area {
  display: none !important;
}

## Step 4 — Action function
Based on user's description, generate the function body:
- Frontend only: const row = locals['[CHILD_DOCTYPE]'][cdn];
- Server call: frappe.call({ method: '...', args: { cdn }, callback })
- Both patterns combined if needed

## Step 5 — Remind the user
After writing all code, tell the user:
- Run bench build and reload the page
- The CSS is global — use prefixed field names
- For a second button, run this prompt again with a different function name