Suitecrm 8.7.0 action button in module detailview

With SuiteCRM version 8.7.0, I want to create a new button ā€˜Connection dataā€™ in the detail view of the Accounts module, which would open a new window (for example, using JavaScript window.open('https://google.com');) when clicked. How can I do this? I have added the translation and the button, but Iā€™m having trouble implementing the logic for the button."

defaultExt/config/modules/Accounts/recordview/actions/connection-data.php:

<?php

namespace Symfony\Component\DependencyInjection\Loader\Configurator;

use Symfony\Component\DependencyInjection\ContainerBuilder;

return static function (ContainerBuilder $container): void {
    $actions = $container->getParameter('module.recordview.actions') ?? [];
    $modules = $actions['modules'] ?? [];
    $accounts = $modules['accounts'] ?? [];
    $recordActions = $accounts['actions'] ?? [];

    $recordActions['connection-data'] = [
        'key' => 'account-connection-data',
        'labelKey' => 'LBL_CONNECTION_DATA',
        'asyncProcess' => true,
        'modes' => ['detail'],
        'acl' => ['view'],
        'aclModule' => 'Accounts',
    ];

    $accounts['actions'] = $recordActions;
    $modules['accounts'] = $accounts;
    $actions['modules'] = $modules;
    $container->setParameter('module.recordview.actions', $actions);
};

Neither one nor the other is related to my taskā€¦

Could you please help us to get what the new window would load.Will it load an internal Suite module action page like contacts/record/id or open an external link like https://www.suitecrm.com website.

I need to call the window.open() JavaScript function and it will open the link that is stored in a specific field. But this is just an example. The point is that I want the JavaScript code to be executed when that button is pressed.

Youā€™re operating inside a front-end framework called Angular. Youā€™re not supposed to use straight JS there, or to do operations circumventing the screen structure (modules, components, event handlers, etc).

I realize this can be a surprise and a disappointment to old-school web developers (I am no better than them) but it is a good thing all around, because the front-end is a properly designed architecture instead of a jumbled mess.

Less quick-wins customizing the UI, but a much more maintainable, stable and functional front-end in the long run.

If I need a temporary solution with JavaScript code, where and how should I insert it?

I think as a temporary solution, setting the view as classic by overriding module_routing.yaml and record: false to execute JavaScript Code would help.

You can find a file for legacy.module_routing at the below location.

config/services/module/module_routing.yaml

You can change the module to legacy by setting it to false.


   contacts:
      index: true // true means suite 8 view
      list: true
      record: false // false means classic view

In any case, I think to fully utilize SuiteCRM version 8, Iā€™ll need to learn how to work well with Angular and Symfony. Iā€™m trying to learn them, but everything is still a bit different than SuiteCRM. For example, if I add a new button with code to the Accounts module defaultExt/config/modules/Accounts/recordview/actions/connection-data.php:

<?php

namespace Symfony\Component\DependencyInjection\Loader\Configurator;

use Symfony\Component\DependencyInjection\ContainerBuilder;

return static function (ContainerBuilder $container): void {
    $actions = $container->getParameter('module.recordview.actions') ?? [];
    $modules = $actions['modules'] ?? [];
    $accounts = $modules['accounts'] ?? [];
    $recordActions = $accounts['actions'] ?? [];

    $recordActions['connection-data'] = [
        'key' => 'account-connection-data',
        'labelKey' => 'LBL_CONNECTION_DATA',
        'asyncProcess' => true,
        'modes' => ['detail'],
        'acl' => ['view'],
        'aclModule' => 'Accounts',
    ];

    $accounts['actions'] = $recordActions;
    $modules['accounts'] = $accounts;
    $actions['modules'] = $modules;
    $container->setParameter('module.recordview.actions', $actions);
};

How do I make it so that when I click that button, a popup is called and it contains a template where information can be entered? Provide a minimal example. My task is to make it so that when you click the button, a popup appears and it contains, for example, an input field and a ā€œSendā€ button. I canā€™t find such an example in the documentation.

That example youā€™re trying is for back-end actions. What youā€™re looking for are ways to do custom front-end work. That is where Angular comes in.

But I am afraid there are still not tutorials, and I donā€™t think your kind of thing is detailed anywhere. You can still progress using Angular skills, but if you donā€™t have them (like me, I am only beginning to learn) it is a bit hard.

Has anyone done something similar with SuiteCRM version 8? A button in a module, and when you click it, a custom form pops up and works. It would be great if you could send an example.

I know of examples in core SuiteCRM front-end where you press a button, and a modal opens up to get user confirmation before proceeding.

If you have set up your IDE, and you can build the front-end, and you can step through the code as it executes, that would be a good starting place. You would only need to copy that mechanism and make that modal have an input box instead of just a confirmation button.

Please specify which files you are referring to?

Please refer to the message modal component which is used as popup modals at many places. The component file is located at {ROOT}\core\app\core\src\lib\components\modal\components\message-modal\message-modal.component.ts

What @Harshad said is correct :ok_hand:

If you want an example of this being triggered in the context of a record action, follow the trace of this action:

and search for selectModal in the front-end code.