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 page → Blank page → Select. Make sure to use only Blank page template to ensure backwards compatibility of sidebars.

4. Open the sidebar properties. To do this, click → Advanced → Sidebar. 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