Question

Opportunity timeline customization

18:47 Feb 09, 2023

Dear community,

I'm trying to modify the opportunity timeline record on the account timeline tab.

My aim is to replace buget visualization with the opportunity amount value

I tried to change the "Data" column associated with opportunity in "TimelineTileSetting" table. But it didn't work.

I tried also to replace the "OpportunityTimelineItemView" view model but I wasn't able to find it in the lists of replacing objects but the only one available was "TimelineSchema" but using it the page had errors and the code didn't work.

Can you help me to achieve this result?

Thank you!

Best regards,

Clara

2 comments

Oleg Drobina

13:00 Feb 13, 2023

Hello Clara,

Here is the tested list of steps to do to replace the "Budget" column with the "Amount" column:

1) Create a module in the package for development with the UsrOpportunityTimelineItemViewModel title and code. Specify the following content in the module:

define("UsrOpportunityTimelineItemViewModel", ["OpportunityTimelineItemViewModel", "UsrOpportunityTimelineItemViewModelResources"],
	function() {
		Ext.define("Terrasoft.configuration.UsrOpportunityTimelineItemViewModel", {
			alternateClassName: "Terrasoft.UsrOpportunityTimelineItemViewModel",
			extend: "Terrasoft.OpportunityTimelineItemViewModel",
 
			initDefaultValues: function() {
				this.callParent(arguments);
			}
 
		});
	});

2) In this created module add the "AmountLabel" localizable string.

3) Create a module in the package for development with the UsrOpportunityTimelineItemView title and code. Specify the following content in the module:

define("UsrOpportunityTimelineItemView", ["UsrOpportunityTimelineItemViewResources", "OpportunityTimelineItemView"],
	function() {
 
	Ext.define("Terrasoft.configuration.UsrOpportunityTimelineItemView", {
		extend: "Terrasoft.OpportunityTimelineItemView",
		alternateClassName: "Terrasoft.UsrOpportunityTimelineItemView",
 
		getOpportunityInfoContainerViewConfig: function() {
			var amountFieldConfig = {
				"textValueConverter": "getFormattedFloatNumberValue"
			};
			return {
				"name": "OpportunityInfoContainer",
				"itemType": Terrasoft.ViewItemType.CONTAINER,
				"classes": {
					"wrapClassName": ["timeline-tile-info-container"]
				},
				"items": [
					this.getTextWithLabelContainerViewConfig("Resources.Strings.LeadTypeLabel", "LeadType"),
					this.getTextWithLabelContainerViewConfig("Resources.Strings.AmountLabel", "Amount", amountFieldConfig),
					this.getTextWithLabelContainerViewConfig("Resources.Strings.StageLabel", "Stage")
				]
			};
		}
	});
});

4) Perform the following update in the database:

update "TimelineTileSetting"
set "Data" = '{
  "entitySchemaName": "Opportunity",
  "viewModelClassName": "Terrasoft.UsrOpportunityTimelineItemViewModel",
  "viewClassName": "Terrasoft.UsrOpportunityTimelineItemView",
  "orderColumnName": "CreatedOn",
  "authorColumnName": "Owner",
  "captionColumnName": "Title",
  "columns": [
    {
      "columnName": "Type.Name",
      "columnAlias": "TypeName"
    },
    {
      "columnName": "Stage",
      "columnAlias": "Stage"
    },
    {
      "columnName": "Account.Name",
      "columnAlias": "AccountName"
    },
    {
      "columnName": "Contact.Name",
      "columnAlias": "ContactName"
    },
    {
      "columnName": "Budget",
      "columnAlias": "Budget"
    },
	{
	  "columnName": "Amount",
      "columnAlias": "Amount"
	},
    {
      "columnName": "LeadType",
      "columnAlias": "LeadType"
    }
  ]
}'
where "Name" = 'Opportunities'

5) Relogin to the application.

As a result the opportunity amount will be displayed instead of the budget.

You were not able to replace OpportunityTimelineItemView and Model since they were created via Ext.define so should be replaced\extended\overriden using Ext.define. Addtionally we need to pass information on the "Amount" column to the tile settings in the database (according to the Academy article here).

