Add a custom action menu item to an individual communication option

Level: intermediate

To implement the example:

Step 1: Find the communication option ID. Read more >>>

Step 2: Implement a custom action menu. Read more >>>

Example

Add the Show notification item to the action menu of the Web communication option. Display the Notification message message when clicking on the item.

1. Find the communication option ID

Instructions: Find the communication option ID.

2. Implement a custom action menu

1. Open the contact form page. To do this, click in the top right → Application management → Application Hub → Customer 360 → Contacts form page.

2. Add the source code of the Communication options component to the source code of the Contacts form page page. Instructions: Add a custom action menu item to all communication options (step 2).

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

   1. Create a localizable string. Instructions: Add a localizable string.

   2. Fill out the localizable string parameters.

      Parameter	Parameter value
      Code	ShowNotification_caption
      Value	Show notification

   3. Save the changes.

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

5. Display the custom action menu item for the Web communication option. To do this, bind the visible property to the communication option that has the 6a8ba927-67cc-df11-9b2a-001d60e938c6 ID.

   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(ShowNotification_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 the "crt.NotificationRequest" request to the "clicked" event of the custom action menu item. */
                           "request": 'crt.NotificationRequest',
                           /* Add custom request parameters. */
                           "params": {
                               "message": 'Notification message'
                           },
                       }
                   }
               ],
           }
       },
       ...
   ]/**SCHEMA_VIEW_CONFIG_DIFF*/,

6. Save the changes.

7. Clear the cache.

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

View the result

1. Open a contact page. For example, Alexander Wilson.
2. Make sure Creatio displays the Show notification item only in the action menu of the Web communication option.
3. Click Add communication option → Web → → Show notification for the Web communication option.

As a result, Creatio will display the Notification message message. View result >>>

Source codes

define("Contacts_FormPage", /**SCHEMA_DEPS\*/[]/**SCHEMA_DEPS*/, function/**SCHEMA_ARGS*/()/**SCHEMA_ARGS*/ {
    return {
        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(ShowNotification_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 the "crt.NotificationRequest" request to the "clicked" event of the custom action menu item. */
                                "request": 'crt.NotificationRequest',
                                /* Add custom request parameters. */
                                "params": {
                                    "message": 'Notification message'
                                },
                            }
                        }
                    ],
                }
            }
        ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
        viewModelConfig: /**SCHEMA_VIEW_MODEL_CONFIG*/{}/**SCHEMA_VIEW_MODEL_CONFIG*/,
        modelConfig: /**SCHEMA_MODEL_CONFIG*/{}/**SCHEMA_MODEL_CONFIG*/,
        handlers: /**SCHEMA_HANDLERS\*/[]/**SCHEMA_HANDLERS*/,
        converters: /**SCHEMA_CONVERTERS*/{}/**SCHEMA_CONVERTERS*/,
        validators: /**SCHEMA_VALIDATORS*/{}/**SCHEMA_VALIDATORS*/
    };
});