Hi Creatio Community,

 

I've been trying to create custom Actions dropdown button (not FreedomUI) and I can't seem to be able to find working documentation for it or get something similar to it.  Would like your help for it.





 

Here are a couple of documentations I've tried out (First one is not working while the second one isn't exactly what we want):

 

1. https://community.creatio.com/questions/add-custom-buttons-actionbutton…



2. https://community.creatio.com/articles/how-create-and-popualte-drop-dow…

 

Thanks in advance.

 

Regards,

Abilash.S

Like 0

Like

3 comments
Best reply

Abilash,

 

Hi,

 

The task is to copy the logic of the existing "Actions" button and apply the same to the custom button. To do that (tested in the "Opportunity" section):

 

1) In the OpportunitySectionV2 section schema:

 

1.1) Add the CombinedModeCustomActionsButtonMenuItems attribute of the "Collection" dataValueType (Terrasoft.DataValueType.COLLECTION). The example is CombinedModeActionsButtonMenuItems from BaseDataView.

1.2) Create a PTP "GetCardActionsCustom" message with the SUBSCRIBE direction (as done on the BasePageV2)

1.3) In the subscribeSandboxEvents method subscribe to the "GetCardActionsCustom" message and trigger the initCustomActionButtonMenu method when the "GetCardActionsCustom" message is received (as done for the "GetCardActions" message on the BasePageV2)

1.4) Create an extension of the _initCollections method (as done for the basic "Actions" button)

1.5) Add an empty prepareCustomActionsButtonMenuItems function to methods (as done for prepareActionsButtonMenuItems method in BaseDataView)

1.6) Add the initCustomActionButtonMenu method which is a handler for the "GetCardActionsCustom" message (as done with the initActionButtonMenu method from BaseDataView).

1.7) Add the button itself to the diff array

 

The complete schema of OpportunitySectionV2:

define("OpportunitySectionV2", [], function() {
	return {
		entitySchemaName: "Opportunity",
		attributes: {
 
			"CombinedModeCustomActionsButtonMenuItems": {
				dataValueType: Terrasoft.DataValueType.COLLECTION
			}
		},
		messages: {
 
			"GetCardActionsCustom": {
				mode: Terrasoft.MessageMode.PTP,
				direction: Terrasoft.MessageDirectionType.SUBSCRIBE
			}
		},
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"name": "CustomActionsButton",
				"parentName": "CombinedModeActionButtonsCardLeftContainer",
				"propertyName": "items",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"caption": {"bindTo": "Resources.Strings.CustomActionsButtonCaption"},
					"classes": {
						"textClass": ["actions-button-margin-right"],
						"wrapperClass": ["actions-button-margin-right"]
					},
					"prepareMenu": {"bindTo": "prepareCustomActionsButtonMenuItems"},
					"menu": {"items": {"bindTo": "CombinedModeCustomActionsButtonMenuItems"}}
				}
			},
		]/**SCHEMA_DIFF*/,
		methods: {
 
			subscribeSandboxEvents: function() {
				this.callParent(arguments);
				const cardModuleSandboxId = this.getCardModuleSandboxId();
				this.sandbox.subscribe("GetCardActionsCustom", function(actionMenuItems) {
					this.initCustomActionButtonMenu("Combined", actionMenuItems);
				}, this, [cardModuleSandboxId]);
			},
 
			prepareCustomActionsButtonMenuItems: Ext.emptyFn,
 
			_initCollections: function() {
				this.callParent(arguments);
				this.set("CombinedModeCustomActionsButtonMenuItems", this.Ext.create("Terrasoft.BaseViewModelCollection"));
			},
 
			initCustomActionButtonMenu: function(modeType, actionMenuItems) {
				const collectionName = modeType + "ModeCustomActionsButtonMenuItems";
				const collection = this.get(collectionName);
				if (actionMenuItems.getCount()) {
					this.set(modeType + "ModeActionsButtonVisible", true);
					const newCollection = this.Ext.create("Terrasoft.BaseViewModelCollection");
					actionMenuItems.each(function(item) {
						newCollection.addItem(item);
					}, this);
					if (collection) {
						collection.clear();
						collection.loadAll(newCollection);
					} else {
						this.set(collectionName, newCollection);
					}
				} else {
					this.set(modeType + "ModeActionsButtonVisible", false);
				}
			},
		}
	};
});

2) In OpportunityPageV2:

 

2.1) Create the "GetCardActionsCustom" message (as done for the "GetCardActions" existing message)

2.2) In the init method call the initCustomActionButtonMenu method

2.3) Create the initCustomActionButtonMenu method (as done for the initActionButtonMenu in BasePageV2)

2.4) Create the getCustomActions method (as done with the getActions method in the basic OpportunityPageV2 with only difference that you don't need to call parent method but create an instance of the Terrasoft.BaseViewModelCollection here)

2.5) Add the button itself to the diff array

 

The complete code is:

