Dashboard widgets

Advanced

Dashboard widgets (analytic elements) are used for data analysis of sections. Go to the Dashboards view of the required section to work with its analytics. Use the Dashboards section to work with the entirety of Creatio section data analytics.

Data storage structure of dashboards 

The dashboards section is a user-defined set of tab elements. The mechanism for working with dashboards is implemented with the help of the DashboardManager dashboard client manager and the DashboardManagerItem element client manager, which represents the tabs. The SysDashboard object is responsible for dashboards in the system. The SysDashboard object properties are described in the table.

SysDashboard object properties
Name Header Type Details
Caption Header String This information is displayed in the tab header.
Position Position Number If a position is not specified, the elements are displayed in alphabetical order.
Section Section Lookup System section.
ViewConfig Element (widget) view configuration Array
[{
    //Element type (Terrasoft.ViewItemType).
    itemType: "4",
    // Element name.
    name: "SomeInvoiceChart",
    // View configuration.
    layout: {
        columns: 4,
        rows: 4,
        colspan: 4,
        rowspan: 4
    }
},
{...}]
Items Element (widget) module configuration JSON Object
{
    // The name of the element for which the module settings are defined.
    "SomeInvoiceChart": {
        // Name of the “DashboardItem” view element.
        “widgetType”: "Chart",
        // Parameters required to display data for a particular “DashboardItem” element.
        “parameters”: {
            “caption”: "some caption",
            ...
        },
    },
    {...}
}

Implementing functionality in the dashboards view mode 

The hierarchy of classes that implement functionality in the dashboards view mode:

scr_dashboards_runtime.png

The SectionDashboardModule module:

  • SectionDashboardBuilder encapsulates the view generation logic and view model class for the Dashboards section module.
  • SectionDashboardsViewModel – the model class of the Dashboards section view model.
  • SectionDashboardsModuleDashboards section class module.

The DashboardModule module:

  • DashboardViewConfig – a class that generates the view configuration for the dashboards page view module.
  • BaseDashboardViewModel – a base class for the dashboards page view model.
  • DashboardModule – a class that contains functionality for working with dashboard modules.

The DashboardBuilder module:

  • DashboardsViewConfig – a class that generates a dashboards module view configuration.
  • BaseDashboardsViewModel – a base class of the dashboards section view model.
  • DashboardBuilder – a class for dashboards module construction.

Implementing functionality in the dashboards view mode 

The hierarchy of classes that implement the functionality in the dashboards view mode:

scr_dashboards_designtime.png

The DashboardDesigner module:

  • DashboardDesignerViewConfig – a class that generates the view configuration for the dashboards designer module.
  • DashboardDesignerViewModel – a class of the dashboards designer view model.
  • DashboardDesigner – dashboard visual module class.

Base classes that implement widget functionality 

BaseWidgetViewModelClass – a base class of the dashboards section view model. To use this class, register the following messages in the module:

  • GetHistoryState (publish; ptp);
  • ReplaceHistoryState (publish; broadcast);
  • HistoryStateChanged (subscribe; broadcast);
  • GetWidgetParameters (subscribe; ptp);
  • PushWidgetParameters (subscribe; ptp) – if the parameters are drawn from modules (useCustomParameterMethods = true).

BaseWidgetDesigner – base widget settings view schema.

BaseAggregationWidgetDesigner – contains methods for working with aggregate columns and aggregation types.

DashboardEnums – contains an enumeration of widget properties.

Terrasoft.DashboardEnums.WidgetType – contains the widget view mode and design mode configuration of the dashboards.

Dashboard widget types 

Chart 

Charts display multiple system records in the form of diagrams of different types. For example, you can display a pie chart of accounts distributed by type. Charts display information in the form of different diagram types or in a data list form. 

scr_dashboards_chart.png

Charts functionality implementation classes 

ChartViewModel – chart view model.

ChartViewConfig – generates the chart view model.

ChartModule – a module designed to work with charts.

ChartDesigner – view model schema of a chart.

ChartModuleHelper – generates a query using the Terrasoft.EntitySchemaQuery object.

