Customizing Web Forms

You and I know this event exists, but it's missing from the Frappe documentation, so I was thinking of adding it. 😉

What this event do?

The after_save event in Frappe's web forms is a powerful hook that allows you to execute custom logic immediately after a web form submission is saved to the database. Here's a detailed explanation of this event:

• Timing: It triggers after the form data has been successfully saved, but before the user is redirected to the success page.

• Purpose: This event is ideal for performing additional operations or triggering secondary processes based on the submitted data.

• Usage: You can define an after_save function in your web form's JavaScript code to handle this event.

• Common use cases:

  • Sending confirmation emails
  • Updating related records
  • Triggering external API calls
  • Performing complex calculations or validations

• Example implementation:

  frappe.web_form.after_save = function() {
  
      // Send confirmation email
      frappe.call({
          method: 'frappe.core.doctype.communication.email.make',
          args: {
              recipients: email,
              subject: 'Thank you for your submission',
              content: 'We\\'ve received your form submission.'
          }
      });
  }
  

By leveraging the after_save event, you can significantly extend the functionality of your web forms and create more dynamic, responsive user experiences.