Set up a custom action menu for communication option

Level: intermediate

In Creatio, you can manage the communication options and addresses of contacts and accounts on their form pages in the Customer 360 app. Manage the communication options in the top left and manage the addresses on the Contact info tab. Learn more: Manage communication options and addresses in Freedom UI.

Creatio lets you add a custom action menu item to the following communication option elements:

• All communication options.
• Individual communication option.
• Communication option that has a custom display format.

Add a custom action menu item to all communication options

1. Open an arbitrary form page. To do this, click in the top right → Application management → Application Hub → select the app → select the form page. For example, Contacts form page.

2. Add the source code of the Communication options component to the source code of the form page.

   1. Select the Communication options component in the working area of the Freedom UI Designer.
   2. Click in the action panel of the Freedom UI Designer and modify an arbitrary property in the setup area. For example, select the Read-only checkbox in the Editability block.
   3. Open the source code of the Freedom UI page. To do this, click in the action panel of the Freedom UI Designer. After you save the page settings, Creatio opens the source code.
   4. Find the source code that implements the Communication options component and delete the "readonly": true snippet.
   5. Save the changes.

3. Add a localizable string that stores the name of the custom action menu item. Instructions: Add a localizable string.

4. Set up the properties of the custom action menu item in the properties of the optionActions configuration object.

   View the example that adds a custom action menu item to all communication options on the contacts form page below.

   viewConfigDiff schema section

   viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
       {
           "operation": "merge",
           /* Code of the "Communication options" component. */
           "name": "ContactCommunicationOptions",
           "values": {
               "optionActions": [
                   /* Custom action menu item. */
                   {
                       "type": 'crt.MenuItem',
                       /* The name of the custom action menu item. */
                       "caption": "#ResourceString(SomeCustomCaption_caption)#",
                       /* The icon of the custom action menu item. */
                       "icon": 'message-warn-button-icon',
                       /* Property that controls the visibility of the custom action menu item. */
                       "visible": true,
                       "clicked": {
                           /* Bind an arbitrary request to the "clicked" event of the custom action menu item. */
                           "request": 'SomeRequestName',
                           /* Add custom request parameters. */
                           "params": {
                               ...
                           },
                       }
                   }
               ],
           }
       },
       ...
   ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

5. Save the changes.

6. Clear the cache.

7. Refresh the page that contains the modified custom action menu.

As a result, Creatio will add a custom action menu item to all communication options.

Detailed example: Add a custom action menu item to all communication options.

Add a custom action menu item to an individual communication option

General procedure to add a custom action menu item to an individual communication option:

1. Find the communication option ID. Read more >>>
2. Implement a custom action menu. Read more >>>

Detailed example: Add a custom action menu item to an individual communication option.

1. Find the communication option ID

1. Open the Lookups section. To do this, click in the top right → System setup → Lookups.
2. Open the Communication option types lookup.
3. Set up the lookup list. To do this, click View → Select fields to display on the lookup toolbar.
4. Add the column to the lookup list. To do this, click → select the Id column → Select.
5. Save the changes.
6. View the communication option ID in the Id column.

2. Implement a custom action menu

1. Instructions: Add a custom action menu item to all communication options (steps 1–3).

2. Display the custom action menu item for an arbitrary communication option. To do this, bind the visible property to the communication option ID.

   View the example that displays the custom action menu item for the Web communication option (6a8ba927-67cc-df11-9b2a-001d60e938c6 ID) on the contacts form page below.

   viewConfigDiff schema section

   viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
       {
           "operation": "merge",
           /* Code of the "Communication options" component. */
           "name": "ContactCommunicationOptions",
           "values": {
               "optionActions": [
                   /* Custom action menu item. */
                   {
                       "type": 'crt.MenuItem',
                       /* The name of the custom action menu item. */
                       "caption": "#ResourceString(SomeCustomCaption_caption)#",
                       /* The icon of the custom action menu item. */
                       "icon": 'message-warn-button-icon',
                       /* Property that controls the visibility of the custom action menu item. Set up a display condition. */
                       "visible": "$ContactCommunicationOptionsItems.ContactCommunicationOptionsDS_CommunicationType| crt.IsEqual : '6a8ba927-67cc-df11-9b2a-001d60e938c6'",
                       "clicked": {
                           /* Bind an arbitrary request to the "clicked" event of the custom action menu item. */
                           "request": 'SomeRequestName',
                           /* Add custom request parameters. */
                           "params": {
                               ...
                           },
                       }
                   }
               ],
           }
       },
       ...
   ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
   ...

   where:

   ContactCommunicationOptionsItems is the name of the attribute to bind the communication options using the items field.

   ContactCommunicationOptionsDS is the name of the data source to bind communication options.

   CommunicationType is the name of the model attribute.