define("OpportunityPageV2", [], function() {
	return {
		entitySchemaName: "Opportunity",
		attributes: {},
		messages: {
			"GetCardActionsCustom": {
				mode: this.Terrasoft.MessageMode.PTP,
				direction: this.Terrasoft.MessageDirectionType.PUBLISH
			}
		},
		modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
		details: /**SCHEMA_DETAILS*/{
			"UsrSchemaf6483d73Detaile560e0a4": {
				"schemaName": "UsrSchemaf6483d73Detail",
				"entitySchemaName": "UsrOppTestDet",
				"filter": {
					"detailColumn": "UsrOpportunity",
					"masterColumn": "Id"
				}
			}
		}/**SCHEMA_DETAILS*/,
		businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,
		methods: {
 
			init: function() {
				this.callParent(arguments);
				this.initCustomActionButtonMenu();
			},
 
			initCustomActionButtonMenu: function() {
				this.publishPropertyValueToSection("IsCardInEditMode", this.isEditMode());
				var actionMenuItems = this.getCustomActions();
				var actionsButtonVisible = !actionMenuItems.isEmpty();
				this.set("CustomActionsButtonVisible", actionsButtonVisible);
				this.set("CustomActionsButtonMenuItems", actionMenuItems);
				this.sandbox.publish("GetCardActionsCustom", actionMenuItems, [this.sandbox.id]);
			},
 
			getCustomActions: function() {
				var actionMenuItems = this.Ext.create("Terrasoft.BaseViewModelCollection");
				actionMenuItems.addItem(this.getButtonMenuItem({
					"Caption": {"bindTo": "Resources.Strings.CustomButtonCaption"},
					"Tag": "clickCustomButton"
				}));
				return actionMenuItems;
			}
		},
		dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"parentName": "LeftContainer",
				"propertyName": "items",
				"name": "actions",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"caption": {"bindTo": "Resources.Strings.CustomButtonCaption"},
					"classes": {
						"textClass": ["actions-button-margin-right"],
						"wrapperClass": ["actions-button-margin-right"]
					},
					"menu": {
						"items": {"bindTo": "CustomActionsButtonMenuItems"}
					},
					"visible": {"bindTo": "CustomActionsButtonVisible"}
				}
			},
			{
				"operation": "merge",
				"name": "MetricsContainer",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 0
					}
				}
			},
			{
				"operation": "merge",
				"name": "OpportunityClient",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 1
					}
				}
			},
			{
				"operation": "remove",
				"name": "OpportunityClient",
				"properties": [
					"tip"
				]
			},
			{
				"operation": "merge",
				"name": "LablelMetricsContainer",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 2
					}
				}
			},
			{
				"operation": "merge",
				"name": "BantProfileHeaderContainer",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 0
					}
				}
			},
			{
				"operation": "merge",
				"name": "BantIcon",
				"values": {
					"layout": {
						"colSpan": 5,
						"rowSpan": 1,
						"column": 0,
						"row": 0
					}
				}
			},
			{
				"operation": "merge",
				"name": "BantHeaderCaption",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 5,
						"row": 0
					}
				}
			},
			{
				"operation": "merge",
				"name": "OpportunityBudget",
				"values": {
					"layout": {
						"colSpan": 19,
						"rowSpan": 1,
						"column": 5,
						"row": 1
					}
				}
			},
			{
				"operation": "merge",
				"name": "OpportunityDecisionMaker",
				"values": {
					"layout": {
						"colSpan": 19,
						"rowSpan": 1,
						"column": 5,
						"row": 2
					}
				}
			},
			{
				"operation": "merge",
				"name": "OpportunityLeadType",
				"values": {
					"layout": {
						"colSpan": 19,
						"rowSpan": 1,
						"column": 5,
						"row": 3
					}
				}
			},
			{
				"operation": "move",
				"name": "OpportunityLeadType",
				"parentName": "BantProfile",
				"propertyName": "items",
				"index": 3
			},
			{
				"operation": "merge",
				"name": "OpportunityDueDate",
				"values": {
					"layout": {
						"colSpan": 19,
						"rowSpan": 1,
						"column": 5,
						"row": 4
					}
				}
			},
			{
				"operation": "merge",
				"name": "ESNTab",
				"values": {
					"order": 8
				}
			},
			{
				"operation": "merge",
				"name": "GeneralInfoTab",
				"values": {
					"order": 0
				}
			},
			{
				"operation": "merge",
				"name": "OpportunityTitle",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 2
					}
				}
			},
			{
				"operation": "merge",
				"name": "Amount",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 3
					}
				}
			},
			{
				"operation": "merge",
				"name": "ResponsibleDepartment",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 3
					}
				}
			},
			{
				"operation": "move",
				"name": "ResponsibleDepartment",
				"parentName": "OpportunityPageGeneralBlock",
				"propertyName": "items",
				"index": 3
			},
			{
				"operation": "merge",
				"name": "Probability",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 4
					}
				}
			},
			{
				"operation": "merge",
				"name": "Owner",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 4
					}
				}
			},
			{
				"operation": "merge",
				"name": "Category",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 5
					}
				}
			},
			{
				"operation": "merge",
				"name": "Source",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 5
					}
				}
			},
			{
				"operation": "merge",
				"name": "Type",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 6
					}
				}
			},
			{
				"operation": "move",
				"name": "Type",
				"parentName": "OpportunityPageGeneralBlock",
				"propertyName": "items",
				"index": 8
			},
			{
				"operation": "merge",
				"name": "CreatedOn",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 6
					}
				}
			},
			{
				"operation": "merge",
				"name": "Partner",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 7
					}
				}
			},
			{
				"operation": "merge",
				"name": "CloseReason",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 7
					}
				}
			},
			{
				"operation": "insert",
				"name": "DATETIME26d46360-17b4-45ee-acac-da084cf0aa67",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 8,
						"layoutName": "OpportunityPageGeneralBlock"
					},
					"bindTo": "UsrTestDateTime",
					"enabled": true
				},
				"parentName": "OpportunityPageGeneralBlock",
				"propertyName": "items",
				"index": 12
			},
			{
				"operation": "merge",
				"name": "Description",
				"values": {
					"layout": {
						"colSpan": 23,
						"rowSpan": 1,
						"column": 1,
						"row": 0
					}
				}
			},
			{
				"operation": "insert",
				"name": "UsrSchemaf6483d73Detaile560e0a4",
				"values": {
					"itemType": 2,
					"markerValue": "added-detail"
				},
				"parentName": "GeneralInfoTab",
				"propertyName": "items",
				"index": 5
			},
			{
				"operation": "merge",
				"name": "LeadTab",
				"values": {
					"order": 4
				}
			},
			{
				"operation": "merge",
				"name": "TacticAndCompetitorTab",
				"values": {
					"order": 1
				}
			},
			{
				"operation": "merge",
				"name": "CheckDate",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 2
					}
				}
			},
			{
				"operation": "merge",
				"name": "ProductsTab",
				"values": {
					"order": 2
				}
			},
			{
				"operation": "merge",
				"name": "HistoryTab",
				"values": {
					"order": 5
				}
			},
			{
				"operation": "merge",
				"name": "HistoryAccountTab",
				"values": {
					"order": 6
				}
			},
			{
				"operation": "merge",
				"name": "NotesTab",
				"values": {
					"order": 7
				}
			},
			{
				"operation": "move",
				"name": "IsPrimary",
				"parentName": "OpportunityPageGeneralBlock",
				"propertyName": "items",
				"index": 0
			}
		]/**SCHEMA_DIFF*/
	};
});

