Skip to main content
Version: 8.1

Customize sidebars

Level: intermediate
note

This functionality is available in beta version in Creatio 8.1.3. To access the functionality, turn on the “SidePanelExtensions” additional feature. Instructions: Change the status of an additional feature for all users.

Sidebars are special pages you can view by clicking the buttons in the top right of the Creatio UI, for example, feed or chats. Learn more: Set up a sidebar (user documentation).

Migrate a Classic UI panel to Freedom UI

Detailed example: Migrate a Classic UI panel to Freedom UI.

1. Create a sidebar

  1. Create a new Freedom UI app or open an existing app. Instructions: Create an app manually (user documentation).

  2. Create a Freedom UI page to display a sidebar. To do this, click New pageBlank pageSelect. Make sure to use only Blank page template to ensure backwards compatibility of sidebars.

  3. Open the sidebar properties. To do this, click AdvancedSidebar. This opens a window.

  4. Fill out the sidebar properties.

    Property

    Property description

    Title

    Localizable sidebar name displayed above its content.

    Code

    The sidebar schema name. Starts with the prefix. Learn more: Manage configuration elements. Can contain Latin characters and digits.

    Location

    Location of the sidebar in an existing Freedom UI panel.

    Sidebar icon

    Icon of the sidebar.

    Sidebar position

    Sidebar order number in the Freedom UI panel. Out of the box, the position numbering is 1000, 2000, 3000, etc. Enter the number between these numbers to place the sidebar between existing sidebars.

  5. Save the changes.

As a result, the sidebar will be created without being displayed on Freedom UI panel.

2. Implement loading a Classic UI custom panel in Freedom UI

  1. Open the source code of the Freedom UI page to migrate a Classic UI panel. To do this, click .

  2. Set up the binding parameters of client module schema that implements functionality of the Classic UI custom panel.

    1. Go to the viewConfigDiff schema section.

    2. Add the configuration object that configures Classic UI custom panel.

    3. Fill out the properties of binding parameters one of the following ways:

      • Directly. Use this for panels that do not inherit functionality of base client module schemas.
      • Using BaseSchemaModuleV2. Use this for panels that inherit functionality of base client module schemas.

      To set up the binding parameters directly, use the following properties.

      Property

      Property value

      type

      crt.ModuleLoader

      module

      Code of the client module schema that implements functionality of the Classic UI custom panel

      View an example that binds the SomeClassicUIPanel client module schema to the SomeApp_FormPage Freedom UI page schema directly below.

      SomeApp_FormPage
      /* Declare the AMD module. */
      define("SomeApp_FormPage", /**SCHEMA_DEPS*/[] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
      return {
      viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
      /* Configuration object that binds the “SomeClassicUIPanel” client module schema. */
      {
      "operation": "insert",
      "name": "SomeClassicUIPanel",
      "values": {
      "type": "crt.ModuleLoader",
      /* “SomeClassicUIPanel” client module schema that implements functionality of the Classic UI custom panel. */
      "module": "SomeClassicUIPanel"
      },
      "parentName": "MainContainer",
      "propertyName": "items",
      "index": 0
      }
      ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
      viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
      modelConfigDiff: /**SCHEMA_MODEL_CONFIG_DIFF*/[]/**SCHEMA_MODEL_CONFIG_DIFF*/,
      handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/,
      converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
      validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
      };
      });

      To set up the binding parameters using BaseSchemaModuleV2, use the following properties.

      Property

      Property value

      type

      crt.ModuleLoader

      module

      BaseSchemaModuleV2

      useHistoryState

      false

      isSchemaConfigInitialized

      true

      schemaName

      Code of the client module schema that implements functionality of the Classic UI custom panel

      View an example that binds the SomeClassicUIPanel client module schema to the SomeApp_FormPage Freedom UI page schema using BaseSchemaModuleV2 below.

      SomeApp_FormPage
      /* Declare the AMD module. */
      define("SomeApp_FormPage", /**SCHEMA_DEPS*/[] /**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
      return {
      viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
      /* Configuration object that binds the “SomeClassicUIPanel” client module schema. */
      {
      "operation": "insert",
      "name": "SomeClassicUIPanel",
      "values": {
      "type": "crt.ModuleLoader",
      "module": "BaseSchemaModuleV2",
      "instanceConfig": {
      "useHistoryState": false,
      "isSchemaConfigInitialized": true,
      /* “SomeClassicUIPanel” client module schema that implements functionality of the Classic UI custom panel. */
      "schemaName": "SomeClassicUIPanel"
      }
      },
      "parentName": "MainContainer",
      "propertyName": "items",
      "index": 0
      }
      ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
      viewModelConfigDiff: /**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/[]/**SCHEMA_VIEW_MODEL_CONFIG_DIFF*/,
      modelConfigDiff: /**SCHEMA_MODEL_CONFIG_DIFF*/[]/**SCHEMA_MODEL_CONFIG_DIFF*/,
      handlers: /**SCHEMA_HANDLERS*/[]/**SCHEMA_HANDLERS*/,
      converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
      validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
      };
      });
  3. Save the changes.

As a result, Creatio will load a Classic UI custom panel in Freedom UI as a sidebar.


See also

Set up a sidebar (user documentation)