How can I change a detail caption depending on the page?

Question

How can I change a detail caption for a specific edit page? Namely, I need to have one and the same detail named e.g., "Detail 1" in [Contacts] and "Detail 2" in [Accounts].

Answer

Add the following code in the diff property of the detail schema:

diff: /**SCHEMA_DIFF*/[
{
   "operation": "merge",
   "name": "Detail",
   "values": {
      "caption": {"bindTo": "getDetailCaption"}
   }
}
]/**SCHEMA_DIFF*/

In the method, analyze the name of the page that the detail belongs to and change caption for the needed one. For example:

getDetailCaption: function() {
   var cardPageName = this.get("CardPageName");
   if (cardPageName === "ActivityPageV2") {
      return "Name 1";
   }
   return "Name 2";
}

You can also use localizable strings. In standard configurations, a similar example can be found in the OpportunityContactDetailV2 schema.

/** * Sets the detail caption depending on the opened page. * @protected * @return {String} */
getDetailCaption: function() {
   var cardPageName = this.get("CardPageName");
   if (cardPageName === "OpportunityPageV2") {
      return this.get("Resources.Strings.InOpportunityCaption");
   }
   return this.get("Resources.Strings.InContactCaption");
},

Below is a practical example (the logic is implemented in ContactCommunicationDetail and AccountCommunicationDetail):

define("AccountCommunicationDetail", ["AccountCommunicationDetailResources", "terrasoft"],
    function(resources, Terrasoft) {
        return {
            entitySchemaName: "AccountCommunication",
            methods: {
                init: function() {
                    this.callParent(arguments);
                },
                getDetailCaption: function() {
                    var cardPageName = this.get("CardPageName");
                    if (cardPageName === "AccountPageV2") {
                        return "Communication option";
                    }
                    return "Account communication option";
                }
            },
            diff: /**SCHEMA_DIFF*/[
                {
                    "operation": "merge",
                    "name": "Detail",
                    "values": {
                        "caption": {"bindTo": "getDetailCaption"}
                    }
                }
            ]
        };
});

define("ContactCommunicationDetail", ["ContactCommunicationDetailResources", "terrasoft"],
    function(resources, Terrasoft) {
        return {
            methods: {
                init: function() {
                    this.callParent(arguments);
                },
                getDetailCaption: function() {
                    var cardPageName = this.get("CardPageName");
                    if (cardPageName === "ContactPageV2") {
                        return "Communication options";
                    }
                    return "Contact communication options";
                }
            },
            diff: /**SCHEMA_DIFF*/[
                {
                    "operation": "merge",
                    "name": "Detail",
                    "values": {
                        "caption": {"bindTo": "getDetailCaption"}
                    }
                }
            ]
        };
});

Clear the browser cache.