ChartDrillDownProvider – contains methods for working with the “Show data” function (used for working with chart series).

Chart setup parameters 

To configure a chart, you need to add the JSON configuration object with the chart properties to the widget module configuration. The widget module configuration is defined by the Items property of the SysDashboard object. 

Set the “Chart” value to the widgetType property in the JSON configuration object with widget settings. In addition, assign the parameters property to the object with necessary parameters. Possible chart parameters are listed in the table.

Chart setup parameters
Name Type Details
seriesConfig object The settings of an embedded chart in a series.
orderBy string Sorting field.
orderDirection string Sorting direction.
caption string Chart header.
sectionId string Section id.
xAxisDefaultCaption string Default X-axis header.
yAxisDefaultCaption string Default Y-axis header.
primaryColumnName string Name of initial column. The Id column is the default one.
yAxisConfig object Array of the Y-axis name settings.
schemaName string Chart object.
sectionBindingColumn string Section link column.
func string Aggregate function.
type string Chart type.
XAxisCaption string X-axis caption.
YAxisCaption string Y-axis caption.
xAxisColumn string The X-axis grouping column.
yAxisColumn string The Y-axis grouping column.
styleColor string Chart color.
filterData object Filter settings.

Metric 

The “Metric” dashboard displays the number (or date) received by inquiring system data, for example, a total number of company’s employees. 

scr_dashboards_metric.png

Functionality implementation classes of the “Metric” dashboard 

IndicatorViewModel – metric view model.

IndicatorViewConfig – generates the configuration of the metric view model.

IndicatorModule – a module designed to work with metrics.

IndicatorDesigner – view model schema of the metric edit page.

Metric settings 

To configure a metric, you need to add the JSON configuration object with Metric properties to the widget module configuration. The widget module configuration is defined by the Items property of the SysDashboard object. 

Set the “Metric” value to the widgetType property in the JSON configuration object with widget settings. In addition, assign the parameters property to the object with necessary parameters. Possible metric parameters are listed in the table.

Metric settings
Name Type Details
caption string Metric header.
sectionId string Section id.
entitySchemaName string Metric object.
sectionBindingColumn string Section link column.
columnName string Name of aggregating column.
format object Metric format.
filterData object Filter settings.
aggregationType number Type of aggregating function.
style string Metric color.

Gaude 

A gauge dashboard element displays aggregate data from multiple system records in the form of a dial with green, yellow, and red areas on its scale. For example, you may use this dashboard to display a number of performed activities and compare it to a desired rate. 

scr_dashboards_speedometer.png

Gauge functionality implementation classes 

GaugeViewModel – gauge view model.

GaugeViewConfig – generates the gauge view model.

GaugeModule – module designed to work with gauges.

GaugeChart – implements a gauge chart component.

GaugeDesigner – view model schema of a gauge.

Gauge settings 

To configure a gauge, you need to add the JSON configuration object with the gauge properties to the widget module configuration. The widget module configuration is defined by the Items property of the SysDashboard object. 

Set the “Gauge” value to the widgetType property in the JSON configuration object with widget settings. In addition, assign the parameters property to the object with necessary parameters. Possible gauge parameters are listed in the table.

Gauge settings
Name Type Details
caption string Gauge header.
sectionId string Section id.
entitySchemaName string Gauge object.
sectionBindingColumn string Section link column.

List 

A list displays multiple system records in a unified visual form. Lists enable you to limit the number of records displayed to create such dashboards as the “Top ten most productive managers by the number of closed deals”, for example. 

scr_dashboards_list.png

List functional classes 

DashboardGridViewModel – list view model.

DashboardGridViewConfig – generates list view configuration.

DashboardGridModule – module designed to work with lists.

DashboardGridDesigner – list editing page schema.

List settings 

To configure a list, you need to add the JSON configuration object with list properties to the widget module configuration. The widget module configuration is defined by the Items property of the SysDashboard object. 

Set the “DashboardGrid” value to the widgetType property in the JSON configuration object with widget settings. In addition, assign the parameters property to the object with necessary parameters. Possible list parameters are listed in the table.

