Enhancing Interaction with Empress's Add Custom Button Feature

Guides & Tutorials
1

Introduction

Welcome to this easy-to-follow guide on how to add custom buttons to your Empress forms. This feature, Add Custom Button, is designed to improve your engagement with users by providing a more interactive experience.

Understanding the Add Custom Button Feature

The Add Custom Button feature allows you to introduce customized buttons into your Empress forms. These buttons can be programmed to perform specific tasks upon being clicked, further enhancing the functionality of your forms.

This feature can be extremely beneficial for businesses, as it offers a way to streamline and automate various operations. For instance, you may have a form where you want to add a button that, when clicked, automatically fills in certain fields, sends an email, or triggers an external process.

How to Add a Custom Button

Let’s break down how to use this feature, step-by-step:

1. Listen for a Form Event

The process begins by setting up an event listener for the ‘refresh’ event, which is triggered every time the form is refreshed:

frappe.ui.form.on("Event", "refresh", function(form) {

This piece of code simply tells Empress to pay attention to the ‘refresh’ event on your form.

2. Define Your Custom Button

Next, you’ll define your custom button within this event. You can choose any name for the button. In this example, we’re calling it “Do Something”:

form.add_custom_button("Do Something", function() {

This code adds a custom button labelled “Do Something” to your form whenever it’s refreshed.

3. Define the Button’s Action

Now, you’ll define what happens when the button is clicked. In this case, we’re setting up two variables, subject and eventType, and assigning them the values of form.doc.subject and form.doc.event_type respectively:

var subject = form.doc.subject;
var eventType = form.doc.event_type;

This means that when the button is clicked, it will pull the current subject and event type from the form.

4. Set Up an AJAX Request

Finally, you’ll use these variables in an AJAX request to a specific URL:

$.ajax({
    url: "http://example.com/just-do-it",
    data: {
        "subject": subject,
        "event_type": eventType
    }
});

This code sends an AJAX request to “http://example.com/just-do-it”, passing along the subject and eventType data.

Summing It Up

The Add Custom Button feature is a powerful tool that can significantly enhance the usability of your Empress forms, allowing for greater customization and interactivity. By following this guide, you can easily incorporate custom buttons into your forms and define their actions to suit your specific business needs.

For more information or assistance, feel free to contact our support team or visit our comprehensive resource center.