How to add custom button in DetailView

To add a custom button to the detail view of the Contacts module in SuiteCRM, you can follow these steps:

  1. Open the detailviewdefs.php file for the Contacts module in a code editor. You can find this file in the custom/modules/Contacts/metadata/ directory.
  2. Find the ā€˜buttons’ array in the file. This array contains the configuration for the buttons that appear in the detail view.
  3. Add a new element to the ā€˜buttons’ array for your custom button. Here’s an example:

rustCopy code

array (
  'customCode' => '<button id="custom_button" type="button" class="btn btn-primary">Custom Button</button>',
  'type' => 'button',
  'name' => 'custom_button',
  'label' => 'Custom Button',
  'showOn' => 'detail',
  'acl_action' => 'view',
  'css_class' => 'btn-primary',
  'icon' => 'fa-check-square-o',
  'sequence' => 5,
),

This code will add a button with the label ā€œCustom Buttonā€ to the detail view of Contacts. When the button is clicked, it will trigger the JavaScript function associated with the button’s ā€˜customCode’ property.

  1. Save the detailviewdefs.php file and refresh your SuiteCRM page to see the button.
  2. To trigger your custom PHP code when the button is clicked, you’ll need to add some JavaScript code that sends an AJAX request to a PHP endpoint. You can add this code to the ā€˜customCode’ property of your button configuration. Here’s an example:

lessCopy code

array (
  'customCode' => '<button id="custom_button" type="button" class="btn btn-primary">Custom Button</button>
  <script>
    $(document).ready(function() {
      $("#custom_button").click(function() {
        $.ajax({
          url: "index.php?module=Contacts&action=my_custom_action",
          success: function(result) {
            alert("Success!");
          },
          error: function(xhr, status, error) {
            console.error(xhr.responseText);
          }
        });
      });
    });
  </script>',
  'type' => 'button',
  'name' => 'custom_button',
  'label' => 'Custom Button',
  'showOn' => 'detail',
  'acl_action' => 'view',
  'css_class' => 'btn-primary',
  'icon' => 'fa-check-square-o',
  'sequence' => 5,
),

In this example, the JavaScript code uses jQuery to add a click event listener to the button. When the button is clicked, it sends an AJAX request to the ā€˜my_custom_action’ endpoint in the Contacts module’s controller. You can replace ā€˜my_custom_action’ with the name of your own PHP endpoint.

  1. In the PHP endpoint that you’ve defined, you can add your custom PHP code to handle the request and perform the desired action.

I hope this helps you to add a custom button to the detail view of Contacts in SuiteCRM!

1 Like