Customize record pages

Level: beginner

Record page is a UI element that stores the information about Creatio business objects organized as fields, tabs, details, and dashboards. The name of the record page corresponds to the name of the Creatio object. For example, account page, contact page, etc. The purpose of the record page is management of section list records. Each Creatio section includes one or more record pages.

Each record page is represented by a client module schema. For example, the ContactPageV2 schema of the Uiv2 package configures the contact page. The BasePageV2 schema of the NUI package implements the functionality of a base record page. Record page schemas must inherit the BasePageV2 schema.

The record page types are as follows:

• The page that adds records. Creates a section list record.
• The page that edits records. Modifies an existing section list record.

Record page containers

Creatio stores the UI elements related to the record page in the corresponding containers. Configure the containers in the base schema of the record page or the schema of the replacing record page. The record page type does not affect the containers.

note

Creatio uses the meta names of HTML containers. The actual IDs of the corresponding HTML elements on the page are generated based on the meta names.

View the main record page containers in the figure below.

• ActionButtonsContainer stores the action buttons of the record page.
• LeftModulesContainer stores the main data input and edit fields.
• ActionDashboardContainer stores the action panel and workflow bar.
• TabsContainer stores the tabs that group input and edit fields by a category. For example, current employment.

Create a record page

1. Go to the Configuration section and select a user-made package to add the schema.

2. Click Add on the section list toolbar and select the type of the view model schema.

   • Select Page view model to create a new record page.

     

   • Select Replacing view model to replace an existing record page.

     

3. Fill out the following schema properties.

   • Code* is the schema name. The code must contain a prefix specified in the Prefix for object name (the SchemaNamePrefix code) system setting. The default prefix is Usr.

   • Title* is the localizable schema title.

   • Parent object is the record page schema whose functionality to inherit.

     • Select "BasePageV2" to create a new record page.
     • Select the schema of the needed record page to replace an existing record page. For example, select the AccountPageV2 schema of the Uiv2 package to display a custom account page in Creatio.

4. Implement the record page logic.

5. Click Save on the Module Designer’s toolbar.

Set up the record page

Use controls to set up the record page.

Creatio lets you set up the record page in the following ways:

• Add standard page controls.
• Edit standard page controls.
• Add custom page controls.

The main page controls are as follows:

• Action dashboard. Learn more about setting up the action dashboard in a separate article: Action dashboard.
• Field. Learn more about setting up page fields in a separate article: Field.
• Button. Learn more about setting up buttons in a separate article: Button.

Add a custom action to a record page

Creatio lets you add a custom action to the Actions drop-down menu of the record page. The BasePageV2 schema of the base record page implements the menu.

To add a custom action to the record page:

1. Create a record page or replacing record page. To do this, take steps 1-3 in the instruction to create a record page.
2. Override the protected getActions() virtual method that returns the page action list. The page action list is an instance of the Terrasoft.BaseViewModelCollection class. Each action is a view model.
3. Pass the getButtonMenuItem() method to the addItem() method as a parameter. The addItem() method adds a custom action to the collection.
4. Pass the configuration object to the getButtonMenuItem() callback method as a parameter. The getButtonMenuItem() method creates an instance of the action view model.
5. Implement the action configuration object that lets you set the properties of the action view model explicitly or use the base binding mechanism.

Important

If you replace the base record page, call the this.callParent(arguments) method in the getActions() method of the replacing view model schema. this.callParent(arguments) returns the action collection of the parent record page.

View the template to add a custom action to a record page below.

Template to add a custom action to a record page

/**
* Return the action collection of the record page.
* @protected
* @virtual
* @return {Terrasoft.BaseViewModelCollection} Return the action collection of the record page.
*/
getActions: function() {
    /* The action list is an instance of Terrasoft.BaseViewModelCollection. */
    var actionMenuItems = this.Ext.create("Terrasoft.BaseViewModelCollection");
    /* Add the action to the collection. Pass the method that instantiates the action model instance by the passed configuration object. Pass it as a callback method. */
    actionMenuItems.addItem(this.getButtonMenuItem({ 
        /* The configuration object that sets up the action. */
        ...
    }));
    /* Return the new action collection. */
    return actionMenuItems;
}

---

See also

Section

Configuration elements

Object

Packages basics

Action dashboard

Field

Button

---

E-learning courses

Tech Hour - HOW TO USE BUTTONS AND ACTIONS TO EMPOWER CREATIO PAGES