Frappe에서 Child Table에 클릭 가능한 버튼을 추가하기 위해 전역 포매터, CSS 레이어 제어, 클릭 이벤트 인터셉팅을 조합해 구현

Context

Frappe는 Child Table에서 버튼 필드를 렌더링하지 않는다. 버튼 필드을 추가해도 빈 셀로만 표시된다.

Child Table의 포매터는 로컬이 아닌 전역 포매터에 의해 매번 덮어씌워진다. 또한 각 셀은 정적 표시 레이어(static-area)와 편집 레이어(field-area)의 2개 계층으로 구성되어 있어 버튼이 편집 모드에서 사라진다. Frappe가 모든 행에 클릭 리스너를 추가하므로 버튼 클릭 시 행 전체가 열리는 문제도 발생한다.

Technical Solution

• 전역 포매터 오버라이드: frappe.meta.docfield_map의 전역 포매터를 직접 수정해 버튼 HTML을 렌더링하도록 변경
• CSS 계층 제어: 편집 모드에서도 버튼이 표시되도록 static-area 레이어를 항상 보이게 하는 CSS 추가
• 클릭 이벤트 인터셉팅: 버블 페이즈에서 동작하는 Frappe의 행 열기 리스너보다 먼저 캡처 페이즈에서 클릭 이벤트 처리
• 행 식별: 포매터에서 doc 객체에 접근할 수 없으므로 Child Table의 HTML 구조를 이용해 클릭된 행의 CDN(고유 ID) 파악
• 데이터 접근 패턴: 행 데이터는 locals[CHILD_DOCTYPE][cdn]의 프론트엔드 메모리 저장소에서 조회하거나, 서버 로직 필요 시 화이트리스트 메서드로 frappe.get_doc() 호출

Key Takeaway

Frappe처럼 복잡한 UI 계층을 가진 프레임워크에서 기본 제공되지 않는 기능을 추가할 때는 전역 설정, CSS 제어, 이벤트 캡처 페이즈를 함께 고려해야 한다. 단일 레이어 수정만으로는 부족하며 렌더링, 가시성, 상호작용의 3가지 문제를 동시에 해결해야 한다.