3. Save the changes.

4. Clear the cache.

5. Refresh the page that contains the modified custom action menu.

As a result, Creatio will add a custom action menu item to an individual communication option.

Add a custom action menu item to the communication option that has a custom display format

General procedure to add a custom action menu item to the communication option that has a custom display format:

1. Implement a custom template for display format. Read more >>>
2. Implement a custom action menu. Read more >>>

Detailed example: Add a custom action menu item to the communication option that has a custom display format.

1. Implement a custom template for display format

1. Implement a custom template for display format using a custom Freedom UI component. Instructions: Custom UI component implemented using remote module.

2. Change the display format. Instructions: Change the display format (optional).

3. Set up the custom display format.

   1. Instructions: Add a custom action menu item to all communication options (steps 1–3).

   2. Set up the properties of the configuration object that implements the custom display format in the properties of the templates configuration object.

      View the example that sets up the custom_display_format display format on the contacts form page below.

      viewConfigDiff schema section

      viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
          {
              "operation": "merge",
              /* Code of the "Communication options" component. */
              "name": "ContactCommunicationOptions",
              "values": {
                  "templates": {
                      /* Add a custom display format. */
                      "custom_display_format": {
                          /* Type of the custom display format. Enter existing type in the "type" property. Otherwise, an error occurs. */
                          "type": "CustomDisplayFormatType",
                          ...
                      }
                  }
              }
          },
          ...
      ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

   3. Save the changes.

As a result, the selected communication option will have the custom display format.

2. Implement a custom action menu

1. Instructions: Add a custom action menu item to all communication options (steps 1, 3).

2. Set up the action menu properties in the tools array of configuration objects.

3. Set up the properties of the action menu item in the menuItems array of configuration objects.

   View the example that sets up the custom_display_format display format on the contacts form page below.

   viewConfigDiff schema section

   viewConfigDiff: /**SCHEMA_VIEW_CONFIG_DIFF*/[
       {
           "operation": "merge",
           /* Code of the "Communication options" component. */
           "name": "ContactCommunicationOptions",
           "values": {
               "templates": {
                   /* Add a custom display format. */
                   "custom_display_format": {
                       ...,
                       /* Action menu of the custom display format. */
                       "tools": [{
                           "type": 'crt.Button',
                           "icon": 'actions-button-icon',
                           "iconPosition": 'only-icon',
                           "color": 'default',
                           "size": 'none',
                           "clickMode": 'menu',
                           "displayType": 'text',
                           "classes": ['actions-btn'],
                           "menuItems": [
                               /* Action menu item. */
                               {
                                   "type": 'crt.MenuItem',
                                   /* The name of the custom action menu item. */
                                   "caption": '#ResourceString(SomeCustomCaption_caption)#',
                                   /* The icon of the custom action menu item. */
                                   "icon": 'message-warn-button-icon',
                                   /* Property that controls the visibility of the custom action menu item. */
                                   "visible": true,
                                   "clicked": {
                                       /* Bind an arbitrary request to the "clicked" event of the custom action menu item. */
                                       "request": 'SomeRequestName',
                                       /* Add custom request parameters. */
                                       "params": {
                                           ...
                                       },
                                   }
                               }
                           ]
                       }]
                   }
               }
           }
       },
       ...
   ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

4. Save the changes.

5. Clear the cache.

6. Refresh the page that contains the modified custom action menu.

As a result, Creatio will add a custom action menu item to the communication option that has a custom display format.

---

See also

Manage communication options and addresses in Freedom UI (user documentation)