Hi! How to place a button at dashboard section ? I know there is an article 
https://academy.creatio.com/docs/developer/interface_elements/record_page/button/overview
but there is no information about dashboard section containers.

Like 0

Like

3 comments

Hello,

You can use this instruction: https://academy.creatio.com/docs/developer/interface_elements/record_page/button/overview to add the necessary button to any section. If you have a Freedom UI, you can use the Button component for dashboards using this article: https://academy.creatio.com/docs/8.x/no-code-customization/customization-tools/ui-and-business-logic-customization/UI-designer#title-2230-17.

 

Malika,

as I said in the post, this article does not answer my question, there is no container for the dashboard section

Andrii Herbshtasov,

Unfortunately, there is no way to implement the button in the dashboard section. 

As a workaround you can create a custom page in FreedomUI by no-code methods and add a Button with all needed dashboards.

Show all comments

diff: /**SCHEMA_DIFF*/[
         {
            
       "operation": "merge",
       "name": "DataGrid",
       "values": {
               "activeRowAction": {bindTo: "onActiveRowAction"},
               "activeRowActions": [
                       {
                               "className": "Terrasoft.Button",
                               "style":this.Terrasoft.controls.ButtonEnums.style.BLUE,
                               "markerValue": "myButtonAction",
                               "tag": "myAction",
                               "caption": "View image",
                               "enabled": false,
                               "visible":{bindTo: "IsButtonVisible"},
                         
                                 
                       }
               ],
               // "visible": {"bindTo": "isButtonVisible"},
               
       }
}
       ]/**SCHEMA_DIFF*/,
        methods: {
            isButtonVisible: function()
            {
           console.log("hello");
           const activerow= this.get("ActiveRow");
           if(activerow)
            {
 
              var msg= this.getActiveRow().get("UsrMessage") ;
               if(msg==="hello"){return false;}
               
            }
           return true;
             
         }
       }
    };

I tried adding button, and when giving visible:true, it is working fine, now i want to hide that button from some records of detail based on some condition so i bind it with the function, but it is not working, the function is not getting called/executed, when i am doing it at grid level then it is working fine, but not working on button, is there something am i missing or doing wrong, i even tried it using attribute and setting it's value in the function

Like 0

Like

2 comments

I've never been successful with binding values in ActiveRowActions to attributes to change them after render. They don't seem to have the same bindings as other view model elements do. The only way I've been able to get this to work is to modify the dom elements on row select to manipulate, which is a bit hacky. Alternatively, just add logic to the button click to validate if the action can be performed or not, which isn't ideal either.

Ryan

Ryan Farley,

Can you please elaborate on modifying dom elements, how can i do that, because that's the only option i can see too

 

Show all comments

Hi all,

 

Further to the thread below, is it possible to make a button added to the active row of a detail conditional?
Add button into the active row of detail | Community Creatio

