Creatio development guide
PDF
This documentation is valid for Creatio version 7.13.0. We recommend using the newest version of Creatio documentation.

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

 

© bpm'online 2002-2019.

Did you find this information useful?

How can we improve it?