As a result when opening the page you will get a custom button with items:

Also forgot to metion that you need to add localizable strings:

 

1) For OpportunityPageV2

 

CustomButtonCaption with "Custom action" value

 

2) For OpportunitySectionV2

 

CustomButtonCaption with "Custom button" value

 

Hope this example help!

 

 

Hello,



Could you please write in more detail, regarding the first option that suits you, what exactly are the difficulties you encountered? 

Malika,

Hello, 



Currently, I'm just getting a button with no dropdown like this







Here's the code for it:





//I've tried two different approaches for the method (both didn't work) based on the above two documentation

methods: {





//approach1



prepareMyActionsButtonMenuItems: function(filter, list) {

                if (list === null) {

                    return;

                }

                list.clear();

                var columns = {};

 

                var value1 = {

                    displayValue: "a123",

                    value: "1"

                };

                var value2 = {

                    displayValue: "b234",

                    value: "2"

                };

                var value3 = {

                    displayValue: "c345",

                    value: "3"

                };

 

                columns[1] = value1;

                columns[2] = value2;

                columns[3] = value3;

 

                list.loadAll(columns);

            },



//approach 2



prepareMyActionsButtonMenuItems: function(){

                this.set("MyActionsButtonMenuItems", ["Sample", "test", "Test5"]);

            }



}





attributes: {



              "MyActionsButtonMenuItems": {

                dataValueType: Terrasoft.DataValueType.COLLECTION,

              }

}



diff:[

{

                "operation": "insert",

                "name": "MyActionsButton",

                "parentName": "RightContainer",

                "propertyName": "items",

                "values": {

                      "itemType": Terrasoft.ViewItemType.BUTTON,

                      "caption": "MyActionsButton",

                      "classes": {

                        "textClass": ["actions-button-margin-right"],

                        "wrapperClass": ["actions-button-margin-right"]

                      },

                      "prepareMenu": {"bindTo": "prepareMyActionsButtonMenuItems"},

                      "menu": {"items": {"bindTo": "MyActionsButtonMenuItems"}},

                      "visible": true

                }

              }

]

Abilash,

 

Hi,

 

The task is to copy the logic of the existing "Actions" button and apply the same to the custom button. To do that (tested in the "Opportunity" section):

 

1) In the OpportunitySectionV2 section schema:

 

1.1) Add the CombinedModeCustomActionsButtonMenuItems attribute of the "Collection" dataValueType (Terrasoft.DataValueType.COLLECTION). The example is CombinedModeActionsButtonMenuItems from BaseDataView.

1.2) Create a PTP "GetCardActionsCustom" message with the SUBSCRIBE direction (as done on the BasePageV2)

1.3) In the subscribeSandboxEvents method subscribe to the "GetCardActionsCustom" message and trigger the initCustomActionButtonMenu method when the "GetCardActionsCustom" message is received (as done for the "GetCardActions" message on the BasePageV2)

1.4) Create an extension of the _initCollections method (as done for the basic "Actions" button)

1.5) Add an empty prepareCustomActionsButtonMenuItems function to methods (as done for prepareActionsButtonMenuItems method in BaseDataView)

1.6) Add the initCustomActionButtonMenu method which is a handler for the "GetCardActionsCustom" message (as done with the initActionButtonMenu method from BaseDataView).

1.7) Add the button itself to the diff array

 

The complete schema of OpportunitySectionV2:

