Add a custom action menu item to all communication options

Level: intermediate

To implement the examples implement a custom action menu. Read more >>>

Example

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

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.

   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. */
                       "visible": true,
                       "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*/,

5. Save the changes.

6. Clear the cache.

7. 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 in the action menu of all communication options.
3. Click → Show notification for the Business phone 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. */
                            "visible": true,
                            "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*/
    };
});