Skip to main content
Version: 8.1

Migrate a Classic UI panel to Freedom UI

Level: intermediate
note

This functionality is available in beta version in Creatio 8.1.3.

To implement the example:

  1. Create a sidebar. Read more >>>
  2. Implement loading a Classic UI custom panel in Freedom UI. Read more >>>
Example

Migrate a CTI panel of the communication panel to Freedom UI. Display a sidebar of the communication panel below other panels.

1. Create a sidebar

  1. Enable the sidebar functionality in Creatio. To do this, change the status of the "SidePanelExtensions" additional feature. Instructions: Change the status of an additional feature for all users.

  2. Create an app based on the Custom template. Instructions: Create an app manually (user documentation).

    For this example, create a Requests app.

  3. 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.

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

  5. Fill out the sidebar properties.

    Property

    Property description

    Title

    CTI sidebar

    Code

    UsrCtiSidebar

    Location

    Communication panel

    Sidebar icon

    Sidebar position

    5000

As a result, the sidebar will be created without being displayed on Freedom UI communication 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.

      For this example, add the configuration object that configures CTI panel Classic UI custom panel.

    3. Fill out the properties of binding parameters.

      Property

      Property value

      type

      crt.ModuleLoader

      module

      CtiPanelModule

      viewConfigDiff schema section
      viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
      /* Configuration object that binds the "CtiPanelModule" client module schema. */
      {
      "operation": "insert",
      "name": "CtiPanelModule",
      "values": {
      "type": "crt.ModuleLoader",
      /* "CtiPanelModule" client module schema that implements functionality of the "CTI panel" Classic UI custom panel. */
      "module": "CtiPanelModule"
      },
      "index": 0
      }
      ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
  3. Save the changes.

View the result

  1. Open the app.
  2. Open the CTI sidebar. To do this, click .

As a result, Creatio will migrate a CTI panel of the communication panel to Freedom UI and Display a sidebar of the communication panel below other panels. View the result >>>

Source code

UsrPageOfCtiSidebar
/* Declare the AMD module. */
define("UsrPageOfCtiSidebar", /**SCHEMA_DEPS*/[]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
return {
viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
/* Configuration object that binds the "CtiPanelModule" client module schema. */
{
"operation": "insert",
"name": "CtiPanelModule",
"values": {
"type": "crt.ModuleLoader",
/* "CtiPanelModule" client module schema that implements functionality of the "CTI panel" Classic UI custom panel. */
"module": "CtiPanelModule"
},
"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*/
};
});

Resources

Package with example implementation