Adding a Button in WebForm

Sebin_P_Sabu · February 14, 2023, 6:01am

Hy ,

Can we add a custom button like “Send OTP” in Web form?
If yes can you share the code please…

It’s urgent !!

VINOTH · February 14, 2023, 6:05am

This is the code to add a custom buttom.

frappe.ui.form.on('FormName', {
    refresh: function(frm) {
        frm.add_custom_button(__('Send OTP'), function() {
            // add your button code here
        });
    }
});

Thank you.

Sebin_P_Sabu · February 14, 2023, 6:12am

@VINOTH Thanks for the reply ,

This code is to add a custom button in frappe form right? My requirement is adding a custom button in a webfrom which is published in website

Can we do that?

VINOTH · February 14, 2023, 6:20am

@Sebin_P_Sabu
For this you can use the frappe.web_form.on function to create the button.

frappe.web_form.on('Web Form Name', 'onload', function(frm) {
    var button = $('<button class="btn btn-primary btn-xs">Send OTP</button>');
    button.click(function() {
        // add your button code here
    });
    $('div.web-form-header-right').append(button);
});

Change the “Web Form Name” with the name of the web form where you want to add the button.

Now, Add your button code inside the function that is called when the button is clicked.
For example, you might use the frappe.call function to send an OTP to the user.
Try this method this might help you.

Thank you.