Version: 8.1

Add a button to the section toolbar

Level: intermediate

Example

Add a button to the toolbar of the Accounts section. Activate the button after opening the account that has a primary contact from the section list. Open the page of the active account’s primary contact on button click.

Create a replacement section view model schema

Go to the Configuration section and select a custom package to add the schema.
Click Add → Replacing view model on the section list toolbar.
Fill out the schema properties.
- Set Code to "AccountSectionV2."
- Set Title to "Account section."
- Set Parent object to "AccountSectionV2."
Add a localizable string.
1. Click in the context menu of the Localizable strings node.
2. Fill out the localizable string properties.
  - Set Code to "OpenPrimaryContactButtonCaption."
  - Set Value to "Primary contact."
3. Click Add to add a localizable string.

Implement the button logic.

Implement the following methods in the methods property:
- isAccountPrimaryContactSet() – checks whether the Primary contact field of the page is filled.
- onOpenPrimaryContactClick() – the button click handler method. Opens the primary contact page.
Add a configuration object with the settings that determine the button position to the diff array of modifications.

Reference the selected record via the ActiveRow attribute of the section view model. The attribute returns the value of the primary column of the selected record. In turn, you can use this value to get values loaded into the list of the fields of the selected object. For example, values loaded from the view data collection of the section list are stored in the GridData property of the list view model.

View the source code of the replacing view model schema of the section page below.

AccountSectionV2
define("AccountSectionV2", [], function() {
    return {
        /* The name of the section entity schema. */
        entitySchemaName: "Account",
        /* The methods of the section view model. */
        methods: {
            /* The button click handler method. */
            onOpenPrimaryContactClick: function() {
                /* Get the ID of the selected record. */
                var activeRow = this.get("ActiveRow");
                if (!activeRow) {
                    return;
                }
                /* Get the ID of the primary contact. */
                var primaryId = this.get("GridData").get(activeRow).get("PrimaryContact").value;
                if (!primaryId) {
                    return;
                }
                /* Create an address string. */
                var requestUrl = "CardModuleV2/ContactPageV2/edit/" + primaryId;
                /* Publish a message about updating the page navigation history and go to the primary contact page. */
                this.sandbox.publish("PushHistoryState", {
                    hash: requestUrl
                });
            },
            /* Check whether the [Primary contact] field of the selected record is filled. */
            isAccountPrimaryContactSet: function() {
                var activeRow = this.get("ActiveRow");
                if (!activeRow) {
                    return false;
                }
                var pc = this.get("GridData").get(activeRow).get("PrimaryContact");
                return (pc || pc !== "") ? true : false;
            }
        },
        /* Display the button in the section. */
        diff: /**SCHEMA_DIFF*/[
            /* Properties to add the custom button to the section. */
            {
                /* Run the operation that inserts the element to the page. */
                "operation": "insert",
                /* The meta name of the parent container to add the button. */
                "parentName": "ActionButtonsContainer",
                /* Add the button to the element collection of the parent element. */
                "propertyName": "items",
                /* The meta name of the added button. */
                "name": "MainContactSectionButton",
                /* The properties to pass to the element’s constructor. */
                "values": {
                    /* Set the type of the added element to ‘button.’ */
                    "itemType": Terrasoft.ViewItemType.BUTTON,
                    /* Bind the button title to the localizable schema string. */
                    "caption": { bindTo: "Resources.Strings.OpenPrimaryContactButtonCaption" },
                    /* Bind the button click handler method. */
                    "click": { bindTo: "onOpenPrimaryContactClick" },
                    /* Bind the button availability property. */
                    "enabled": { bindTo: "isAccountPrimaryContactSet" },
                    /* Set up the button layout. */
                    "layout": {
                        /* The column number. */
                        "column": 1,
                        /* The row number. */
                        "row": 6,
                        /* The column span. */
                        "colSpan": 1
                    }
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});

Click Save on the Designer’s toolbar.

Outcome of the example

To view the outcome of the example:

Clear the browser cache.
Refresh the Accounts section page.

As a result, Creatio will add the Primary contact button to the toolbar of the Accounts section. The button activates when you select the account that has a primary contact from the section list.

Click Primary contact to open the page of the active account’s primary contact.

Resources

Package with example implementation

Create a replacement section view model schema​

Outcome of the example​

Resources​

Create a replacement section view model schema

Outcome of the example

Resources