Issue Adding Icons/Buttons and Performing Actions with JavaScript in List View [contacts module]

SuiteCRM Forum - English Language
1

I am facing a challenge while attempting to add icons/buttons to the list view in SuiteCRM 8. I have followed the steps to add icons/buttons to the list view using JavaScript. However, the icons/buttons are not appearing as expected, and I suspect there may be an issue with my implementation.Here is a snippet of my PHP and JavaScript code:

public/legacy/custom/modules/Contacts/views/view.list.php

<?php

if (!defined('sugarEntry') || !sugarEntry) die('Not A Valid Entry Point');

require_once 'modules/Contacts/views/view.list.php';

class CustomContactsViewList extends ContactsViewList
{
    /**
     * Constructor
     *
     * @see SugarView::display()
     */
    public function __construct()
    {
        parent::__construct();
    }

    /**
     * @see SugarView::display()
     */
    public function preDisplay()
    {
        parent::preDisplay();

       
        $this->ss->assign('javascript', getJSPath('custom/modules/Contacts/js/custom_list.js'));
        

    }

    /**
     * @see SugarView::display()
     */
    public function display()
    {
        parent::display();

    }
}
?>

// custom_list.js
document.addEventListener('DOMContentLoaded', function () {
    // Wait for the DOM to be fully loaded
    var rows = document.querySelectorAll('.list-view tbody tr');

    rows.forEach(function (row) {
        // Add your logic to identify and manipulate each row
        var id = row.getAttribute('data-id'); // Get the record ID from the row

        // Example: Add a button to the last column in each row
        var lastCell = row.querySelector('td:last-child');
        
        // Create a button element
        var button = document.createElement('button');
        button.innerHTML = 'CustomButton'; // Set the text for the button
        button.className = 'custom-button'; // Set a class for styling if needed
        button.addEventListener('click', function () {
            // Handle button click event if needed
            console.log('Button Clicked for Record ID ' + id);

            alert('Button Clicked for Record ID ' + id);
        });

        // Append the button to the last cell
        lastCell.appendChild(button);
    });
});

Thank you in advance for your help. Any insights or suggestions will be highly appreciated.

2

Hey @Anitha,

SuiteCRM 8 uses angular, I don’t think that code will work.

I searched the forum for suitecrm 8 add button and found the following which might help you:

The following page on the documentation might also help, since the threads above mention the Process:

Lastly, I’ve also tried to search for actions in all listviewdefs.php files. Found the Accounts ‘records-to-target-list’ bulk action example on the core code which might be useful:

file: public/legacy/modules/Accounts/metadata/listviewdefs.php

sample code:

        'bulkActions' => [
            'actions' => [
                'records-to-target-list' => [
                    'key' => 'records-to-target-list',
                    'labelKey' => 'LBL_ADD_TO_PROSPECT_LIST_BUTTON_LABEL',
                    'modes' => ['list'],
                    'acl' => ['edit'],
                    'aclModule' => 'prospect-lists',
                    'params' => [
                        'selectModal' => [
                            'module' => 'ProspectLists'
                        ],
                        'allowAll' => false,
                        'max' => 200
                    ]
                ],

Then by searching for records-to-target-list in the codebase found the following, which should be the handler for the records-to-target-list:

core/backend/Process/LegacyHandler/AddRecordsToTargetListBulkActionHandler.php

1 Like