Adding a button to the edit page
Glossary Item Box
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.
NOTE
To display the button on the page in the existing record edit mode, the section schema must be modified.
To display the button in the new record addition mode, similar modifications are made in the schema of the page view model itself.
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.
NOTE
Meta-names of html-containers are used here.
These names are specified when setting the control item visualization in the configuration object of the diff array.
The actual ID of corresponding html-items of the page are formed by the system automatically, based on such meta-names.
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