Clara Fioranzato

18:49 Feb 14, 2023

Hi Oleg,

I did almost the same steps you described.

I did it on two development environements and I it worked correctly.

When I replicate the update in the production environment I get these errors:

Uncaught Error: Script error for "UsrOpportunityTimelineItemView"
http://requirejs.org/docs/errors.html#scripterror
    at new s (main.js?hash=8716580e8eb54d378ae4e475f2b80589:1:826)
    at makeError (require.js:168:17)
    at HTMLScriptElement.onScriptError (require.js:1744:36)
    at T.invokeTask (polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:7099)
    at M.runTask (polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:2494)
    at m.invokeTask [as invoke] (polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:8150)
    at O (polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:20091)
    at HTMLScriptElement.S (polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:20335)
polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1 
 
       Uncaught Error: Script error for "UsrOpportunityTimelineItemViewModel"
http://requirejs.org/docs/errors.html#scripterror
    at new s (main.js?hash=8716580e8eb54d378ae4e475f2b80589:1:826)
    at makeError (require.js:168:17)
    at HTMLScriptElement.onScriptError (require.js:1744:36)
    at T.invokeTask (polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:7099)
    at M.runTask (polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:2494)
    at m.invokeTask [as invoke] (polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:8150)
    at O (polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:20091)
    at HTMLScriptElement.S (polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:20335)
core-base.js:711 
 
       user: Supervisor/7f3b869f-34f3-4f20-ab4d-7480a5fdf647
 file: https://usrtestenvironment.creatio.com/core/6a203db3d78c1387d1d4376482705fca/ng-core/src/polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589
 line: 1
 column: 2568
 message: Uncaught Error: Script error for "UsrOpportunityTimelineItemView"
http://requirejs.org/docs/errors.html#scripterror 
 date: Tue Feb 14 2023 17:29:07 GMT+0100 (Central European Standard Time)
 stack: Error: Script error for "UsrOpportunityTimelineItemView"
http://requirejs.org/docs/errors.html#scripterror
    at new s (https://usrtestenvironment.creatio.com/core/bcdfb6b2178f296b4c72350aeb858319/ng-core/src/main.js?hash=8716580e8eb54d378ae4e475f2b80589:1:826)
    at makeError (https://usrtestenvironment.creatio.com/core/057665f97324038f6c7c326b6734de6b/requirejs/require.js:168:17)
    at HTMLScriptElement.onScriptError (https://usrtestenvironment.creatio.com/core/057665f97324038f6c7c326b6734de6b/requirejs/require.js:1744:36)
    at T.invokeTask (https://usrtestenvironment.creatio.com/core/6a203db3d78c1387d1d4376482705fca/ng-core/src/polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:7099)
    at M.runTask (https://usrtestenvironment.creatio.com/core/6a203db3d78c1387d1d4376482705fca/ng-core/src/polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:2494)
    at m.invokeTask [as invoke] (https://usrtestenvironment.creatio.com/core/6a203db3d78c1387d1d4376482705fca/ng-core/src/polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:8150)
    at O (https://usrtestenvironment.creatio.com/core/6a203db3d78c1387d1d4376482705fca/ng-core/src/polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:20091)
    at HTMLScriptElement.S (https://usrtestenvironment.creatio.com/core/6a203db3d78c1387d1d4376482705fca/ng-core/src/polyfills.js?hash=8716580e8eb54d378ae4e475f2b80589:1:20335)

Why do I get them only on one environment?

The development environment is a 8.0.4 version, the test environment is a 8.0.6 version and the production envrionmnent is a 8.0.4 version. In the last I get the errors.

My difference is that in the ViewItem module I referenced the BaseViewModel and not the OpportunityTimeline orginal module.

define("UsrOpportunityTimelineItemView", ["BaseTimelineItemView"], function() {
 
	Ext.define("Terrasoft.configuration.UsrOpportunityTimelineItemView", {
		extend: "Terrasoft.BaseTimelineItemView",
		alternateClassName: "Terrasoft.UsrOpportunityTimelineItemView",

Thank you for you help!

Show all comments