Button

Guide
Easy

Button containers 

Creatio implements the following button container types:

  • Action button container. Holds section page action buttons. Holds standard button containers and the dropdown menu button container.
  • Standard button container. Holds the Save, Cancel, and Tags buttons, as well as the dropdown menu of the Actions button.
  • Dropdown menu button container. Holds the dropdown menu of the Print and View buttons.

Buttons containers are different for section pages, record pages, and the page that adds new records.

Note. Creatio uses HTML container meta names. It generates actual IDs that match the HTML elements of the record page based on the meta names.

View the meta names of button containers in the table below.

Meta names of button containers

UI element name

Containers

Action button container

Standard button container

Dropdown menu button container

Section pageSeparateModeActionButtonsContainerSeparateModeActionButtonsLeftContainerSeparateModeActionButtonsRightContainer
Record pageCombinedModeActionButtonsCardContainerCombinedModeActionButtonsCardLeftContainerCombinedModeActionButtonsCardRightContainer
Page that adds new recordsActionButtonsContainerLeftContainerRightContainer

View Section page button containers in the figure below.

View Record page button containers in the figure below.

View the button containers of the page that adds new records in the figure below.

New button 

The procedure for adding a button varies depending on the button type.

Creatio implements the following button types:

  • simple button
  • color picker button

Add a simple button to the record or section page. 

  1. Create a replacement view model of the section or record page to place the button. To do this, follow the procedure covered in a separate article: Develop configuration elements.
  2. Add a localizable string with the name of the button to the replacement model schema.
  3. Implement the button logic in the replacement model.
    1. Implement the following in the methods property:
      • The handler method triggered by a button click.
      • Auxiliary methods required for the control’s operation. These can be methods that regulate the visibility or availability of the control.
    2. Add a configuration object with the settings that determine the button position on the section or record page to the diff array of modifications. In the array, specify the container to place the button.

Attention. Combined mode is a display mode of the record page that has an open vertical list. To place a button on a record page in the combined mode, edit the section page’s replacement view model schema and the record page’s replacement view model schema.

Add a color picker button 

  1. Create a replacement object schema To do this, follow the procedure covered in a separate article: Develop configuration elements.
  2. Add a column of the Text (50 characters) type to the replacement object schema. The column will store the data about the picked color. To do this, follow the procedure covered in a separate article: Develop configuration elements.
  3. Create a replacement view model of the section or record page to place the button. To do this, follow the procedure covered in a separate article: Develop configuration elements.
  4. Implement the button logic in the replacement model.
    1. Implement the following in the methods property:
      • The handler method triggered by a button click.
      • Auxiliary methods required for the control’s operation. These can be methods that regulate the visibility or availability of the control.
    2. Add a configuration object with the settings that determine the button position on the section or record page to the diff array of modifications.
      • Specify the COLOR_BUTTON type in the itemType property.
      • Bind the added replacement object’s schema column in the value property.

Add a tooltip to a button 

Tooltips are text messages that provide the user with additional information about the button functionality. Hover over a button to bring up its tooltip.

To add a tooltip to a button:

  1. Create a replacement view model of the section or record page to place the button. To do this, follow the procedure covered in a separate article: Develop configuration elements.
  2. Add a localizable string with the name of the button to the replacement model schema.
  3. Implement the tooltip in the diff array of changes to the replacement view model schema.

You can add tooltips to a button configuration object in several ways:

  • Use the hint property.
  • Use the tips property.

To add a tooltip to a button using the hint property, add a hint property with the tooltip text to the values ​​property of the control.

To add a tooltip to a button using the tips property:

  1. Add a tips property to the values ​​property of the control.
  2. Add a tooltip configuration object to the tips array using the insert operation.
  3. Add a content property with the tooltip text to the values property of the tooltip configuration object.

Using the tips property to add a tooltip to a button lets you:

  • change the display style
  • bind the tooltip visibility to a view model event
  • add controls, etc.

The types of elements that let you use the tips property:

  • Terrasoft.ViewItemType.BUTTON
  • Terrasoft.ViewItemType.LABEL
  • Terrasoft.ViewItemType.COLOR_BUTTON
  • Terrasoft.ViewItemType.HYPERLINK
  • Terrasoft.ViewItemType.INFORMATION_BUTTON
  • Elements that have the generator property specified
