Set up a custom action menu for communication option

To implement the example, 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*/
    };
});

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*/
    };
});

To implement the example:

Step 1: Implement a custom template for display format. Read more >>>

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

Example. Implement the home_phone custom display format for the Home phone communication option on the contact page. Add the Show notification item to the action menu of the Home phone communication option. Display the Notification message message when clicking on the item.

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.

   1. Open the Lookups section. To do this, click in the top right → System setup → Lookups.
   2. Open the Communication option types lookup.
   3. Instructions: Change the display format (optional) (steps 1–3).

   4. Change the Display format column of the Home phone communication option from "phone" to "home_phone."

      

3. Set up the custom display format.

   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 home_phone configuration object in the properties of the templates configuration object.

      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. */
                      "home_phone": {
                          /* Type of the custom display format. Enter existing type in the "type" property. Otherwise, an error occurs. */
                          "type": "crt.PhoneInput",
                          "phoneAsLink": true,
                          "displayAsPhone": true,
                          "displayPhoneMask": true,
                          ...
                      }
                  }
              }
          },
          ...
      ]/**SCHEMA_VIEW_CONFIG_DIFF*/,
      

   5. Save the changes.

As a result, the Home phone communication option will have the home_phone display format.

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

   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. */
                   "home_phone": {
                       ...,
                       /* Action menu of the custom display format. */
                       "tools": [{
                           /* Type of the custom display format. Enter existing type in the "type" property. Otherwise, an error occurs. */
                           "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(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*/,
   

4. Save the changes.
5. Clear the cache.
6. 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. Add the Home phone communication option. To do this, click Add communication option → Phone → Home phone.
4. Click → Show notification for the Home 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": {
                    "templates": {
                        /* Add a custom display format. */
                        "phone": {
                            /* Type of the custom display format. Enter existing type in the "type" property. Otherwise, an error occurs. */
                            "type": "crt.PhoneInput",
                            "phoneAsLink": true,
                            "displayAsPhone": true,
                            "displayPhoneMask": true,
                            /* 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(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*/
    };
});