I want to make the button enabled on a certain condition but when I add the enabled and visible values to the Diff of the datagrid, I get no result (tried passing "enabled": false to check it wasn't an issue with the CanSplitFlights method)

define("UsrFlightsDetail", ["ProcessModuleUtilities"], function(ProcessModuleUtilities) {
	return {
		entitySchemaName: "UsrFlights",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[
			{
				"operation": "merge",
				"name": "DataGrid",
				"parentName": "Detail",
				"propertyName": "items",
				"values": {
					"activeRowActions": [],
					"activeRowAction": {"bindTo": "onActiveRowAction"}
				}
			},
			{
				"operation": "insert",
				"name": "DataGridActiveRowSplitFlights",
				"parentName": "DataGrid",
				"propertyName": "activeRowActions",
				"values": {
					"className": "Terrasoft.Button",
					"style": Terrasoft.controls.ButtonEnums.style.BLUE,
					"caption": "Split flights",
					"tag": "SplitFlights",
					"visible": true,
					"enabled": CanSplitFlights
				}
			}
		]/**SCHEMA_DIFF*/,
		methods: {
            CanSplitFlights: function() {
                var FlightTypeId = this.getActiveRow().get("UsrFlightType");
				var FlightTypeValue =  FlightTypeId  && FlightTypeId.value;
 
				if (FlightTypeValue == '3a0d3b1b-9af5-472a-bac9-e785500ac4e9') {
					return true;
                }
                return false;
            },
			onActiveRowAction: function(SplitFlights) {
				switch (SplitFlights) {
					case "SplitFlights":
						this.onSplitFlights();
						break;
					default:
						break;
				}
			},
			onSplitFlights: function(){
				ProcessModuleUtilities.executeProcess({
					sysProcessName: "UsrSplitFlights",
					parameters: {
						FlightId: this.getActiveRow().get("Id")
					}
				});
			},
Like 1

Like

2 comments
Best reply

I've done some hacky options that sort of worked manipulating the button elements in the dom on row click, but I've never been able to have it work binding an attribute to the visible/enabled of the row buttons and change row by row. That's never worked for me. Instead I typically do a check in the code that executes on click to let the user know if it's not available for the row. I'd love to know if there's some way for this to work, but from experience it doesn't work. 

I've done some hacky options that sort of worked manipulating the button elements in the dom on row click, but I've never been able to have it work binding an attribute to the visible/enabled of the row buttons and change row by row. That's never worked for me. Instead I typically do a check in the code that executes on click to let the user know if it's not available for the row. I'd love to know if there's some way for this to work, but from experience it doesn't work. 

Ryan Farley,

Thanks Ryan. I'll call it quits then and add a check on click.

Honestly, it's more of an aesthetic requirement than a functional one. Ideally I won't offer the user a button that they can't click.

Show all comments

Hi Everyone,

I need to add button in the standard list (say Contacts). On click of this button, I want to call custom web service function. Is there a way I can do that. Is there any alternative available for the same.

Thanks,
Manoj

Like 0

Like

6 comments

Hello Manoj,
Thank you for your question.

There is an article available on the Academy that covers this topic with an example.

Regarding following question: "Is there any alternative available for the same". 

It depends on what you mean here. You can call a web service from different parts of an application. For example, you can make a business process that makes a call to a web service (link).

Hope this helps, let me know if you have any question left.

Yevhenii Grytsiuk,

Hi Yevhenii,

Apologies if my previous message was unclear. I want to add a button to each row in the native list, specifically as a column, and trigger a web service call when this button is clicked to sync data from another system.


 

For example, I need to add a sync icon as a column in the Project List. When the sync button for Project 1 is clicked, it should call the web service to sync data related to Project 1 from another system. Similarly, clicking the sync button for Project 2 should sync data related to Project 2, and so on.
 

I hope this clarifies my request. Thank you!

Manoj Patil,

You can add the following to the diff of the section: 

{
	"operation": "insert",
	"name": "DataGridActiveRowSyncButton",
	"parentName": "DataGrid",
	"propertyName": "activeRowActions",
	"values": {
		"className": "Terrasoft.Button",
		"style": "green",
		"tag": "sync",
		"caption": "Sync"
	}
}

 

This will add the button. Then for handling the click, add this to the methods:

onActiveRowAction: function(buttonTag, primaryColumnValue) {
	this.callParent(arguments);
 
	if (buttonTag === "sync") {
		// do your stuff here
		// primaryColumnValue is the row's Id value
 
		// you can get other values from the row using
		var row = this.getActiveRow()
		var val = row.get("UsrSomeColumn");
	}
}

Ryan

Ryan Farley,

Hi Ryan,
 

Thank you for the details. 

This section is created via Section Wizard and it correctly appears in Application Hub. However, I do not a find a place where this code needs to be added. Please guide me on the same as I am unsure if I am missing anything here.

The Section wizard creates two client schema files. One ending in "Page" and one ending in "Schema". The one ending in "Schema" is the one you want to add this code to. To see these files you need to look at the contents of the package containing your customizations, either by opening Advanced Settings from your application in App Hub or using the Advanced Settings link in the System designer.

Ryan

Ryan Farley,

I am unable to locate the System Designer icon on the Project List Page. See below screengrab.

I went to Advanced Settings and didn't find the schema files ending with "Page" and others ending with "Schema". See below screengrab.


Therefore, I navigated to Application Hub, Navigation Sections, and Selected Project which opened Projects: Section. 

 

In the Section Pages, I selected Edit Page which opened the Section Wizard screen with Tabs Pages, Business Rules, and Source Code at the top of the screen. 

 

I clicked on the Source Code tab and pasted the code at this place but it didn't reflect the new button in the list. 

 

 

I am unsure why the System Designer icon does not appear on the Project List screen. (Could it be a Creatio Version Issue? I am using Version 8.1.3.6734)
Why schema files ending with "Page" and "Schema" are not available in the Advanced Settings. (Could it be a Creatio Version Issue? I am using Version 8.1.3.6734) 
I assume I am placing the code on the Project Detail page and not on the Project List Page.

Show all comments

Hi!

I need a custom button that will change value in a recaord and then save this record. I've tried it on a OpportunitySectionV2 with this code

 

define("OpportunitySectionV2", [], function() {
	return {
		entitySchemaName: "Opportunity",
		details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
		diff: /**SCHEMA_DIFF*/[ 
            {
                "operation": "insert",
                "parentName": "ActionButtonsContainer",
                "propertyName": "items",
                "name": "MainContactSectionButton",
                "values": {
                    itemType: Terrasoft.ViewItemType.BUTTON,
                    caption: { bindTo: "Resources.Strings.OpenPrimaryContactButtonCaption" },
                    click: { bindTo: "onOpenPrimaryContactClick" },
                    "layout": {
                        "column": 1,
                        "row": 6,
                        "colSpan": 1
                    }
                }
            }]/**SCHEMA_DIFF*/,
		methods: {
			prepareResponseCollectionItem: function(item) {
				this.callParent(arguments);
         		if (item.get("MgtImportantFlg") === false){
					item.customStyle = Ext.apply({}, {
					  "background-color": "#cc081c",
					  "font-family": "cursive"
					}, item.customStyle);		  		
		  		}
			},
			onOpenPrimaryContactClick: function(){
				var activeRow = this.get("ActiveRow");
				var bFlag = this.get("GridData").get(activeRow).get("MgtImportantFlg");
					if(bFlag){
						this.get("GridData").get(activeRow).set("MgtImportantFlg",false);
						this.save();
					}
					else{
						this.get("GridData").get(activeRow).set("MgtImportantFlg",true);
						this.save();
					}
			}
		}
	};
});

it change the value in my field but didn`t save it, so after reload shows old value.

Could anyone help me how should i change code for my purposes?

Like 0

Like

1 comments
Best reply

Hello,

In the section module, it is better to use an UpdateQuery class to change the value of the records. You can find the example here.

Hello,

In the section module, it is better to use an UpdateQuery class to change the value of the records. You can find the example here.

Show all comments

Hi,

I have created a button in ActivitySectionV2.
This button appears on all entries in this section.

But when you click on this button, nothing happens.
Please let me know how to fix the error.

Code:

define("ActivitySectionV2", ["ProcessModuleUtilities"], function (ProcessModuleUtilities) {
  return {
    entitySchemaName: "Activity",
    details: /**SCHEMA_DETAILS*/ {} /**SCHEMA_DETAILS*/,
    diff: /**SCHEMA_DIFF*/ [{
      "operation": "insert",
      "parentName": "DataGrid",
      "propertyName": "activeRowActions",
      "name": "runProcessButtonOpenOpportunity",
      "values": {
        "className": "Terrasoft.Button",
        /*"itemType": Terrasoft.ViewItemType.BUTTON,*/
        "caption": "Відкрити угоду",
       "click": {
          bindTo: "runProcessButtonOpenOpportunity"
        },
        "style": Terrasoft.controls.ButtonEnums.style.GREEN
      }
    }] /**SCHEMA_DIFF*/,
    methods: {
      runProcessButtonOpenOpportunity: function () {
        var activeRowId = this.get("Id");
        var args = {
          sysProcessName: "UsrProcessOpenOpportunityInActivity",
          parameters: {
            OppID: activeRowId
          }
        };
        ProcessModuleUtilities.executeProcess(args);
      }
    },
    rules: {}
  };
});

Error:

Like 0

Like

1 comments

Hello,
If you want to add a button to an action menu for the active row, the regular approach will result in the error you received.
Here you can find an example of how to configure such a button properly.

Show all comments

Hi all,



I've added a button to the left container of the orders page labelled 'Update quote costs'. The button is visible on the condition that the boolean 'Recalculation required' (a field on the order) is true. I've added the diff and the method to the section schema and the section page.

(edit - added gif of button)

 

When I open the page from the section for a record where 'Recalculation required' is true, the button does not appear. If I refresh the page, the button then does.

 

I believe this is because the header loads before the data so when it first loads, it can't read the 'Recalculation required' field.



Is there a solution to this? If not, I can move the button to the header container as the conditions do work this way. It just doesn't look as good.



Nb. using Freedom shell on classic pages

Like 0

Like

1 comments

Hello,

The problem is not in the container, when you open a page from a section, the system still thinks that you see a section page. Therefore, the condition for your button isn't applied.

In order to fix it, you need to create your button in a combined mode, for example.

Take a look at the button and its condition is defined in a SectionV2 page as well as PageV2.

Show all comments

Hi everyone,



I am trying to add a custom button to the contacts section in the mobile application. I followed the steps provided in: https://community.creatio.com/articles/adding-custom-user-action-mobile… to create a custom button on the user actions list, but I was unsuccessful.



Alternatively, is there a way to add buttons to the section (list) page, or to add a button in the Freedom UI section of the mobile application?



Regards,

Ramya

Like 0

Like

2 comments

Hi Ramya,

 

Currently there is no way to add custom buttons in Freedom UI (the article you refer to will only work in classic UI). I've created a suggestion for our R&D team to make it possible to add buttons in Freedom UI using no-code capabilities and pointed them to your community question.

 

Thank you for helping us in making the app better!

Hi Oleg Drobina,

Thank you for the prompt response. In the Classic UI, is it possible to add a button somewhere other than the record's edit page, maybe in the section page or a common menu like the settings? Or is it possible to override the existing 'Add Contact' button?



Regards,

Ramya



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

2 comments

Hello,



Could you please describe in more detail what the problem with the button is when refreshing the page? I mean, how should they work and how do they actually work? If you have a chance, please send screenshots.

I think, this button works only in Page mode. So, you should also add this button to Section. (see more in https://academy.creatio.com/docs/developer/interface_elements/record_pa….)



Kind regards,

Vladimir

Show all comments

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