define("OpportunitySectionV2", [], function() {
	return {
		entitySchemaName: "Opportunity",
		attributes: {
 
			"CombinedModeCustomActionsButtonMenuItems": {
				dataValueType: Terrasoft.DataValueType.COLLECTION
			}
		},
		messages: {
 
			"GetCardActionsCustom": {
				mode: Terrasoft.MessageMode.PTP,
				direction: Terrasoft.MessageDirectionType.SUBSCRIBE
			}
		},
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"name": "CustomActionsButton",
				"parentName": "CombinedModeActionButtonsCardLeftContainer",
				"propertyName": "items",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"caption": {"bindTo": "Resources.Strings.CustomActionsButtonCaption"},
					"classes": {
						"textClass": ["actions-button-margin-right"],
						"wrapperClass": ["actions-button-margin-right"]
					},
					"prepareMenu": {"bindTo": "prepareCustomActionsButtonMenuItems"},
					"menu": {"items": {"bindTo": "CombinedModeCustomActionsButtonMenuItems"}}
				}
			},
		]/**SCHEMA_DIFF*/,
		methods: {
 
			subscribeSandboxEvents: function() {
				this.callParent(arguments);
				const cardModuleSandboxId = this.getCardModuleSandboxId();
				this.sandbox.subscribe("GetCardActionsCustom", function(actionMenuItems) {
					this.initCustomActionButtonMenu("Combined", actionMenuItems);
				}, this, [cardModuleSandboxId]);
			},
 
			prepareCustomActionsButtonMenuItems: Ext.emptyFn,
 
			_initCollections: function() {
				this.callParent(arguments);
				this.set("CombinedModeCustomActionsButtonMenuItems", this.Ext.create("Terrasoft.BaseViewModelCollection"));
			},
 
			initCustomActionButtonMenu: function(modeType, actionMenuItems) {
				const collectionName = modeType + "ModeCustomActionsButtonMenuItems";
				const collection = this.get(collectionName);
				if (actionMenuItems.getCount()) {
					this.set(modeType + "ModeActionsButtonVisible", true);
					const newCollection = this.Ext.create("Terrasoft.BaseViewModelCollection");
					actionMenuItems.each(function(item) {
						newCollection.addItem(item);
					}, this);
					if (collection) {
						collection.clear();
						collection.loadAll(newCollection);
					} else {
						this.set(collectionName, newCollection);
					}
				} else {
					this.set(modeType + "ModeActionsButtonVisible", false);
				}
			},
		}
	};
});

2) In OpportunityPageV2:

 

2.1) Create the "GetCardActionsCustom" message (as done for the "GetCardActions" existing message)

2.2) In the init method call the initCustomActionButtonMenu method

2.3) Create the initCustomActionButtonMenu method (as done for the initActionButtonMenu in BasePageV2)

2.4) Create the getCustomActions method (as done with the getActions method in the basic OpportunityPageV2 with only difference that you don't need to call parent method but create an instance of the Terrasoft.BaseViewModelCollection here)

2.5) Add the button itself to the diff array

 

The complete code is:

