Version: 8.1

Add a button to the toolbar of the add record page

Level: intermediate

Example

Add a button to the toolbar of the page that adds new accounts. Activate the button after adding the primary contact of the account. Open the page of the account’s primary contact on button click.

1. Change the way to add an account

By default, you need to add an account using a mini-page.

To add an account using a full page:

Click to open the System Designer.
Click System settings in the System setup block.
Select the Enable account mini page add mode (the HasAccountMiniPageAddMode code) system setting.
Clear the Default value checkbox.
Log out from and log back into Creatio.

2. Create a replacing view model schema of the account page

Go to the Configuration section and select a custom package to which to add the schema.
Click Add → Replacing view model on the section list toolbar.
Fill out the schema properties.
- Set Code to "AccountPageV2."
- Set Title to "Account edit page."
- Set Parent object to "AccountPageV2."
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.

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

AccountPageV2
define("AccountPageV2", [], function() {
    return {
        /* The name of the record page entity schema. */
        entitySchemaName: "Account",
        /* The methods of the record page view model. */
        methods: {
            /* Check whether the [Primary contact] field of the record page is filled. */
            isAccountPrimaryContactSet: function() {
                return this.get("PrimaryContact") ? true : false;
            },
            /* The button click handler method. */
            onOpenPrimaryContactClick: function() {
                var primaryContactObject = this.get("PrimaryContact");
                if (primaryContactObject) {
                    /* Get the ID of the primary contact. */
                    var primaryContactId = primaryContactObject.value;
                    /* Create an address string. */
                    var requestUrl = "CardModuleV2/ContactPageV2/edit/" + primaryContactId;
                    // Publish a message about updating the page navigation history and go to the primary contact page. */
                    this.sandbox.publish("PushHistoryState", {
                        hash: requestUrl
                    });
                }
            }
        },
        /* Display the button on the record page. */
        diff: [
            /* Properties to add the custom button to the page. */
            {
                /*  Run the operation that inserts the element to the page. */
                "operation": "insert",
                /* The meta name of the parent container to add the button. */
                "parentName": "LeftContainer",
                /* Add the button to the element collection of the parent element. */
                "propertyName": "items",
                /* The meta name of the added button. */
                "name": "PrimaryContactButton",
                /* 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"},
                    /* The display style of the button. */
                    "style": Terrasoft.controls.ButtonEnums.style.BLUE
                }
            }
        ]
    };
});

Click Save on the Designer’s toolbar.

Outcome of the example

To view the outcome of the example:

Refresh the Accounts section page.
Click New account on the toolbar of the Accounts section.

As a result, Creatio will add an inactive Primary contact button to the toolbar of the page that adds new accounts.

The Primary contact button activates after you specify the primary contact of the account. Click Primary contact to open the primary contact page.

Resources

Package with example implementation

1. Change the way to add an account​

2. Create a replacing view model schema of the account page​

Outcome of the example​

Resources​

1. Change the way to add an account

2. Create a replacing view model schema of the account page

Outcome of the example

Resources