Set up a custom communication option

Level: beginner

To implement the example:

1. Create a custom communication option. Read more >>>
2. Bind the communication option to a communication type. Read more >>>
3. Change the display format. Read more >>>
4. Add an icon to the custom communication option. Read more >>>

Example

Add the WhatsApp custom communication option to contact page. Bind the communication option to the Social network communication type. Use the phone display format and the icon for the communication option.

1. Create a custom communication option

1. Open the Lookups section. To do this, click in the top right → System setup → Lookups.

2. Open the Communication option types lookup.

3. Click New.

4. Fill out the properties of the custom communication option.

   Property	Property value
   Name	WhatsApp
   Use for contacts	Select the checkbox

5. Save the changes.

6. Refresh the page that contains the custom communication option.

As a result, the WhatsApp custom communication option will be displayed on a contact page. To display the communication option in a separate communication type, bind the communication option to a communication type.

2. Bind the communication option to a communication type

1. Open the communication option page. To do this, click on the WhatsApp communication option.

2. Add a communication type for the communication option. To do this, click on the Communication types detail.

3. Select the Social network checkbox.

4. Save the changes.

   

5. Clear the cache.

As a result, the WhatsApp custom communication option will be bound to the Social network communication type.

3. Change the display format

1. Set up the lookup list. To do this, click View → Select fields to display on the lookup toolbar.

2. Add the column to the lookup list. To do this, click → select the Display format column → Select.

3. Save the changes.

4. Fill out the properties of display format for the WhatsApp communication option.

   Property	Property description
   Display format	phone

5. Refresh the page that contains the custom communication option.

As a result, the WhatsApp communication option will use the phone display format.

4. Add an icon to the custom communication option

1. Make sure the icon meets the requirements. Instructions: Add an icon (step 1).

2. Upload an icon to the [SysImage] database table.

   1. Create the Image upload Freedom UI app. Instructions: Create an app.

   2. Open the Image upload form page Freedom UI page.

   3. Add the Image type field to an arbitrary place on the Freedom UI page. Leave default field parameter values.

   4. Save the changes.

   5. Open the Image upload app page and click Run app.

   6. Click New on the toolbar of the Image upload app list page.

   7. Fill out the image properties.

      Property	Property value
      Name	Image_1
      	Click to upload the icon.

   8. Save the changes.

3. Find the icon ID.

   1. Open the Lookups section. To do this, click in the top right → System setup → Lookups.

   2. Create a lookup. To do this, click New lookup on the Lookups section toolbar.

   3. Fill out the lookup properties.

      Property	Property value
      Name	Images
      Object	Image

   4. Save the changes.

   5. Open the Images lookup.

   6. Set up the lookup list. To do this, click View → Select fields to display on the lookup toolbar.

   7. Add the column to the lookup list. To do this, click → select the Id column → Select.

   8. Save the changes.

   9. View the icon ID in the Id column.

   

4. Bind the icon ID to the communication option.

   1. Open the Configuration section. Instructions: Open the Configuration section.

   2. Select a user-made package to add the SQL script.

   3. Add temporary SQL script. To do this, click Add → SQL script on the section list toolbar.

   4. Fill out the SQL script properties.

      Property	Property value
      Code	UsrAddIconForCommunicationOptionMSSQL
      Installation type	AfterPackage
      Backward compatible	Select the checkbox

      

   5. Add the following SQL script in the Script Designer.

      UsrAddIconForCommunicationOptionMSSQL

      update "CommunicationType"
          set "ImageLinkId" = '4e462f54-eb43-8a32-869b-b46e6f4293c4'
      where "Name" = 'WhatsApp'

      where:

      [CommunicationType] is the database table that stores communication options.

      4e462f54-eb43-8a32-869b-b46e6f4293c4 is the icon ID from the Images lookup (i. e., icon from the [SysImage] database table).

      WhatsApp is the communication option from the Communication option types lookup to bind an icon.

   6. Save the changes.

   7. Install the SQL script. To do this, click → Install in the section list for the UsrAddIconForCommunicationOptionMSSQL.

   8. Confirm the installation.

As a result, the icon that has the 4e462f54-eb43-8a32-869b-b46e6f4293c4 ID will be added to the WhatsApp communication option.

View the result

1. Open a contact page. For example, Alexander Wilson.
2. Click Add communication option → Social network.

As a result, Creatio will add the icon to the WhatsApp communication option that will be displayed on the contact page in the Social network communication type. The communication option will have an icon and the phone display format. View result >>>

Source code

update "CommunicationType"
    set "ImageLinkId" = '4e462f54-eb43-8a32-869b-b46e6f4293c4'
where "Name" = 'WhatsApp'