SuiteCRM Developer Insights - Adding Quick Charts

This week Clemente Raposo, Lead Developer of SuiteCRM, takes you through adding new Quick Charts to the SuiteCRM 8 sidebar.

Undoubtedly, Quick Charts are a really great way to get insights into key information fast. They are typically based on the data in List View, working with the standard filters to drill into the data you need. Otherwise, they can also work independently of the List View data.

Therefore, knowing where to configure Quick Charts and ensuring they are performant is highly important. Watch this week’s video to learn all about adding them, and be sure to check below to get the code example to help you get started.

For those of you who are ready to get started right away, below you will find the code sample from the video.

Copy to Clipboard

public/legacy/custom/Extension/application/Ext/Language/en_us.my_contacts_by_city.php

Copy to Clipboard

<?php

namespace Symfony\Component\DependencyInjection\Loader\Configurator;

use Symfony\Component\DependencyInjection\ContainerBuilder;

return static function (ContainerBuilder $container): void {

$sidebarWidgets = $container->getParameter('module.listview.sidebar_widgets') ?? [];
    $modules = $sidebarWidgets['modules'] ?? [];
    $contactsConfig = $modules['contacts'] ?? [];
    $contactsWidgets = $contactsConfig['widgets'] ?? [];

$contactsWidgets['charts'] = [
        'type' => 'chart',
        'labelKey' => 'LBL_QUICK_CHARTS',
        'options' => [
            'toggle' => true,
            'headerTitle' => false,
            'charts' => [
                [
                    'chartKey' => 'my-contacts-by-city',
                    'statisticsType' => 'my-contacts-by-city',
                    'chartType' => 'vertical-bar',
                    'labelKey' => 'LBL_MY_CONTACTS_BY_CITY',
                    'chartOptions' => []
                ]
            ]
        ],
        'acls' => [
            'Contacts' => ['view', 'list']
        ]
    ];

$contactsConfig['widgets'] = $contactsWidgets;
    $modules['contacts'] = $contactsConfig;
    $sidebarWidgets['modules'] = $modules;

$container->setParameter('module.listview.sidebar_widgets', $sidebarWidgets);
};

extensions/defaultExt/config/services/module/listview/sidebar_widgets/my_contacts_by_city_chart.php

Copy to Clipboard

<?php

namespace App\Extension\defaultExt\modules\Contacts\Statistics\Series;

use App\Data\LegacyHandler\ListDataQueryHandler;
use App\Engine\LegacyHandler\LegacyHandler;
use App\Engine\LegacyHandler\LegacyScopeState;
use App\Module\Service\ModuleNameMapperInterface;
use App\Statistics\Entity\Statistic;
use App\Statistics\Model\ChartOptions;
use App\Statistics\Service\StatisticsProviderInterface;
use App\Statistics\StatisticsHandlingTrait;
use Symfony\Component\HttpFoundation\Session\SessionInterface;

class MyContactsByCity extends LegacyHandler implements StatisticsProviderInterface
{
    use StatisticsHandlingTrait;

public const KEY = 'my-contacts-by-city';

/**
     * @var ListDataQueryHandler
     */
    private $queryHandler;

/**
     * @var ModuleNameMapperInterface
     */
    private $moduleNameMapper;

/**
     * MyContactsByCity constructor.
     * @param string $projectDir
     * @param string $legacyDir
     * @param string $legacySessionName
     * @param string $defaultSessionName
     * @param LegacyScopeState $legacyScopeState
     * @param ListDataQueryHandler $queryHandler
     * @param ModuleNameMapperInterface $moduleNameMapper
     * @param SessionInterface $session
     */
    public function __construct(
        string                    $projectDir,
        string                    $legacyDir,
        string                    $legacySessionName,
        string                    $defaultSessionName,
        LegacyScopeState          $legacyScopeState,
        ListDataQueryHandler      $queryHandler,
        ModuleNameMapperInterface $moduleNameMapper,
        SessionInterface          $session
    )
    {
        parent::__construct($projectDir, $legacyDir, $legacySessionName, $defaultSessionName, $legacyScopeState, $session);
        $this->queryHandler = $queryHandler;
        $this->moduleNameMapper = $moduleNameMapper;
    }

/**
     * @inheritDoc
     */
    public function getHandlerKey(): string
    {
        return $this->getKey();
    }

/**
     * @inheritDoc
     */
    public function getKey(): string
    {
        return self::KEY;
    }

/**
     * @inheritDoc
     */
    public function getData(array $query): Statistic
    {
        $this->init();
        $this->startLegacyApp();
        global $current_user;

// Step 1 - Validate Input

[$module, $id, $criteria, $sort] = $this->extractContext($query);

if (empty($module) || $module !== 'contacts') {
            return $this->getEmptySeriesResponse(self::KEY);
        }

if (empty($current_user) || empty($current_user->id)) {
            return $this->getEmptySeriesResponse(self::KEY);
        }

$legacyName = $this->moduleNameMapper->toLegacy($module);
        $bean = $this->getBean($legacyName);

if (!$bean instanceof \SugarBean) {
            return $this->getEmptySeriesResponse(self::KEY);
        }

// Step 2 - Get base query and add our conditions

$query = $this->queryHandler->getQuery($bean, $criteria, $sort);
        $query = $this->generateQuery($query, $current_user->id);
        $result = $this->runQuery($query, $bean);

// Step 3 - Build Series output response

$nameField = 'primary_address_city';
        $valueField = 'total';

$series = $this->buildSingleSeries($result, $nameField, $valueField);

$chartOptions = new ChartOptions();
        $chartOptions->yAxisTickFormatting = true;

$statistic = $this->buildSeriesResponse(self::KEY, 'int', $series, $chartOptions);

$this->close();

return $statistic;
    }

/**
     * @param string $legacyName
     * @return bool|\SugarBean
     */
    protected function getBean(string $legacyName)
    {
        return \BeanFactory::newBean($legacyName);
    }

/**
     * @param array $query
     * @param $bean
     * @return array
     */
    protected function runQuery(array $query, $bean): array
    {
        // send limit -2 to not add a limit
        return $this->queryHandler->runQuery($bean, $query, -1, -2);
    }

/**
     * @param array $query
     * @param string $currentUserId
     * @return array
     */
    protected function generateQuery(array $query, string $currentUserId): array
    {
        global $db;

$query['select'] = 'SELECT contacts.primary_address_city, COUNT(contacts.primary_address_city) as total';
        $query['where'] .= ' AND contacts.primary_address_city is not null AND contacts.assigned_user_id = ' . "'" .$db->quote($currentUserId) . "'";
        $query['order_by'] = '';
        $query['group_by'] = ' GROUP BY contacts.primary_address_city DESC';

return $query;
    }
}

extensions/defaultExt/modules/Contacts/Statistics/Series/MyContactsByCity.php

This sample can be used as a base example to add your own custom Quick Charts to the list view sidebar in SuiteCRM 8. Furthermore, you can learn more about ngx-charts the chart engine used in SuiteCRM 8 here

If you are looking for more development insights, the Development Team here at SalesAgility have created instructor-led master classes. 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 – Adding Quick Charts

About SuiteCRM

Share This Story, Choose Your Platform!