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:
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:
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.