Version: 8.1

Add a button to the toolbar of the record page in the combined mode

Level: advanced

Example

Add a button to the toolbar of the account page displayed in combined mode.

If the primary contact is specified for an account, clicking on the button opens the contact page.
If the primary contact is not specified for an account, the button is inactive.

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. To add a localizable string, click Add.

Implement the button business logic.

In the attributes property, add the ButtonEnabled attribute of the Terrasoft.DataValueType.BOOLEAN type, which preserves the accessibility state of the button.
Implement the following methods in the methods property.
- onOpenPrimaryContactClick() – opens the primary contact page.
- onCardRendered() – listens to events emitted by loading data into the list and by changing the active list record. The method is executed after the account page is rendered in the combined mode.
- isPrimaryContactExist() – defines the existence of the primary contact for active list record.
- setButtonEnabled() – sets the value of the ButtonEnabled attribute depending on whether the main contact of the account is available.
Add a configuration object with the settings that determine the button position in the diff array of modifications.

The source code of the replacement view model of the section page is available below:

AccountSectionV2
define("AccountSectionV2", [], function() {
    return {
        /* The name of the section entity schema. */
        entitySchemaName: "Account",
        attributes: {
            /* The attribute for storing the availability status of the button. */
            "ButtonEnabled": {
                "dataValueType": Terrasoft.DataValueType.BOOLEAN,
                "type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
                "value": false
            }
        },
        /* The methods of the section view model. */
        methods: {
            /* The button click handler method. */
            onOpenPrimaryContactClick: function() {
                /* Get the active vertical list record. */
                var activeRow = this.get("ActiveRow");
                if (activeRow) {
                    /* Get the primary contact identifier. */
                    var primaryId = this.get("GridData").get(activeRow).get("PrimaryContact").value;
                    if (primaryId) {
                        /* 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
                        });
                    }
                }
            },
            /* Execute after the account page is rendered. */
            onCardRendered: function() {
                this.callParent();
                /* List data. */
                var gridData = this.get("GridData");
                var activeRow = this.get("ActiveRow");
                if (activeRow)
                {
                    this.setButtonEnabled(activeRow, this);
                }
                /* The reference to the active record is lost after the primary contact page closes. Restore it and check if the primary contact is available. */
                else {
                    var historyState = this.sandbox.publish("GetHistoryState");
                    var hash = historyState.hash;
                    if (hash && hash.valuePairs)
                    {
                        activeRow = hash.valuePairs[0].name;
                        /* Restore an active record. */
                        this.set("ActiveRow", activeRow);
                        /* Save the ‘this’ context to a local variable. */
                        var self = this;
                        /* Listen to the ‘dataloaded’ event. Fires when the data is fully loaded into the vertical list. */
                        gridData.on("dataloaded", function() {
                            self.setButtonEnabled(activeRow, self);
                        });
                    }
                }
                /* Listen to the ‘itemchanged’ event. Fires when the active list entry changes. */
                gridData.on("itemchanged", function() {
                    this.setButtonEnabled(activeRow, this);
                }, this);
            },
            /* Determine if there is a primary contact for the active list entry. */
            isPrimaryContactExist: function(id) {
                var pc = this.get("GridData").get(id).get("PrimaryContact");
                return (pc || pc !== "") ? true : false;
            },
            /* Set the value of the ButtonEnabled attribute depending on whether the primary contact is defined. */
            setButtonEnabled: function(activeRow, context) {
                if (context.isPrimaryContactExist(activeRow)) {
                    context.set("ButtonEnabled", true);
                }
                else {
                    context.set("ButtonEnabled", false);
                }
            }
        },
        /* Display the button on the record page. */
        diff: [
            /* Properties to add the the custom button page. */
            {
                /* The operation of inserting the element to the page is in progress. */
                "operation": "insert",
                /* The meta name of the parent container to which the button is added. */
                "parentName": "CombinedModeActionButtonsCardLeftContainer",
                /* The button is added to the element collection of the parent element. */
                "propertyName": "items",
                /* The meta name of the added button. */
                "name": "MainContactButton",
                /* Properties passed to the element’s constructor. */
                "values": {
                    /* The type of the added element is a 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"},
                    /* The display style of the button. */
                    "style": Terrasoft.controls.ButtonEnums.style.GREEN,
                    /* Bind the button availability property. */
                    "enabled": {bindTo: "ButtonEnabled"}
                }
            }
        ]
    };
});

Click Save on the Designer toolbar.

Outcome of the example

To view the outcome of the example, refresh the page in the Accounts section.

As a result of executing the example, the Primary contact button will been added to the toolbar of the Accounts section.

If the primary contact is specified for an account, click Primary contact to open the page of this contact.

If no primary contact is specified for an account, the Primary contact button is inactive.

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