Adding a button to the edit page

To add a custom button to the view model on the edit page, two properties must be modified:

• Methods collection. The implementation of the handler method to be called when the button is clicked must be added to the methods collection. Other auxiliary methods required for the control item functioning must be also added. These may be methods for regulating the visibility or availability of the control item depending on conditions.
• diff configuration objects array. Add a configuration object in the diff configuration objects array to set up the visual location of the control item on the edit page.

DOM model of standard page buttons

The html-container hierarchical structure is used to locate standard functional buttons of the bpm'online edit page.

CombinedModeActionButtonsCardContainer is a top level container on the existing record edit page. Two more containers are inside it:

• CombinedModeActionButtonsCardLeftContainer - where the Save, Cancel and Actions standard buttons are located;
• CombinedModeActionButtonsCardRightContainer - where the Print and View buttons are located.

Similarly, for the new record edit page: ActionButtonsContainer — a top level container.

Two more containers are inside it:

• Leftcontainer - where the Save, Cancel and standard Actions buttons are located;
• RightContainer - where the Print and View buttons are located.

Depending on the exact position required for a button, the corresponding container is specified when setting the button visualization in the diff array.

Setting the button visualization properties

To set the visual location of a custom button on the edit page, a configuration object with the following properties must be added to the diff array of the view model:

Property	Description
operation	A type of operation with a control item (insert, move, remove, merge, set). This is set by a string with the corresponding operation name. The insert value is specified to add a new control item.
parentName	The meta-name of the parent control item where a custom item is to be placed. If this is a functional button, LeftContainer and RightContainer may act as the parent containers.
propertyName	The items value is specified for the custom control item.
name	The meta-name of the added control item.
values	A configuration object with settings of supplementary properties for a control item.

Setting properties of the values object:

Property	Description
itemType	A type of an item. This is set by a value of the Terrasoft.ViewItemType list. The BUTTON value is used for the button.
caption	The button title. It is recommended to set title values by binding to a localizable string of the schema.
click	Binding of the button handler method.
layout	The object of setting a control item location on the grid.
enabled	Controls the the button availability (activity).
visible	Controls the button visibility.
style	Component style. The property should contain the value of the Terrasoft.controls.ButtonEnums.style enumeration.

The Terrasoft.controls.ButtonEnums.style enumeration contains following values:

Property	Description
Terrasoft.controls.ButtonEnums.style.DEFAULT	Default style.
Terrasoft.controls.ButtonEnums.style.GREEN	Green color button.
Terrasoft.controls.ButtonEnums.style.RED	Red color button.
Terrasoft.controls.ButtonEnums.style.BLUE	Blue color button.
Terrasoft.controls.ButtonEnums.style.GREY	Transparent button. This value is from previous versions of bpm'online.
Terrasoft.controls.ButtonEnums.style.TRANSPARENT	Transparent button.

You can read more about the diff array in the "The "diff" array" article.

Examples of implementing a button adding to the edit page

• How to add the button on the edit page in the combined mode
• How to add a button to an edit page in the new record add mode
• How to add a button to a section