define("OpportunityPageV2", [], function() {
	return {
		entitySchemaName: "Opportunity",
		attributes: {},
		messages: {
			"GetCardActionsCustom": {
				mode: this.Terrasoft.MessageMode.PTP,
				direction: this.Terrasoft.MessageDirectionType.PUBLISH
			}
		},
		modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
		details: /**SCHEMA_DETAILS*/{
			"UsrSchemaf6483d73Detaile560e0a4": {
				"schemaName": "UsrSchemaf6483d73Detail",
				"entitySchemaName": "UsrOppTestDet",
				"filter": {
					"detailColumn": "UsrOpportunity",
					"masterColumn": "Id"
				}
			}
		}/**SCHEMA_DETAILS*/,
		businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,
		methods: {
 
			init: function() {
				this.callParent(arguments);
				this.initCustomActionButtonMenu();
			},
 
			initCustomActionButtonMenu: function() {
				this.publishPropertyValueToSection("IsCardInEditMode", this.isEditMode());
				var actionMenuItems = this.getCustomActions();
				var actionsButtonVisible = !actionMenuItems.isEmpty();
				this.set("CustomActionsButtonVisible", actionsButtonVisible);
				this.set("CustomActionsButtonMenuItems", actionMenuItems);
				this.sandbox.publish("GetCardActionsCustom", actionMenuItems, [this.sandbox.id]);
			},
 
			getCustomActions: function() {
				var actionMenuItems = this.Ext.create("Terrasoft.BaseViewModelCollection");
				actionMenuItems.addItem(this.getButtonMenuItem({
					"Caption": {"bindTo": "Resources.Strings.CustomButtonCaption"},
					"Tag": "clickCustomButton"
				}));
				return actionMenuItems;
			}
		},
		dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "insert",
				"parentName": "LeftContainer",
				"propertyName": "items",
				"name": "actions",
				"values": {
					"itemType": Terrasoft.ViewItemType.BUTTON,
					"caption": {"bindTo": "Resources.Strings.CustomButtonCaption"},
					"classes": {
						"textClass": ["actions-button-margin-right"],
						"wrapperClass": ["actions-button-margin-right"]
					},
					"menu": {
						"items": {"bindTo": "CustomActionsButtonMenuItems"}
					},
					"visible": {"bindTo": "CustomActionsButtonVisible"}
				}
			},
			{
				"operation": "merge",
				"name": "MetricsContainer",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 0
					}
				}
			},
			{
				"operation": "merge",
				"name": "OpportunityClient",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 1
					}
				}
			},
			{
				"operation": "remove",
				"name": "OpportunityClient",
				"properties": [
					"tip"
				]
			},
			{
				"operation": "merge",
				"name": "LablelMetricsContainer",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 2
					}
				}
			},
			{
				"operation": "merge",
				"name": "BantProfileHeaderContainer",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 0
					}
				}
			},
			{
				"operation": "merge",
				"name": "BantIcon",
				"values": {
					"layout": {
						"colSpan": 5,
						"rowSpan": 1,
						"column": 0,
						"row": 0
					}
				}
			},
			{
				"operation": "merge",
				"name": "BantHeaderCaption",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 5,
						"row": 0
					}
				}
			},
			{
				"operation": "merge",
				"name": "OpportunityBudget",
				"values": {
					"layout": {
						"colSpan": 19,
						"rowSpan": 1,
						"column": 5,
						"row": 1
					}
				}
			},
			{
				"operation": "merge",
				"name": "OpportunityDecisionMaker",
				"values": {
					"layout": {
						"colSpan": 19,
						"rowSpan": 1,
						"column": 5,
						"row": 2
					}
				}
			},
			{
				"operation": "merge",
				"name": "OpportunityLeadType",
				"values": {
					"layout": {
						"colSpan": 19,
						"rowSpan": 1,
						"column": 5,
						"row": 3
					}
				}
			},
			{
				"operation": "move",
				"name": "OpportunityLeadType",
				"parentName": "BantProfile",
				"propertyName": "items",
				"index": 3
			},
			{
				"operation": "merge",
				"name": "OpportunityDueDate",
				"values": {
					"layout": {
						"colSpan": 19,
						"rowSpan": 1,
						"column": 5,
						"row": 4
					}
				}
			},
			{
				"operation": "merge",
				"name": "ESNTab",
				"values": {
					"order": 8
				}
			},
			{
				"operation": "merge",
				"name": "GeneralInfoTab",
				"values": {
					"order": 0
				}
			},
			{
				"operation": "merge",
				"name": "OpportunityTitle",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 2
					}
				}
			},
			{
				"operation": "merge",
				"name": "Amount",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 3
					}
				}
			},
			{
				"operation": "merge",
				"name": "ResponsibleDepartment",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 3
					}
				}
			},
			{
				"operation": "move",
				"name": "ResponsibleDepartment",
				"parentName": "OpportunityPageGeneralBlock",
				"propertyName": "items",
				"index": 3
			},
			{
				"operation": "merge",
				"name": "Probability",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 4
					}
				}
			},
			{
				"operation": "merge",
				"name": "Owner",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 4
					}
				}
			},
			{
				"operation": "merge",
				"name": "Category",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 5
					}
				}
			},
			{
				"operation": "merge",
				"name": "Source",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 5
					}
				}
			},
			{
				"operation": "merge",
				"name": "Type",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 6
					}
				}
			},
			{
				"operation": "move",
				"name": "Type",
				"parentName": "OpportunityPageGeneralBlock",
				"propertyName": "items",
				"index": 8
			},
			{
				"operation": "merge",
				"name": "CreatedOn",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 6
					}
				}
			},
			{
				"operation": "merge",
				"name": "Partner",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 7
					}
				}
			},
			{
				"operation": "merge",
				"name": "CloseReason",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 7
					}
				}
			},
			{
				"operation": "insert",
				"name": "DATETIME26d46360-17b4-45ee-acac-da084cf0aa67",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 0,
						"row": 8,
						"layoutName": "OpportunityPageGeneralBlock"
					},
					"bindTo": "UsrTestDateTime",
					"enabled": true
				},
				"parentName": "OpportunityPageGeneralBlock",
				"propertyName": "items",
				"index": 12
			},
			{
				"operation": "merge",
				"name": "Description",
				"values": {
					"layout": {
						"colSpan": 23,
						"rowSpan": 1,
						"column": 1,
						"row": 0
					}
				}
			},
			{
				"operation": "insert",
				"name": "UsrSchemaf6483d73Detaile560e0a4",
				"values": {
					"itemType": 2,
					"markerValue": "added-detail"
				},
				"parentName": "GeneralInfoTab",
				"propertyName": "items",
				"index": 5
			},
			{
				"operation": "merge",
				"name": "LeadTab",
				"values": {
					"order": 4
				}
			},
			{
				"operation": "merge",
				"name": "TacticAndCompetitorTab",
				"values": {
					"order": 1
				}
			},
			{
				"operation": "merge",
				"name": "CheckDate",
				"values": {
					"layout": {
						"colSpan": 12,
						"rowSpan": 1,
						"column": 12,
						"row": 2
					}
				}
			},
			{
				"operation": "merge",
				"name": "ProductsTab",
				"values": {
					"order": 2
				}
			},
			{
				"operation": "merge",
				"name": "HistoryTab",
				"values": {
					"order": 5
				}
			},
			{
				"operation": "merge",
				"name": "HistoryAccountTab",
				"values": {
					"order": 6
				}
			},
			{
				"operation": "merge",
				"name": "NotesTab",
				"values": {
					"order": 7
				}
			},
			{
				"operation": "move",
				"name": "IsPrimary",
				"parentName": "OpportunityPageGeneralBlock",
				"propertyName": "items",
				"index": 0
			}
		]/**SCHEMA_DIFF*/
	};
});

As a result when opening the page you will get a custom button with items:

Also forgot to metion that you need to add localizable strings:

 

1) For OpportunityPageV2

 