List settings
Name Type Details
caption string List header.
sectionBindingColumn string Section link column.
filterData object Filter settings.
sectionId string Section id.
entitySchemaName string List object.
style string List color.
orderDirection number Sorting options (1 - ascending, 2 - descending).
orderColumn string List sorting column.
rowCount number The number of rows to display.
gridConfig object List configuration.

Web-page 

The web-page dashboard is used to display web pages on the dashboard panel. It may be an online currency calculator, your corporate website, etc. 

Web-page functionality implementation classes 

WebPageViewModel – web-page view model.

WebPageViewConfig – generates the web-page view model configuration.

WebPageModule – module used to work with web pages.

WebPageDesigner – web-page widget view schema.

Web-page settings parameters 

To configure a web page, you need to add the JSON configuration object with web page properties to the widget module configuration. Widget module configuration is defined by the Items property of the SysDashboard object. 

Set the “WebPage” value to the widgetType property in the JSON configuration object with widget settings. In addition, assign the parameters property to the object with necessary parameters. Possible web-page parameters are listed in the table.

Web-page settings
Name Type Details
caption string Web-page widget title.
sectionId string Section id.
url string Web-page link.
style string Web-page widget CSS-styles

Sales pipeline 

The “Sales pipeline” dashboard is used to analyze sales dynamics by stages.

Sales pipeline functionality implementation classes 

OpportunityFunnelChart – a class inherited from Chart.

Sales pipeline settings 

To configure a sales pipeline, you need to add the JSON configuration object with sales pipeline properties to the widget module configuration. Widget module configuration is defined by the Items property of the SysDashboard object. 

Set the “OpportunityFunnel” value to the widgetType property in the JSON configuration object with widget settings. In addition, assign the parameters property to the object with necessary parameters. Possible sales pipeline parameters are listed in the table.

Sales pipeline settings
Name Type Details
caption string Sales pipeline header.
sectionId string Section id.
defPeriod string Pipeline period (last week by default).
sectionBindingColumn string Section link column.
type string Chart type (“funnel”).
filterData object Filter settings.
Modify sales pipeline calculations
Advanced

You can modify the way values are calculated for the sales pipeline dashboard element in the Opportunities section. To do this, you need to create a new module for calculations and replace the sales pipeline display client schema.

To modify the sales pipeline calculations: 

  1. Create a new class inherited from FunnelBaseDataProvider and specify the calculation logic.
  2. Create a replacing FunnelChartSchema client schema and use the new calculation class in it.

 

Example of modifying the calculations displayed in the "Number of opportunities" view of the sales pipeline 

Case description 

Modify the sales pipeline calculation algorithms by replacing the number of opportunities with the number of products added to opportunities.

Case implementation algorithm 

1. Create a new module in the custom package 

Create a new calculation provider client module in the custom package. Calculation provider is a class responsible for selecting, filtering and processing data for sales pipeline chart.

Specify a name and caption for the new module, for example, UsrFunnelByProductCountDataProvider (Fig. 1).

Fig. 1. Calculation provider module properties
scr_funnelchart_dataprovider.png

2. Add localizable strings 

Add a string with the Number of products value to the collection of localizable strings of the created module. To do this, right-click the LocalizableStrings structure node and select Add from the context menu. Set the properties for the new string as shown on Fig. 2.

Fig. 2. Localizable string properties
scr_funnelchart_products_caption.png

Add CntOpportunity localizable string with the Number of opportunities value in the similar way.

3. Add implementation to the provider module 

To modify sales pipeline calculations, override the following methods:

  • addQueryColumns column generation method for data selection
  • methods for selection data processing.

To process one record from the selection, define the getSeriesDataConfigByItem method. To process the whole collection, define the prepareFunnelResponseCollection method. To filter the records, define the applyFunnelPeriodFilters method.

Below is the source code of the new calculation provider module for the sales pipeline.

