Adding a Custom Button to an Arbitrary Form using Form Script

1. Overview

This article provides details about adding a custom button to a record form in an object. This is achieved using the form script capability of an object.

2. Prerequisites

To perform the actions here, you should have a basic understanding of JavaScript, and jQuery. Also, you should have basic knowledge about adding or getting the elements from DOM.

3. Challenges

Adding a custom button in a record form has the following challenges:

·        Creating a button element in DOM.

·Getting the nearby element where you want to add the button.

·        Attaching a click event handler on the button.

4. Procedure

1.      Create an object and name it as Case.

2.      To add a custom button for the new UI

  • Go to Settings > Objects.
  • Select the object.
  • Click Forms.
  • Select a layout.
  • Click Form Scripts.
  • Click Edit.
  • Click the New UI Script tab.

In the On Load Script tab, write the following code:

Note: This is an example for your reference where we are adding a button called Do Something.

setTimeout(function () {

  // Created a button to render on the form
  var html = "<button type='button' id='customButton'"
    + " class='sag-secondary-cancel-button mat-button'"
    + ">Do Something</button>";

  try {

     // Using jQuery to select an element also you can perform some other way to find the element usign document slector
     var cancelButtonEleRef = $('button.sag-secondary-cancel-button:contains("Cancel")')

    // Append the element on the DOM
    $(cancelButtonEleRef).parent().prepend(html);

    // Added a click event listener to the DOM
    $("#customButton").click(function () {
      console.log("jQuery/JavaScript code placed here executes when the button is clicked");
    });

  } catch (e) {
    alert(e);
  }
}, 2000);

Preview:

Custom button preview in new UI

Fig-1: “Do something” button added before the Cancel button.

3.  To add a custom button in the legacy UI:

  • Go to Settings > Objects
  • Select an object.
  • Click Forms.
  • Select a layout.
  • Click Form Scripts.
  • Click Edit.
  • Click the Legacy UI Script tab.

In the On Load Script tab, write the following code:

Note: This is an example for your reference where we are adding a button called Do Something.

// Created a button to render on the form
var html = "<button type='button' id='customButton'"
  + " class='lj-button fg-button ui-state-default ui-corner-all'"
  + ">Do Something</button>";

try {
  // Getting the DOM element using jQuery, also you can perform some other way to find the element usign document slector
  var submitButtonEleRef = $(".case_details_forms").find(".case_submit_button")

  // Append the element on the DOM
  submitButtonEleRef.parent().prepend(html);

  // Added a click event listener to the DOM
  $("#customButton").click(function () {
    console.log("jQuery/JavaScript code placed here executes when the button is clicked");
  });

} catch (e) {
  alert(e);
};

Pre-view:

custom button preview in old ui

5. Summary

  • Created a button element in DOM and appended in the target element.
  • Used the jQuery selector to get the target element.
  • Added a click event handler for the custom button.

6. Considerations

  • We do not recommend you to do DOM manipulation in the new UI using Form & Field scripts. However, we do not restrict you from using it.

7. Disclaimer

  • DOM elements like id, class, and so on may change in the future without prior notice. Hence, we do not recommend you to use DOM manipulation.
  • Here the query selector is specific to the English language. For multi-lingual support, please change the query selector.

image.png

image.png