CustomButtonCaption with "Custom action" value

 

2) For OpportunitySectionV2

 

CustomButtonCaption with "Custom button" value

 

Hope this example help!

 

 

Show all comments

Show a button if the selected entry has certain conditions ("Test.Lookup == Test 1")

 

Example

Card: Lead

Lookup: Stage Lead

value: one of the stages

 

 

diff: /**SCHEMA_DIFF*/[           

               {

                  "operation": "insert",

                "name": "NewButton",

                "values": {

                    "itemType": 5,

                    "style": "red",

                    "caption": {"bindTo": "Resources.Strings.NewButtonCaption"},

                    "click": {"bindTo": "onProcess1"},

                    "enabled": true,

                    "visible": true,

/**How to Show/Hide the custom button

                    

                        "classes": {

                        "textClass": [

                            "actions-button-margin-right"

                        ]

                    }

                },

                "parentName": "ActionButtonsContainer",

                "propertyName": "items",

File attachments
Like 0

Like

1 comments

Hello,

To do this, you'll do the following: 

  1. Add a boolean attribute
  2. Bind the boolean attribute to the visible property of the button
  3. Set the attribute to true/false to show/hide the button as necessary

You can see an example of this here: https://customerfx.com/article/how-to-enable-or-disable-a-field-on-a-pa…

Ryan

Show all comments

I made a post earlier that helped me with a section grid but I currently need to add a custom button that should be on every grid line of a detail that was added in Orders.

As an example in the image above, you should have a custom button on all rows of the Detail grid.

Like 0

Like

5 comments

Hi Gabriel,



Have you tried to implement the logic in the corresponding detail Schema? https://community.creatio.com/questions/add-custom-button-all-rows. If implemented, could you please post the results after implementing them in your detail schema?





BR,

Bhoobalan Palanivelu.

Yes, it was from this post that I tried, but for the Detail that I put in the printout, I couldn't get it to work with the Detail grid.

Gabriel Cassimiro,

 

Could you please share with us the current implementation that you are using from the previous post so we can investigate how can it be resolved?

 

Best regards,

Dariy

Dariy Pavlyk,

I made the attempt to implement as in this post here: https://community.creatio.com/questions/add-custom-button-all-rows But for what I would like in specific it doesn't work.

Gabriel Cassimiro,

 

As Dariy Pavlyk mentioned, please share with us what has been implemented. The previously shared article is for the section and please share how did you implement in your scenario (the schemas you used, the implementation you did) With that further investigation could be made.





BR,

Bhoobalan Palanivelu.

 

Show all comments

I need the button that I created "Adjust Inventory" to be visible only when the page is not with altered fields without having the values saved.

So when it is unsaved it will show like this:

And when you have the "Save" and "Cancel" buttons visible, it should be disabled.

Like 0

Like

3 comments

Hi Gabriel,



Can you please check the SchemaPageV2 of your object?

That should have the Button definition in the Diff array and you can add the Visible: false property to it to remove it from your edit page.





BR,

Bhoobalan Palanivelu.

 

Bhoobalan Palanivelu,

I created an attribute to be able to disable it when there is an unsaved field, the problem is that I can't change it, and the page in the two images above are the same page, it is a detail page.

 

Gabriel Cassimiro,

 

Could you please share with us more details on the page/detail where you are using this, and the current code implementation that you have for your button?

 

Best regards,

Dariy

Show all comments

I need this button to be on all rows and not on "activeRowActions", and I can't find the right parent.

 

{
	"operation": "insert",
	"parentName": "DataGrid",
	"propertyName": "activeRowActions",
	"name": "MoveQtyButton",
	"values": {
		"itemType": Terrasoft.ViewItemType.BUTTON,
		"caption": "Move Qty",
		 "className": "Terrasoft.Button",
         "style":this.Terrasoft.controls.ButtonEnums.style.BLUE,
         "tag": "call",
	}
},

 

Like 1

Like

6 comments

Hi Gabriel,



Please find the solutions in the below community threads.

https://community.creatio.com/questions/add-button-datagrid-active-row
https://community.creatio.com/articles/add-button-active-row-detail







BR,

Bhoobalan Palanivelu.

Bhoobalan Palanivelu,

Thanks for responding, but I had seen these posts before, and they helped me in parts but not for what I need, the two are for activeRow, that is for when they are selected only, and I need them to appear in all rows even if not selected.

Gabriel Cassimiro,



Thanks for the briefing!

In this case, you need a button as a column in the grid.



ContactSectionV2 Grid

define("ContactSectionV2", ["css!UsrContactSectionV2CSS"], function() {
	return {
		entitySchemaName: "Contact",
		attributes: {
			"SelectButtonColumn": {
				"dataValueType": Terrasoft.DataValueType.TEXT,
				"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN
			}
		},
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[]/**SCHEMA_DIFF*/,
		methods: {
			onGridDataLoaded: function(response) {
				this.mixins.GridUtilities.onGridDataLoaded.call(this, response);
				this.addSelectCustomerButton();
			},
			onRender: function() {
				this.callParent(arguments);
				this.addSelectCustomerButton();
			},
			unSelectRow: function(id) {
				this.mixins.ConfigurationGridUtilities.unSelectRow.apply(this, arguments);
				this.addSelectCustomerButton();
			},
			addSelectCustomerButton: function() {
				var baseSelector = "#grid-ContactSectionV2DataGridGrid-wrap div.grid-listed-row div:last-child";
				var selector = baseSelector + ">span";
				var scope = this;
				$(selector).unbind();
				$(baseSelector).html(
					Ext.String.format("<span>{0}</span>", this.get("Resources.Strings.SelectCustomerButtonCaption")));
 
				$(selector).addClass("glb-select-customer-button");
 
				$(selector).click(function() {
					var id = "";
					try {
						id = arguments[0].currentTarget.offsetParent.offsetParent.attributes.id.value.split("item-")[1];
					} catch(e) {}
					if (id) {
						scope.onSelectCustomerButtonClick(id);
					} else {
						this.error("Active row id was not found");
					}
				});
			},
			onSelectCustomerButtonClick: function(id) {
				this.showInformationDialog(id);
			}
		}
	};
});