define("UsrFunnelByProductCountDataProvider", ["ext-base", "terrasoft", "UsrFunnelByProductCountDataProviderResources",
        "FunnelBaseDataProvider"],
    function(Ext, Terrasoft, resources) {
        // Defining a new calculation provider.
        Ext.define("Terrasoft.configuration.UsrFunnelByProductCountDataProvider", {
            // Inheriting from the basic provider.
            extend: "Terrasoft.FunnelBaseDataProvider",
            // New provider short name
            alternateClassName: "Terrasoft.UsrFunnelByProductCountDataProvider",
            // Collection processing method
            prepareFunnelResponseCollection: function(collection) {
                this.callParent(arguments);
            },
            // Extending the FunnelBaseDataProvider base model method. 
            // Sets the column number of products for data sampling
            addQueryColumns: function(entitySchemaQuery) {
                // Parent method calling
                this.callParent(arguments);
                // Adds the number of products column to the sample
                entitySchemaQuery.addAggregationSchemaColumn("[OpportunityProductInterest:Opportunity].Quantity",
                        Terrasoft.AggregationType.SUM, "ProductsAmount");
            },
            // Extending the FunnelBaseDataProvider base class method.
            // Sets sample filtration
            applyFunnelPeriodFilters: function(filterGroup) {
                // Parent method calling
                this.callParent(arguments);
                // Creates a filter group.
                var endStageFilterGroup = Terrasoft.createFilterGroup();
                // Sets the group operator type.
                endStageFilterGroup.logicalOperation = Terrasoft.LogicalOperatorType.OR;
                // Sets the filter that shows whether the sale stage is over yet.
                endStageFilterGroup.addItem(
                    Terrasoft.createColumnIsNullFilter(this.getDetailColumnPath("DueDate")));
                // Sets the filter that shows whether the sale stage is final.
                endStageFilterGroup.addItem(
                    Terrasoft.createColumnFilterWithParameter(Terrasoft.ComparisonType.EQUAL,
                        this.getDetailColumnPath("Stage.End"), true, Terrasoft.DataValueType.BOOLEAN));
                filterGroup.addItem(endStageFilterGroup);
            },
            // Extending the FunnelBaseDataProvider base model method. 
            // Processes data for the stages in the pipeline.
            getSeriesDataConfigByItem: function(responseItem) {
                // Object that stores localizable strings.
                var lcz = resources.localizableStrings;
                // Receives a stage data object from the parent method.
                var config = this.callParent(arguments);
                // Receives data about the number of products in an opportunity from the sample result.
                var products = responseItem.get("ProductsAmount");
                products = Ext.isNumber(products) ? products : 0;
                // Formats the strings.
                var name = Ext.String.format("{0}<br/>{1}: {2}<br/>{3}: {4}",
                    config.menuHeaderValue, lcz.CntOpportunity, config.y, lcz.FunnelProductsCaption, products);
                var displayValue = Ext.String.format("<br/>{0}: {1}", lcz.FunnelProductsCaption, products);
                // Installs new data in the data object and returns it. 
                return Ext.apply(config, {
                    name: name,
                    displayValue: displayValue
                });
            }
        });
    });

 

 

4. Create a sales pipeline replacing schema 

To use the new provider module in the calculations, override the sales pipeline calculation provider generator method.

To do this, create a replacing client module and specify FunnelChartSchema as a parent (Fig. 3).

Fig. 3. Properties of the replacing module
scr_funnelchart_schema.png

Add the new calculation module to dependencies (the Dependencies section), by specifying its name in the Dependency field and the UsrFunnelByProductCountDataProvider value in the Name field (Fig. 4).

Fig. 4. Sales pipeline schema dependency properties
scr_funnelchart_schema_dependencies.png

5. Specify the new calculation provider in the sales pipeline replacing schema 

To do this, override the getProvidersCollectionConfig method in the replacing schema that gets the configuration object with the collection of providers.

define("FunnelChartSchema", ["UsrFunnelByProductCountDataProvider"],
    function() {
        return {
            entitySchemaName: "Opportunity",
            methods: {
                getProvidersCollectionConfig: function() {
                    // Calls parent method.
                    // Gets array of providers.
                    var config = this.callParent();
                    // Searches data provider in the measurement by the number of opportunities.
                    var byCount = Terrasoft.findItem(config, {tag: "byNumberConversion"});
                    // Replaces with new class.
                    byCount.item.className = "Terrasoft.UsrFunnelByProductCountDataProvider";
                    return config;
                }
            }
        };
    });

