How to add custom button in DetailView

Hi guys,

Iā€™m new to suiteCRM and Iā€™m trying to understand how to add a button in the detail view of the Contacts module. I already have custom code in a php file that should be triggered when clicking the custom button, but I wanted to know more about the code I should use in the detailviewdefs.php to implement the button.

For now I have added this to the detailviewdefs.php file, into the buttons array :

5 =>
array (
     'customCode' => '<input type="button" class="button" value="Ask for QuickCRM Trial">'
 ),

Iā€™ve searched around to find how to trigger my php custom code (which will be loaded in custom/modules/Contacts/TrialEntryPoint.php) clicking this button but I probably miss something. I tried to load the custom code as it is but I donā€™t even see the button.

A bit of help would be much appreciated :wink:

Thanks.

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

Thank you @hassanizhar for this detailed and clear answer, I will try those steps.
Also, I found another solution without using Ajax call. I call my custom php code directly in an onclick parameter in the custom button tag :

onclick="document.location=\'index.php?entryPoint=my_entry_point&my_id={id}"

But your solution looks probably cleaner.

Thanks anyway for your time !

1 Like

Hi,
How can I create an action like this but change the field, for example, Status or other type text??

I tried this and it didnā€™t work. I still canā€™t see a button.