CSS Module:

.glb-select-customer-button {
	background: #8ecb60;
	color: white;
	padding: 2px 10px;
	border-radius: 3px;
}
 
.glb-select-customer-button:hover {
	background: #74bc48;
	cursor: pointer;
}



Result will be like below,





You need to do the same in your detail schema.





BR,

Bhoobalan Palanivelu.

 

Bhoobalan Palanivelu,

This is fantastic Bhoobalan, thanks for sharing!

Ryan

Bhoobalan Palanivelu,

Thanks, I have a question, because I'm trying to apply in a list of a detail, but I'm not having the same result for when it is a grid of a section, is there something I have to put different or does it work the same way?

Gabriel Cassimiro,



Please be informed to define the value for this label through the localizable string available on your schema page.

this.get("Resources.Strings.SelectCustomerButtonCaption"))

Also, you can check about the CSS and its dependency included in your schema.


 

BR,

Bhoobalan Palanivelu.

Show all comments

I am going to add custom button which alerts some text on contact page. Is it possible?

Like 0

Like

2 comments

Hello Muhammadjon,

 

in order to achieve this you need to create a Replacing view model at the Custom package.

For the partent object you will need to select ContactSectionV2, or the section where you want to create this button.

Then you need to create a new localizable string (you will see the possibility to create a new one on the left) where you will put the desired text. for the button. While creating the localizable string you will need to enter the value, and the code. The code is something that you will use later.

 

After that you insert this code on the page:

 define("ContactSectionV2",

        function(BaseFiltersGenerateModule, Enums, ConfigurationConstants, BusinessRuleModule) {

            return {

                entitySchemaName: "Contact",

                messages: {},

                attributes: {},

                rules: {}/**SCHEMA_MODULES*/,

                /**

                 * Current schema mixins

                 */

                mixins: {},

                methods: {

                    OnTestButtonClick : function() {

                        Terrasoft.showInformation('Test') 

                    }

                },

                diff: /**SCHEMA_DIFF*/[

                    {

                    "operation": "insert",

                    "parentName": "ActionButtonsContainer",

                    "propertyName": "items",

                    "name": "TestButton",

                    "values": {

                        "itemType": Terrasoft.ViewItemType.BUTTON,

                        "style": Terrasoft.controls.ButtonEnums.style.GREEN,

                        "caption": {"bindTo": "Resources.Strings.TestButtonCaption"},

                        "markerValue": {"bindTo": "QualificationProcessButtonCaption"},

                        "classes": {"wrapperClass": ["t-btn-wrapper t-btn-text t-btn-style-blue actions-button-margin-right"]},

                        "iconAlign": Terrasoft.controls.ButtonEnums.iconAlign.RIGHT,

                        "click": {"bindTo": "OnTestButtonClick"},

                        "layout": {

                            "column": 6,

                            "row": 0,

                            "colSpan": 2

                        },

                        "visible": true

                    }

                }    ]/**SCHEMA_DIFF*/

            };

        });

 

The method  Terrasoft.showInformation('Test')  is the one responsible for displaying the message on screen. Here instead of Test you can write any message. 

The part where it says "caption": {"bindTo": "Resources.Strings.TestButtonCaption"}" , this is where you put the code from the localizable string previously created. So if the code of the string was called TestButtonCaption, then you need to put Resources.Strings.TestButtonCaption. If you name the code like "RandomButton" then it will be Resources.Strings.RandomButton.

 

Best regards,

Dariy 

Thanks so much! This is so helpful

Dariy Pavlyk,

Show all comments

How can i create custom button which alerts some text?

Like 0

Like

1 comments

Hello Muhammadjon,

 

in order to achieve this you need to create a Replacing view model at the Custom package.

For the partent object you will need to select ContactSectionV2, or the section where you want to create this button.

Then you need to create a new localizable string (you will see the possibility to create a new one on the left) where you will put the desired text. for the button. While creating the localizable string you will need to enter the value, and the code. The code is something that you will use later.

 

