How to add custom button in DetailView

[Sorel]

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

Thanks.

[hassanizhar]

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.

4. Save the detailviewdefs.php file and refresh your SuiteCRM page to see the button.
5. 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.

6. 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!

[Sorel]

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 !

[solrac007]

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