frappe.meta.docfield_map['Stock Entry Detail']['your_field'].formatter = function(value, df) {
  return `Click Me`;
}

const gridRowEl = btn.closest('.grid-row');
const cdn = gridRowEl.dataset.name;

function apply_button_formatter() {
  const map = frappe.meta.docfield_map['YOUR_CHILD_DOCTYPE'];
  if (!map) return;

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

frappe.ui.form.on('YOUR_DOCTYPE', {
  setup(frm) {
    apply_button_formatter();
  },
  refresh(frm) {
    apply_button_formatter();
  }
});

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

.grid-static-col[data-fieldname="your_field_name"] .field-area {
  display: none !important;
}

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(cdn);
    }
  };

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

function handle_button_click(cdn) {
  const row = locals['YOUR_CHILD_DOCTYPE'][cdn];
  if (!row) return;

  frappe.msgprint(`Item: ${row.item_code}`);
}

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 render as empty cells. The workaround is to add a Data field, override its formatter to render button HTML, add CSS to keep it visible in edit mode, and intercept clicks using capture-phase event listeners.

## 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", "Assign Color")
4. What function should be called when the button is clicked? Just the name. (e.g. check_stock, assign_color)
5. Briefly, what should the function do? (e.g. "call a server API to check warehouse stock", "open a dialog to pick a color", "show item details in a popup")

## Step 2 — Tell the user to create the field
Based on the info gathered, tell the user:
"Go to Customize Form > [child DocType]. Add a Data field. For the field name, use [child_doctype_prefix]_[button_name] — prefixing with the doctype name prevents conflicts since the CSS for this is global. Mark it as 'In List View'. Set the label to whatever you want the column header to say. Save, then come back here."
Wait for confirmation before proceeding.
Ask the user to confirm the exact field name they used.

## Step 3 - Generate and place the code
Find the correct files in the app:
- JS: Look for an existing .js file for the parent DocType.
- CSS: The app's main CSS file, usually [app]/[app]/public/css/[app].css

If the JS file already has a frappe.ui.form.on('[Parent DocType]', { ... }) block, merge into it.
If no JS file exists for this doctype, create one and add the appropriate doctype_js entry in hooks.py.
If the CSS file doesn't exist, create it and ensure it's listed in app_include_css in hooks.py.

Generate the following code, substituting all placeholders:

### JS file content:
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 gridRow = btn.closest('.grid-row');
const cdn = gridRow && gridRow.dataset.name;
if (cdn) {
[function_name](frm, cdn);
}
};
frm.wrapper.addEventListener('click', frm._[function_name]_handler, true);
}

function [function_name](frm, cdn) {
// ROW DATA ACCESS - see note below
}

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 file content:
.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 - Fill in the action function
Based on what the user said the function should do, generate the correct function body.

Pattern A - Frontend only:
const row = locals['[CHILD_DOCTYPE]'][cdn];

Pattern B - Server call:
frappe.call({
method: '[app].[module].api.[method_name]',
args: { cdn: cdn },
callback: function(r) {
frm.reload_doc();
}
});

Pattern C - Both:
const row = locals['[CHILD_DOCTYPE]'][cdn];
frappe.call({ ... });

## Step 5 - Remind the user
After writing all code, tell the user:
- Run bench build and reload the page
- The CSS is global
- If they need a second button, run the prompt again with a different function name and field name