After that you insert this code on the page:

 define("ContactSectionV2",

        function(BaseFiltersGenerateModule, Enums, ConfigurationConstants, BusinessRuleModule) {

            return {

                entitySchemaName: "Contact",

                messages: {},

                attributes: {},

                rules: {}/**SCHEMA_MODULES*/,

                /**

                 * Current schema mixins

                 */

                mixins: {},

                methods: {

                    OnTestButtonClick : function() {

                        Terrasoft.showInformation('Test') 

                    }

                },

                diff: /**SCHEMA_DIFF*/[

                    {

                    "operation": "insert",

                    "parentName": "ActionButtonsContainer",

                    "propertyName": "items",

                    "name": "TestButton",

                    "values": {

                        "itemType": Terrasoft.ViewItemType.BUTTON,

                        "style": Terrasoft.controls.ButtonEnums.style.GREEN,

                        "caption": {"bindTo": "Resources.Strings.TestButtonCaption"},

                        "markerValue": {"bindTo": "QualificationProcessButtonCaption"},

                        "classes": {"wrapperClass": ["t-btn-wrapper t-btn-text t-btn-style-blue actions-button-margin-right"]},

                        "iconAlign": Terrasoft.controls.ButtonEnums.iconAlign.RIGHT,

                        "click": {"bindTo": "OnTestButtonClick"},

                        "layout": {

                            "column": 6,

                            "row": 0,

                            "colSpan": 2

                        },

                        "visible": true

                    }

                }    ]/**SCHEMA_DIFF*/

            };

        });

 

The method  Terrasoft.showInformation('Test')  is the one responsible for displaying the message on screen. Here instead of Test you can write any message. 

The part where it says "caption": {"bindTo": "Resources.Strings.TestButtonCaption"}" , this is where you put the code from the localizable string previously created. So if the code of the string was called TestButtonCaption, then you need to put Resources.Strings.TestButtonCaption. If you name the code like "RandomButton" then it will be Resources.Strings.RandomButton.

 

Best regards,

Dariy 

Show all comments

Is there any way I can access a button instance directly, e.g., in the 'click' method of a client module in order to set the colour of the button using the setStyle method of the button object?

Like 0

Like

1 comments

Not sure if it's possible since setStyle only receives some value as an argument and is being executed when the button is initialized.

 

In your case I would recommend to add this code to the click handler:

var buttonElementToModify = document.getElementById("ContactPageV2ChangeContainerStateButtonButton-textEl");
				buttonElementToModify.style.backgroundColor = "Green";

and replace ContactPageV2ChangeContainerStateButtonButton-textEl with an actual id of the element in DOM:

As a result when the button is clicked its color will be changed to green.

 

Best regards,

Oscar

Show all comments

Hi community,

 

I try to trigger a business process from a custom button. I in the post that I need the ProcessModuleUtilities to achieve that. Here is my code :

 

define("MTF_Candidat1Page", ["MultiChoiceMixin", "ProcessModuleUtilities"], function(ProcessModuleUtilities) { 
	return {
		entitySchemaName: "MTF_Candidat",
		...
		methods: {
			OnClickCreateInterview: function(){
				var args = {
					sysProcessName: "MTFtestbtn" // this is the name of my business process. It simply send me a mail for now.
				};
				ProcessModuleUtilities.executeProcess(args);
 
				this.showInformationDialog("Busniess process triggered"); // just to show something to let me know the function triggered properly the busniess process
			},
		},
		...
		diff: /**SCHEMA_DIFF*/[
				...
				{
				"operation": "insert",
				"name": "BtnCreateInterview",
				"values": {
					"layout": {
						"colSpan": 24,
						"rowSpan": 1,
						"column": 0,
						"row": 7
					},
					"itemType": 5,
					"classes": {
						"textClass": [
							"actions-button-margin-right"
						],
						"wrapperClass": [
							"actions-button-margin-right"
						]
					},
					"click": {
						"bindTo": "OnClickCreateInterview"
					},
					"tag": "OnClickCreateInterview",
					"caption": {
						"bindTo": "Resources.Strings.BtnCreateInterviewCaption"
					},
					"hint": {
						"bindTo": "Resources.Strings.BtnCreateInterviewHint"
					}
				},
				"parentName": "ProfileContainer",
				"propertyName": "items",
				"index": 7
			}
			...
		]/**SCHEMA_DIFF*/
}

 

Now when I click on the button on my candidate page I have this error :

 

"Uncaught TypeError: ProcessModuleUtilities is undefined"

 

Do you have other docs to trigger business processes on custom button press ?

 

Best regards,

 

Julien

Like 0

Like

2 comments
Best reply

Hi Julien,

 

Could you change your schema definition as the following (swap "MultiChoiceMixin" and "ProcessModuleUtilities")?

define("MTF_Candidat1Page", ["ProcessModuleUtilities", "MultiChoiceMixin"], function(ProcessModuleUtilities) 

regards,

 

Cheng Gong

Hi Julien,

 

Could you change your schema definition as the following (swap "MultiChoiceMixin" and "ProcessModuleUtilities")?

define("MTF_Candidat1Page", ["ProcessModuleUtilities", "MultiChoiceMixin"], function(ProcessModuleUtilities) 

regards,

 

Cheng Gong

Cheng Gong,

 It works, thank you !

Show all comments

In a section edit page, we have created custom buttons and have functionalities to hide and show the button. If we refresh the page Button enable/ Disable are working fine

But once we open the edit page, the button visibily/ page opening are not working properly until we refresh the page

we tried  this.reloadEntity(); inside init:function(){} Method.

 

Please Suggest me how to solve this issue.

 

Like 0

Like

3 comments

Dear Mansoor,

 

Could you please create a case for our technical support indicating the issue and providing external access to the instance?



Thank you in advance,

Ivanna.

Ivanna Yatsura,

Dear Ivanna,

 

Yes I created the request for Creatio team (Request Id is:  #SR-01039215) 

Dear Ivanna,

 

Is there any update on this issue.

 

Thank you in advance,

Mansoor 

Show all comments