How to add custom button in DetailView

šŸ‘Øā€šŸ’» Development Help
2

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