SuiteCRM Developer Insights - Record Thread Widgets

This week Clemente Raposo, Lead Developer of SuiteCRM, explains how to use Record Thread Widgets in SuiteCRM 8.

One of the key goals for building SuiteCRM 8 is to remove hardcoded module-specific features and make them configurable and reusable. A good example of this is the Record Thread Widget.

The Record Thread Widget has been built in a configuration-driven way and includes features that make it very flexible like a row/column structure to be able to support a multitude of layouts, a record creation area to allow records to be added quickly, and record actions that allow you to add, edit and delete.

The Case updates feature is one such example of a Record Thread Widget implemented in a configurable way, that you can use to display records of nearly any module on a record view. All you need is a well-defined one-to-many relationship and some configuration. So, in today’s example, we are going to demo a way to use this widget, to display a useful Notes area on the Accounts record view.

Watch this week’s video to learn all about the Record Thread Widget, and be sure to check below to get the code example to help you get started.

For those of you who are keen to get started, you can find the code sample from the video below:

Copy to Clipboard

<?php

namespace Symfony\Component\DependencyInjection\Loader\Configurator;

use Symfony\Component\DependencyInjection\ContainerBuilder;

return static function (ContainerBuilder $container): void {

$bottomWidgets = $container->getParameter('module.recordview.bottom_widgets') ?? [];
    $modules = $bottomWidgets['modules'] ?? [];
    $accounts = $modules['accounts'] ?? [];
    $widgets = $accounts['widgets'] ?? [];

$widgets[] = [
        'type' => 'record-thread',
        'labelKey' => 'LBL_NOTES',
        'allowCollapse' => true,
        'options' => [
            'recordThread' => [
                'module' => 'notes',
                'class' => '',
                'maxListHeight' => 0,
                'filters' => [
                    'parentFilters' => [
                        'id' => 'parent_id',
                    ],
                    'static' => [
                        'parent_type' => [
                            'field' => 'parent_type',
                            'operator' => '=',
                            'values' => ['Accounts']
                        ]

],
                    'orderBy' => 'date_entered',
                    'sortOrder' => 'DESC',
                ],
                'item' => [
                    'itemClass' => 'pt-1 pb-1 w-100',
                    'layout' => [
                        'header' => [
                            'rows' => [
                            ],
                        ],
                        'body' => [
                            'class' => 'border bg-transparent',
                            'rows' => [
                                [
                                    'align' => 'center',
                                    'justify' => 'start',
                                    'class' => 'flex-grow-1 item-content pb-1',
                                    'cols' => [
                                        [
                                            'field' => [
                                                'name' => 'assigned_user_name',
                                                'readonly' => true
                                            ],
                                            'labelDisplay' => 'none',
                                            'modes' => ['detail'],
                                            'labelModes' => ['detail'],
                                            'hideIfEmpty' => true,
                                            'class' => 'font-weight-bold item-title pr-2'
                                        ],
                                        [
                                            'field' => [
                                                'name' => 'name',
                                            ],
                                            'labelDisplay' => 'top',
                                            'labelClass' => 'pr-1 m-0',
                                            'labelModes' => ['edit'],
                                            'class' => 'font-weight-bold flex-fill pr-1'
                                        ],
                                        [
                                            'class' => 'ml-auto',
                                            'actionSlot' => true,
                                        ],
                                    ],
                                ],
                                [
                                    'align' => 'center',
                                    'justify' => 'start',
                                    'class' => 'flex-grow-1 item-content pb-1',
                                    'cols' => [
                                        [
                                            'field' => [
                                                'name' => 'description',
                                                'readonly' => false
                                            ],
                                            'labelDisplay' => 'top',
                                            'labelModes' => ['edit'],
                                            'class' => 'flex-fill'
                                        ],
                                    ],
                                ],
                            ],
                        ],
                        'actions' => [
                            [
                                'key' => 'edit',
                                'labelKey' => 'LBL_EDIT',
                                'klass' => ['btn btn-outline-primary btn-xs'],
                                'modes' => ['detail'],
                                'acl' => [],
                            ],
                            [
                                'key' => 'cancel',
                                'labelKey' => 'LBL_CANCEL',
                                'klass' => ['btn btn-outline-primary btn-xs'],
                                'modes' => ['edit'],
                                'acl' => [],
                            ],
                            [
                                'key' => 'save',
                                'labelKey' => 'LBL_SAVE_BUTTON_LABEL',
                                'klass' => ['btn btn-outline-primary btn-xs'],
                                'modes' => ['edit'],
                                'acl' => [],
                            ],
                            [
                                'key' => 'delete',
                                'labelKey' => 'LBL_DELETE',
                                'asyncProcess' => true,
                                'params' => [
                                    'displayConfirmation' => true,
                                    'confirmationLabel' => 'NTC_DELETE_CONFIRMATION',
                                ],
                                'klass' => ['btn btn-outline-danger btn-xs'],
                                'modes' => ['detail'],
                                'acl' => [],
                            ],
                        ],
                    ],
                ],
                'create' => [
                    'presetFields' => [
                        'parentValues' => [
                            'id' => 'parent_id',
                        ],
                        'static' => [
                            'parent_type' => 'Accounts'
                        ],
                    ],
                    'layout' => [
                        'header' => ['rows' => []],
                        'body' => [
                            'rows' => [
                                [
                                    'justify' => 'start',
                                    'class' => 'flex-grow-1',
                                    'cols' => [
                                        [
                                            'field' => [
                                                'name' => 'name',
                                            ],
                                            'labelDisplay' => 'top',
                                            'class' => 'flex-fill pr-2'
                                        ],
                                    ]
                                ],
                                [
                                    'justify' => 'start',
                                    'class' => 'flex-grow-1',
                                    'cols' => [
                                        [
                                            'field' => [
                                                'name' => 'description',
                                            ],
                                            'labelDisplay' => 'top',
                                            'class' => 'flex-fill pr-2'
                                        ],
                                    ]
                                ]

]
                        ]
                    ],
                ],
                'loadMorePosition' => "bottom",
            ],
        ],
    ];

$accounts['widgets'] = $widgets;
    $modules['accounts'] = $accounts;
    $bottomWidgets['modules'] = $modules;
    $container->setParameter('module.recordview.bottom_widgets', $bottomWidgets);
};

extensions/defaultExt/config/modules/Accounts/recordview/bottom_widgets/notes.php

The above can be used as an example on how to use Record Thread Widgets in SuiteCRM 8.

If you are looking for more development insights, the Development Team here at SalesAgility have created instructor-led Masterclasses. Designed for developers, covering both SuiteCRM 8.x and SuiteCRM 7.x, head over to the MasterClasses to find out more.

About SuiteCRM

SuiteCRM is one of the world’s most popular CRM applications. Our feature-rich enterprise-ready alternative to Salesforce enables your sales teams to sell, market & service smarter. Providing all the benefits of CRM at substantially lower costs, with the freedoms and flexibility of Open Source.

You can download and host SuiteCRM on your own servers, in the public cloud / private cloud or try our SAAS offering SuiteCRM Hosted. It is the ultimate freedom, allowing you to stay in full control over your business data. Try SuiteCRM for free here.

Help support the SuiteCRM project by becoming a sponsor today!

SuiteCRM Developer Insights – Record Thread Widgets

About SuiteCRM

Share This Story, Choose Your Platform!