How to trigger a client-side popup from a Frappe workflow button?

ERPNext
, ,
1

Hi all,

I’m working on a Frappe app for managing PF Applications. Here’s my scenario:

  • I have a workflow for PF Applications with standard states: Draft → Submitted → Approved → Rejected.

  • I want to keep the standard workflow buttons (e.g., the “Approve” button) and not replace them with custom buttons.

  • When a user clicks Approve, I want a popup dialog to appear before finalizing the approval, where the user can fill in additional fields like UI Number and Number ID.

  • Currently, Frappe workflows allow Update Field → approve = 1 when a workflow transition occurs. My idea was to depend on a checkbox field updated by the workflow and trigger the popup client-side based on that field.

Problem:

  • Field triggers (approve: function(frm){}) do not fire when the workflow updates the field server-side.

  • MutationObservers or DOM hacks fail because workflow buttons are handled internally by Frappe’s JS.

  • Server-side hooks (before_workflow_action, on_update) work for automatic field updates, emails, or logs, but cannot show client-side popups.

Concept / Requirement:

  1. Workflow button must stay as-is.

  2. Popup must appear client-side when the workflow approves, allowing users to input required fields.

  3. Workflow must proceed normally after the popup.

  4. Prefer a solution that combines workflow automation with optional popup input.

I’d love advice on:

  • Best practices for integrating client-side popups with Frappe workflow buttons.

  • Whether relying on a checkbox field updated by workflow is the most reliable approach.

  • Any alternative patterns that let me keep workflow buttons while capturing user input before approval.

Thanks in advance for your guidance!

2

Hi there,

I’m not aware of any built-in way to do this. As I understand it, the client-side before_workflow_action hook doesn’t allow you to prevent default behavior.

You could do it with a client script, however. On refresh, you’d just clear out the workflow actions made by default and then replace them with whatever code you want. For reference, the default behavior is defined here:

1 Like
3

Helps a lot thank you