After saving the schema, the new calculation module will be used in the sales pipeline and the sales pipeline itself will display the total number of products by stages (Fig. 5).

Fig. 5. Sales pipeline displaying the number of products added to opportunities
scr_funnelchart_graph.png
Enable additional filtering in a sales pipeline
Advanced

In Creatio, you can enable additional filtering for calculations in sales pipeline charts.

To do it this:

  1. Create a new class inherited from the calculation provider and implement the necessary filtering logic.
  2. Create a replacing FunnelChartSchema client schema and use the new calculation class in it.

Case description 

Add filtering to sales pipeline calculations displayed in the “Number of opportunities” view for selecting the opportunities whose Customer field is populated with an account.

Source code 

You can download the package with case implementation using the following link.

Case implementation algorithm 

1. Creating a new module in the custom package 

Create a new calculation provider client module in the custom package. Calculation provider is a class responsible for selecting, filtering and processing data for sales pipeline chart.

Specify a name and caption for the new module, for example, UsrFunnelByCountDataProvider (fig. 1).

Fig. 1. Calculation provider module properties
scr_funnelchart_filter_schema.png

2. Defining the new provider class and specifying the filtering logic 

Inherit the created class from the FunnelByCountDataProvider class and override the getFunnelFixedFilters method.

The module source code:

define("UsrFunnelByCountDataProvider", ["ext-base",
    "terrasoft", "UsrFunnelByCountDataProviderResources",
    "FunnelByCountDataProvider"],
    function(Ext, Terrasoft, resources) {
        // Defining the new calculation provider.
        Ext.define("Terrasoft.configuration.UsrFunnelByCountDataProvider", {
            // Inheritance from the provider "by number".
            extend: "Terrasoft.FunnelByCountDataProvider",
            // Contracted name of the new provider.
            alternateClassName: "Terrasoft.UsrFunnelByCountDataProvider",
            // Extending the FunnelByCountDataProvider base module method.
            // Returns filter for selection.
            getFunnelFixedFilters: function() {
                // Calling the parent method.
                var esqFiltersGroup = this.callParent(arguments);
                // Adds filter specifying that the customer of an opportunity is an account.
                esqFiltersGroup.addItem(
                    Terrasoft.createColumnIsNotNullFilter("Account"));
                return esqFiltersGroup;
            }
        });
    });

Save the module.

3. Implementing the pipeline chart module in custom package 

To use the new provider module in calculations, cerate a replacing client module and specify FunnelChartSchema from the Opportunity package as a parent schema (fig. 2).

Fig. 2. Properties of the replacing module
scr_funnelchart_schema.png

4. Specify the new calculation provider in the sales pipeline replacing schema 

Override the provider generator method of sales pipeline calculation in the replacing schema and specify the new provider class for calculations.

The replacing schema source code is as follows:

define("FunnelChartSchema", ["UsrFunnelByCountDataProvider"], function() {
    return {
        entitySchemaName: "Opportunity",
        methods: {
            getProvidersCollectionConfig: function() {
                // Calls parent method returning the provider array.
                var config = this.callParent();
                // Searches for data provider for displaying in the “Number of opportunities” view.
                var byCount = Terrasoft.findItem(config, {tag: "byNumberConversion"});
                // Changes for a new class.
                byCount.item.className = "Terrasoft.UsrFunnelByCountDataProvider";
                return config;
            }
        }
    };
});

After you save the schema, the new calculation module will be used in the sales pipeline. It will display the opportunities whose Customer field is populated with an account.

Add a custom dashboard widget
Advanced

Dashboard widgets (analytic elements) are used for data analysis of sections. Go to the “Dashboards” view of the required section to work with its analytics. Use the Dashboards section to work with the entirety of Creatio section data analytics.

To learn more about Creatio dashboard widgets, please refer to the View analytics article.

You can create custom dashboard widgets in Creatio.