See also
DataService
Develop configuration elements
E-learning courses
Tech Hour - HOW TO USE BUTTONS AND ACTIONS TO EMPOWER CREATIO PAGES
Add a button to the section toolbar
Medium

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 

  1. Go to the Configuration section and select a custom package to add the schema.

  2. Click Add → Replacing view model on the section list toolbar.

  3. Fill out the schema properties.

    • Set Code to "AccountSectionV2."
    • Set Title to "Account section."
    • Set Parent object to "AccountSectionV2."

  4. Add a localizable string.

    1. Click scr_add_button.png 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.

  5. Implement the button logic.

    1. 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.
    2. 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*/[
            /* Metadata 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*/
    };
});
  6. Click Save on the Designer’s toolbar.

Outcome of the example 

To view the outcome of the example:

  1. Clear the browser cache.
  2. 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
Add a button to the toolbar of the record page in the combined mode
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 

  1. Go to the Configuration section and select a custom package to add the schema.

  2. Click Add → Replacing view model on the section list toolbar.

  3. Fill out the schema properties.

    • Set Code to "AccountSectionV2."
    • Set Title to "Account section."
    • Set Parent object to "AccountSectionV2."

  4. Add a localizable string.

    1. Click scr_add_button.png 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.

  5. Implement the button business logic.

    1. In the attributes property, add the ButtonEnabled attribute of the Terrasoft.DataValueType.BOOLEAN type, which preserves the accessibility state of the button.

    2. 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.
    3. 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: [
            /* Metadata 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"}
                }
            }
        ]
    };
});
  6. 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
Add a button to the toolbar of the add record page
Medium

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:

  1. Click to open the System Designer.
  2. Click System settings in the System setup block.
  3. Select the Enable account mini page add mode (the HasAccountMiniPageAddMode code) system setting.

  4. Clear the Default value checkbox.

  5. Log out from and log back into Creatio.

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

  1. Go to the Configuration section and select a custom package to which to add the schema.

  2. Click Add → Replacing view model on the section list toolbar.

  3. Fill out the schema properties.

    • Set Code to "AccountPageV2."
    • Set Title to "Account edit page."
    • Set Parent object to "AccountPageV2."

  4. Add a localizable string.

    1. Click scr_add_button.png 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.

  5. Implement the button logic.

    1. 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.
    2. 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: [
            /* Metadata 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
                }
            }
        ]
    };
});
  6. Click Save on the Designer’s toolbar.

Outcome of the example 

To view the outcome of the example:

  1. Refresh the Accounts section page.
  2. 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
Add a color picker button to the record page
Medium

Example. Add a color picker button to the product page.

1. Create a replacement object schema 

  1. Go to the Configuration section and select a custom package to add the schema.

  2. Click Add → Replacing object on the section list toolbar.

    scr_add_entity_schema_replaced.png

  3. Fill out the schema properties.

    • Set Code to "Product."
    • Set Title to "Product."
    • Set Parent object to "Product."

  4. Add a column to the schema.

    1. Click add_button in the context menu of the Columns node of the object structure.

    2. Click Text → Text (50 characters) in the dropdown menu.

    3. Fill out the properties of the added column.

      • Set Code to "UsrColor."
      • Set Title to " Color."
  5. Click Save, then Publish on the Object Designer’s toolbar.

2. Create a view model schema of the replacement product page 

  1. Go to the Configuration section and select a custom package to add the schema.

  2. Click Add → Replacing view model on the section list toolbar.

  3. Fill out the schema properties.

    • Set Code to "ProductPageV2."
    • Set Title to "Edit page - Product."
    • Set Parent object to "ProductPageV2."

  4. Set up the button layout. To do this, add a configuration object with the settings that determine the button position to the diff array of modifications.

    View the source code of the replacement view model of the product page below.

    ProductPageV2
    define("ProductPageV2", [], function() {
    return {
        /* The name of the record page entity schema. */
        entitySchemaName: "Product",
        /* Display the button on the record page. */
        diff: /**SCHEMA_DIFF*/[
            /* The color picker button. */
            {
                /* Run the operation that inserts the element to the page. */
                "operation": "insert",
                /* The meta name of the parent container to add the button. */
                "parentName": "ProductGeneralInfoBlock",
                /* Add the button to the element collection of the parent element. */
                "propertyName": "items",
                /* The meta name of the added button. */
                "name": "ColorButton",
                /* The properties to pass to the element’s constructor. */
                "values": {
                    /* Set the type of the added element to the color picker button. */
                    "itemType": this.Terrasoft.ViewItemType.COLOR_BUTTON,
                    /* Bind the value of the control to the view model column. */
                    "value": { "bindTo": "UsrColor" },
                    /* Set up the button layout. */
                    "layout": { 
                        /* The column number. */
                        "column": 5,
                        /* The row number. */
                        "row": 6, 
                        /* The column span. */
                        "colSpan": 12
                    }
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});
  5. Click Save on the Designer’s toolbar.

Outcome of the example 

To view the outcome of the example:

  1. Refresh the Products section page.
  2. Open the product page.

As a result, Creatio will add a color picker button to the product page.

Resources
Package with example implementation
Add a button tooltip
Advanced

Example. Add a tooltip to the Save button of the contact page.

Create a replacing view model schema of the contact page 

  1. Go to the Configuration section and select a custom package to add the schema.

  2. Click Add → Replacing view model on the section list toolbar.

  3. Fill out the schema properties.

    • Set Code to "ContactPageV2."
    • Set Title to "Display schema — Contact card."
    • Set Parent object to "ContactPageV2."

  4. Add a localizable string that contains the tooltip text.

    1. Click scr_add_button.png in the context menu of the Localizable strings node.

    2. Fill out the localizable string properties.

      • Set Code to "SaveButtonHint."
      • Set Value to "Press to save changes."
    3. Click Add to add a localizable string.

  5. Set up the tooltip for the Save button of the contact page. To do this, add the configuration object of the button on the page to the diff array of modifications.

    View the source code of the replacement view model of the contact page below. There are different ways to add a tooltip to a button configuration object.

    define("ContactPageV2", [], function () {
    return {
        /* The name of the record page entity schema. */
        entitySchemaName: "Contact",
        /* The tooltip view. */
        diff: /**SCHEMA_DIFF*/[
            /* Metadata to add the tooltip to the button. */
            {
                /* Run the operation that modifies the existing element. */
                "operation": "merge",
                /* 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 changed button. */
                "name": "SaveButton",
                /* The properties to pass to the element’s constructor. */
                "values": {
                    /* The button tooltip. */
                    "hint": { "bindTo": "Resources.Strings.SaveButtonHint" } 
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});

    define("ContactPageV2", [], function () {
    return {
        /* The name of the record page entity schema. */
        entitySchemaName: "Contact",
        /* The tooltip view. */
        diff: /**SCHEMA_DIFF*/[
            /* Metadata to add the tooltip to the button. */
            {
                /* Run the operation that modifies the existing element. */
                "operation": "merge",
                /* 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 changed button. */
                "name": "SaveButton",
                /* The properties to pass to the element’s constructor. */
                "values": {
                    /* The tooltip array for the button. */
                    "tips": ] 
                }
            },
            /* The configuration object for a simple tooltip. */
            {
                /* Run the operation that inserts the element. */
                "operation": "insert",
                /* The meta name of the added button. */
                "parentName": "SaveButton",
                /* Add the tooltip to the element collection of the parent element. */
                "propertyName": "tips",
                /* The meta name of the added tooltip. */
                "name": "CustomShowedTip",
                /* The properties to pass to the element’s constructor. */
                "values": {
                    /* The tooltip text. */
                    "content": {"bindTo": "Resources.Strings.SaveButtonHint"}
                    /* Here, you can additionally configure other parameters for the tooltip view and logic. */
                }
            },
        ]/**SCHEMA_DIFF*/
    };
});
  6. Click Save on the Designer’s toolbar.

Outcome of the example 

As a result, Creatio will add a tooltip to the Save button of the contact page.

Resources
Package with example implementation
Add a button to a section record row
Medium

Example. Add the Show age button to the row of the active record in the Contacts section. Display the age of the selected contact in a pop-up box on a button click.

Create a schema of the replacing section view model 

  1. Go to the Configuration section and select a custom package to add the schema.

  2. Click Add → Replacing view model on the section list toolbar.

  3. Fill out the schema properties.

    • Set Code to "ContactSectionV2."
    • Set Title to "Contact section."
    • Set Parent object to "ContactSectionV2."

  4. Add a localizable string.

    1. Click scr_add_button.png in the context menu of the Localizable strings node.

    2. Fill out the localizable string properties.

      • Set Code to "ShowAgeOfContactButtonCaption."
      • Set Value to "Show age."
    3. Click Add to add a localizable string.

  5. Implement the button logic.

    1. Implement the following methods in the methods property:

      • onActiveRowAction() – assigns a handler method to the button located in the row of the active section record.
      • onShowAgeButtonClicked() – the button click handler method. Returns the contact age in the pop-up box.
    2. 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 the value of the primary column of the selected record to get the values loaded into the field list of the selected object.

    View the source code of the replacing view model of the section page below:

    ContactSectionV2
    define("ContactSectionV2", ["ContactSectionV2Resources"], function (resources) {
    return {
        /* The name of the section entity schema. */
        entitySchemaName: "Contact",
        /* The methods of the section view model. */
        methods: {
            onActiveRowAction: function (buttonTag) {
                switch (buttonTag) {
                    case "showAgeButton":
                        this.onShowAgeButtonClicked();
                        break;
                    default:
                        this.callParent(arguments);
                        break;
                }
            },
            /* The button click handler method. */
            onShowAgeButtonClicked: function () {
                var message = "";
                var activeRow = this.getActiveRow();
                var recordId = activeRow.get("Id");
                /* Create a Terrasoft.EntitySchemaQuery class instance with the Contact root schema. */
                var esq = this.Ext.create("Terrasoft.EntitySchemaQuery", {
                    rootSchemaName: "Contact"
                });
                /* Add the age column. */
                esq.addColumn("Age", "Age");
                /* Get the record from the selection by ID. */
                esq.getEntity(recordId, function(result) {
                    if (!result.success) {
                        this.showInformationDialog("Error");
                        return;
                    }
                    message += "Age of contact is "+ result.entity.get("Age");
                    this.showInformationDialog(message);
                }, this);
            }
        },
        /* Display the button in the section. */
        diff: /**SCHEMA_DIFF*/[
            /* Metadata 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 added button. */
                "name": "DataGridActiveRowShowAgeButton",
                /* The meta name of the parent container to add the button. */
                "parentName": "DataGrid",
                /* Add the button to the element collection of the parent element. */
                "propertyName": "activeRowActions",
                /* The properties to pass to the element’s constructor. */
                "values": {
                    "className": "Terrasoft.Button",
                    "style": Terrasoft.controls.ButtonEnums.style.GREEN,
                    /* Bind the button title to the localizable schema string. */
                    "caption": resources.localizableStrings.ShowAgeOfContactButtonCaption,
                    "tag": "showAgeButton"
                }
            }
        ]/**SCHEMA_DIFF*/
    };
});
  6. Click Save on the Designer’s toolbar.

Outcome of the example 

To view the outcome of the example:

  1. Clear the browser cache.
  2. Refresh the Contacts section page.

As a result, Creatio will add the Show Age button to the row of the active record in the Contacts section. Click Show Age to open a pop-up box that displays the contact age.

Resources
Package with example implementation
diff property of the button object
Easy

The purpose of the diff modification array of the button object is to configure the button layout on the record page by using a configuration object. Set up the layout in the view model schema of the record page. Learn more about the schema properties in a different article: Client schema.

Properties 

operation

The button operation.

Available values
set Sets the button value using the values parameter.
merge Merges the values from the parent, replaced, and replacing schemas. The properties from the values parameter of the last descendant override the other values.
remove Deletes the button from the schema.
move Moves the button to a different parent element.
insert Adds the button to the schema. 
parentName

The meta name of the parent control element to place the button. If it is a functional button, LeftContainer and RightContainer can act as parent containers.

propertyName

The name of the parent element’s parameter. Specify the items value for the button.

name

The meta name of the added button.

values

A configuration object that contains settings for additional properties of the button.

Configuration object properties
itemType The element type. Set by the Terrasoft.ViewItemType enumeration. Use the BUTTON value for the button.
caption The button caption. We recommend setting the caption values by binding them to a localized schema string.
click Binds the button click handler method.
layout The object that contains the settings for the button location in the grid.
enabled Controls the button availability (active status).
visible Controls button visibility.
style

The component style. Set by the Terrasoft.controls.ButtonEnums.style enumeration.

Available values (Terrasoft.controls.ButtonEnums.style)
DEFAULT

Default style.

GREEN

The button color is green.

RED

The button color is red.

BLUE

The button color is blue.

GREY

The button color is grey.

TRANSPARENT

The button is transparent. The value from older Creatio versions.