Tutorial - How to create a bootstrap dashboard progress cards widget inside a dashlet

[item]

Hello @telecastg,
do you think, we can "name" you wonderfull extension : kanban dashlet ?
when i see the print-screen.. i think that

Best regards

[telecastg]

I'm glad that you like it :-)

I am currently working on improving functionality by allowing calculated fields and range grouped values to be used as criteria instead of being limited to an enum field. Will post any progress.

[tothewine]

great stuff! for such things i was using the iframe widget pointing at a custom entrypoint but this is way cleaner!

[telecastg]

You're very welcome :-)

[item]

telecastg

Waouw nice work man.. congratualtion .. thanks for the community

Best Regards

[telecastg]

Update: Please note that the free version of this extension has been deprecated and no longer available.

This tutorial describes how to create a progress card widget as show below, using the new free extension control-board-for-espocrm https://github.com/telecastg/control-board-for-espocrm

Please note that this implementation requires the installation of the control-board-for-espocrm extension AND some custom coding.

Use Case:
Develop a progress cards type widget, inside a dashlet, that will illustrate the number of Service Tickets processed during a given period, grouped by the ticket "status" field.

Each card will be color coded according to the "status" value and will have an icon which when clicked will trigger the display of a list of Service Tickets included in the card count.

The User shall have the ability to determine the time period during which the Service Tickets are being analyzed.

Step 1:
Download and install the control board extension. https://github.com/telecastg/control-board-for-espocrm

Step 2:
Create the custom dashlet definition
custom/Espo/Custom/Resources/metadata/dashlets/ServiceTicketsByStatus.json

{
    "view":"custom:views/service-ticket/dashlets/service-tickets-by-status",
    "instrumentView": "control-board:views/dashlets/instruments/progress-cards",
    "entityType": "ServiceTicket",
    "criteriaScope": "ServiceTicket",
    "criteriaAttribute": "status",
    "criteriaAttributeDisplayMap": [
        {"attribute": "Received", "class": "danger", "icon": "fas fa-ticket-alt"},
        {"attribute": "Allocated", "class": "warning", "icon": "fas fa-ticket-alt"},
        {"attribute": "Completed", "class": "success", "icon": "fas fa-ticket-alt"},
        {"attribute": "Canceled", "class": "info", "icon": "fas fa-ticket-alt"}
    ],
    "options": {
        "fields": {
            "title": {
                "type": "varchar",
                "required": true
            },
            "dateFrom": {
                "type": "date",
                "required": false
            },
            "dateTo": {
                "type": "date",
                "required": false
            },
            "dateFilter": {
                "type": "enum",
                "options": ["currentYear", "currentQuarter", "currentMonth", "ever", "between"],
                "default": "currentYear",
                "translation": "Global.options.dateSearchRanges"
            }
        },
        "layout": [
            {
                "rows": [
                    [
                        {"name": "title"}
                    ],
                    [
                        {"name": "dateFilter"},
                        false
                    ],
                    [
                        {"name": "dateFrom"},
                        {"name": "dateTo"}
                    ]
                ]
            }
        ],
        "defaults": {
            "title": "Service Tickets By Status",
            "dateFilter": "currentYear"
        }
    }
}

Step 3:
Define the custom view class for the dashlet.
client/custom/src/views/service-ticket/dashlets/service-tickets-by-status.js

Espo.define('custom:views/service-ticket/dashlets/service-tickets-by-status', 'control-board:views/dashlets/abstract/instrument-container', function (Dep) {

    return Dep.extend({

        name: "ServiceTicketsByStatus" // dashlet file name

    });
});

Step 4:
Add dashlet name to your language file(s) to display as label in the dashlets list.
custom/Espo/Custom/Resources/i18n/en_US/Global.json

{
    "dashlets": {
        "ServiceTicketsByStatus" : "Service Ticket By Status"
    }
}

Step 5:
Clear cache and rebuild

Step 6:
Add the new dashlet to your dashboard through the "Preferences" GUI option or by clicking on the "+" icon at the upper right corner of the dashboard.


Functionality:
a) Clicking on the "ticket" icon for any category will display a modal list of tickets so you can zoom in into any record detail view
b) Clicking on the "..." icon at the top right corner of the dashlet will display a drop-down menu. Select "Options" in this menu to modify the dashlet title and the date period covered.

Customization:
This tutorial describes a specific implementation for a "ServiceTicket" custom entity which has a "status" enum field, so it should work for any entity which has an enum field that can be used as criteria to group records.

To further customize and see how the actual widget is being generated check the extension's source code scripts and adapt to your own needs. See the program flow table in the example # 2 below https://forum.espocrm.com/forum/deve...2985#post62985.