To create a custom widget you need to:

  1. Create new or select the existing module. More information about dashboard widget modules can be found in the “Dashboard widgets” article.
  2. Custom module must be an inheritor of the BaseNestedModule module or one of its inheritors: ChartModule, IndicatorModule, GaugeModule, etc. Add the source code that implements the necessary functionality to the created module.
  3. Specify the module dependency in the [Dependencies] block of the module properties. Add messages that are used.
  4. Set the widget parameters in the [Module parameters] field when adding widgets on the dashboards panel. More information about parameters can be found in the “Dashboard widgets” article.

Case description 

Create custom widget that shows currency exchange rate.

Source code 

Use this link to download the case implementation package.

Case implementation algorithm 

1. Create a currency indicator module. 

Go to the Configuration section in the system designer and on the Schemas tab, select Add -> Standard -> Module command. For the created module specify (Fig. 1):

  • [Name] – “UsrCurrencyIndicatorModule”.
  • [Title] – “Currency Indicator Module”.
Fig. 1. Currency indicator module properties
scr_widget_add_module.png

2. Add the source code 

The module source code:

define("UsrCurrencyIndicatorModule", ["UsrCurrencyIndicatorModuleResources", "IndicatorModule"], function() {

    // Class that generates the configuration of the currency indicator module view..
    Ext.define("Terrasoft.configuration.CurrencyIndicatorViewConfig", {
        extend: "Terrasoft.BaseModel",
        alternateClassName: "Terrasoft.CurrencyIndicatorViewConfig",
        // Generates the configuration of the currency indicator module view.
        generate: function(config) {
            var style = config.style || "";
            var fontStyle = config.fontStyle || "";
            var wrapClassName = Ext.String.format("{0}", style);
            var id = Terrasoft.Component.generateId();
            // The returned configuration view object.
            var result = {
                "name": id,
                "itemType": Terrasoft.ViewItemType.CONTAINER,
                "classes": {wrapClassName: [wrapClassName, "indicator-module-wrapper"]},
                "styles": {
                    "display": "table",
                    "width": "100%",
                    "height": "100%"
                },
                "items": [
                    {
                        "name": id + "-wrap",
                        "itemType": Terrasoft.ViewItemType.CONTAINER,
                        "styles": {
                            "display": "table-cell",
                            "vertical-align": "middle"
                        },
                        "classes": {wrapClassName: ["indicator-wrap"]},
                        "items": [
                            // Display the name of the currency.
                            {
                                "name": "indicator-caption" + id,
                                "itemType": Terrasoft.ViewItemType.LABEL,
                                "caption": {"bindTo": "CurrencyName"},
                                "classes": {"labelClass": ["indicator-caption"]}
                            },
                            // Display the currency exchange rate.
                            {
                                "name": "indicator-value" + id,
                                "itemType": Terrasoft.ViewItemType.LABEL,
                                "caption": {
                                    "bindTo": "CurrencyValue"
                                },
                                "classes": {"labelClass": ["indicator-value " + fontStyle]}
                            }
                        ]
                    }
                ]
            };
            return result;
        }
    });

    // Class of the view model of the currency indicator module.
    Ext.define("Terrasoft.configuration.CurrencyIndicatorViewModel", {
        extend: "Terrasoft.BaseModel",
        alternateClassName: "Terrasoft.CurrencyIndicatorViewModel",
        Ext: null,
        Terrasoft: null,
        sandbox: null,
        columns: {
            // Currency name.
            CurrencyName: {
                type: Terrasoft.core.enums.ViewModelSchemaItem.ATTRIBUTE,
                dataValueType: Terrasoft.DataValueType.TEXT,
                value: null
            },
            // Currency value.
            CurrencyValue: {
                type: Terrasoft.core.enums.ViewModelSchemaItem.ATTRIBUTE,
                dataValueType: Terrasoft.DataValueType.FLOAT,
                value: null
            }
        },
        onRender: Ext.emptyFn,
        // Returns the currency value, depending on the name. This method is given as an example.
        // For each specific task, you should select an individual method to obtain data,
        // for example REST API, database query, etc.
        getCurrencyValue: function(currencyName, callback, scope) {
            var result = 0;
            if (currencyName === "USD") {
                result = 26;
            }
            if (currencyName === "EUR") {
                result = 32.3;
            }
            if (currencyName === "RUB") {
                result = 0.45;
            }
            callback.call(scope || this, result);
        },
        // Gets the data and displays them on the widget.
        prepareIndicator: function(callback, scope) {
            this.getCurrencyValue(this.get("CurrencyName"), function(currencyValue) {
                this.set("CurrencyValue", currencyValue);
                callback.call(scope);
            }, this);
        },
        // Initializes the widget.
        init: function(callback, scope) {
            this.prepareIndicator(callback, scope);
        }
    });

    // Widget module class.
    Ext.define("Terrasoft.configuration.CurrencyIndicatorModule", {
        extend: "Terrasoft.IndicatorModule",
        alternateClassName: "Terrasoft.CurrencyIndicatorModule",
        // The name of the wdget view model class.
        viewModelClassName: "Terrasoft.CurrencyIndicatorViewModel",
        // The name of the view configuration generating class.
        viewConfigClassName: "Terrasoft.CurrencyIndicatorViewConfig",
        // Subscribing to messages from third-party modules.
        subscribeMessages: function() {
            this.sandbox.subscribe("GenerateIndicator", this.onGenerateIndicator, this, [this.sandbox.id]);
        }
    });

    return Terrasoft.CurrencyIndicatorModule;
});

