Creatio development guide

Adding an action panel

Glossary Item Box


Starting with version 7.8.0, bpm'online has a new edit page module – the "Action panel" (ActionsDashboard). An action panel displays information about the current status of and actions for working with the current record.

For more information about action panel, please see the "Action dashboard" article.

General procedure of adding an action panel on a page:

  1. Create a Schema of the Edit Page View Model inherited from the SectionActionsDashboard module.
  2. Create a replacing page schema.
  3. Set up the module in the modules property of the page view model.
  4. In the "diff" array of the page view model, add the module on the page.

Case description

Add an action panel to the order edit page.

Source code

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

Case implementation algorithm

1. Create a client schema of the OrderActionsDashboard view model

Specify the SectionActionsDashboard schema as a parent object (Fig. 1).

Fig. 1. Properties of the client schema

The client schema source code is as follows:

define("UsrOrderActionsDashboard", [], function () {
    return {
        details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
        methods: {},
        diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/

2. Create a replacing order edit page

A replacing client module must be created and [Order edit page] (OrderPageV2) must be specified as the parent object in it (Fig. 2). Creating a replacing page is covered in the “Creating a custom client module schema” article.

Fig. 2. Properties of the replacing edit page

3. Add a configuration object with the module settings in the modules collection of the page schema

Add the code of the page replacing module to the [Source code] tab: Add a configuration object with the module settings in it to the modules collection of the view model.

4. Add a configuration object with the settings determining the module position in the diff array

The replacing schema source code is as follows:

define("OrderPageV2", [],
    function () {
        return {
            entitySchemaName: "Order",
            attributes: {},
            modules: /**SCHEMA_MODULES*/{
                "ActionsDashboardModule": {
                    "config": {
                        "isSchemaConfigInitialized": true,
                        // Schema name.
                        "schemaName": "UsrOrderActionsDashboard",
                        "useHistoryState": false,
                        "parameters": {
                            // Configuration object of the view model.
                            "viewModelConfig": {
                                // Schema name of the page entity.
                                "entitySchemaName": "Order",
                                // Configuration object of the Actions block.
                                "actionsConfig": {
                                    // Schema name for loading items to Actions.
                                    "schemaName": "OrderStatus",
                                     // Column name in the parent schema that references the schema that contains Actions elements. 
                                     // If not specified, takes the schemaName value.
                                    "columnName": "Status",
                                    // Column name for element sorting.
                                    "orderColumnName": "Position",
                                    // Column name for item sorting in the item menu.
                                    "innerOrderColumnName": "Position"
                                // Displaying the action panel module, the value is [true] by default.
                                "useDashboard": true,
                                // Displaying the Content block, [true] by default.
                                "contentVisible": true,
                                // Risplaying the Header block, [true] by default.
                                "headerVisible": true,
                                // The configuration object of the panel elements.
                                "dashboardConfig": {
                                    // Connection between activities and page object.
                                    "Activity": {
                                        // Page object column name.
                                        "masterColumnName": "Id",
                                        // Clumn name in the [Activity] object.o
                                        "referenceColumnName": "Order"
            details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
            methods: {},
            diff: /**SCHEMA_DIFF*/[
                    "operation": "insert",
                    "name": "ActionsDashboardModule",
                    "parentName": "ActionDashboardContainer",
                    "propertyName": "items",
                    "values": {
                        "classes": { wrapClassName: ["actions-dashboard-module"] },
                        "itemType": Terrasoft.ViewItemType.MODULE

After saving the schema and updating the bpm'online web page, the action panel will be added to the order page. The action panel will contain the order status and connected uncompleted activities (Fig. 3).

Fig. 3. Demonstrating the case implementation result

© bpm'online 2002-2019.

Did you find this information useful?

How can we improve it?