3. Add a style to the LESS tab 

To display the widget text at the center, add the following style to the LESS tab of the module:

.indicator-module-wrapper {
    text-align: center;
}

3. Add the dependencies and messages 

The dependencies and messages of parent module should automatically display in the created module (Fig. 2).

Fig. 2. Dependencies and messages of created module
scr_widget_add_dependency_and_messages.png

If it doesn’t happen, add them manually:

  • Add a parent module to the [Dependencies] block
  • Add the GetIndicatorConfig message to the [Messages] block. Sett the “Publish” direction for the message and the GenerateIndicator as address message with the “Follow” direction.

Save the new module.

5. Add the widget to the dashboard panel and set its parameters 

To display the widget, add it to the dashboard panel (Fig. 3).

Fig. 3. Adding the widget to the dashboard panel
scr_widget_adding.png

In addition, you need to set the parameters of the module bound to the widget (Fig. 4).

Fig. 4. Configuration of the added widget module
scr_widget_adding_params.png

To bind the module to the added widget, add the “Currency Indicator Module” value in the Module field and add the configuration JSON object with the required parameters to the Module parameters field.

{
    "parameters": {
        "CurrencyName": "USD",
        "style": "widget-blue"
    },
    "configurationMessage": "GetIndicatorConfig"
}

A “CurrencyName” parameter sets the currency for which the exchange rate is displayed. A “style” parameter sets the widget style and “configurationMessage” parameter sets the message name that will be used to transfer the configuration object.

You can set up any of Creatio system colors in the style parameter as widget color (Fig. 5).

Fig. 5. Style types of the widget
scr_widget_styles.png

After saving the created widget and refreshing the page, the custom widget will be displayed on the dashboards panel (Fig. 6).

Fig. 6. Currency exchange rate widget
scr_widget_result.png
BaseWidgetDesigner schema
Advanced

BaseWidgetDesigner – base widget settings view schema.

Methods 

getWidgetConfig()

returns the current widget settings object.

getWidgetConfigMessage()

Returns the name of the message used for getting widget module settings.

getWidgetModuleName()

Returns the name of the widget module.

getWidgetRefreshMessage()

Returns the name of the widget update message.<

getWidgetModulePropertiesTranslator()

Returns the connecting object of widget module properties and widget module settings.

DashboardEnums enumeration
Advanced

DashboardEnums – contains an enumeration of widget properties.

Terrasoft.DashboardEnums.WidgetType – contains the widget view mode and design mode configuration of the dashboards.

Properties 

moduleName

Widget module name.

configurationMessage

The name of the module settings receiving message.

resultMessage

The name of the message that returns widget designer module settings.

stateConfig (stateObj)

Widget designer schema name.