Implement a custom group of campaign elements

Level: advanced

note

This functionality is available for Creatio 8.3.3 and later.

To implement the example:

1. Create a group. Read more >>>
2. Add the group to the Campaign Designer. Read more >>>
3. Implement a custom campaign element. Read more >>>
4. Bind the custom campaign element to the custom group. Read more >>>
5. Bind the base element to the custom group. Read more >>>

Example

Create a custom "Communication" group in the Elements area of the Campaign Designer. Add both the custom SMS element and base Bulk email element to the "Communication" group. For the group, use the icon provided at the link.

1. Create a group

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

2. Create a sdkCustomCampaignElementGroup package. Instructions: Create a user-made package using Configuration section.

3. Change the current package to sdkCustomCampaignElementGroup. Instructions: Change the current package.

4. Click Add → Module.

5. Fill out the schema properties.

   For this example, use the following schema properties.

   Property	Property value
   Code	UsrCommunicationGroup
   Title	"Communication" group

6. Add a localizable string that stores the group name.

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

   2. Fill out the localizable string parameters.

      Parameter	Parameter value
      Code	CommunicationGroupCaption
      Value	Communication

   3. Click Add.

7. Add an icon that represents the "Communication" group in the Campaign Designer. If omitted, the first element's icon in the group is used as the group image.

   For this example, use the icon provided at the link.

   1. Go to the properties area → Images → click .

   2. Fill out the image properties.

      Property	Property value
      Code	CommunicationGroupImage
      Image	Click → select the icon provided at the link.

   3. Click Add.

8. Add the source code.

   UsrCommunicationGroup

   define("UsrCommunicationGroup", ["terrasoft",
       "UsrCommunicationGroupResources",
       "CampaignBaseElementSchema"],
       function(Terrasoft, resources) {
           Ext.define("Terrasoft.manager.UsrCommunicationGroup", {
               extend: "Terrasoft.CampaignBaseElementSchema",
               alternateClassName: "Terrasoft.UsrCommunicationGroup",
               /* ID of new element group. */
               managerItemUId: "28da8553-7c53-41b4-9a0c-e0d4e728d480",
               /* Group name. */
               name: "Communication",
               /* Position of element. */
               elementPosition: 55,
               /* Group caption. */
               caption: resources.localizableStrings.CommunicationGroupCaption,
               /* Group icon. */
               groupImage: resources.localizableImages.CommunicationGroupImage,
               /* Flag to indicate this is a group. */
               isGroup: true
           });
       return Terrasoft.UsrCommunicationGroup;
   });

9. Click Save.

2. Add the group to the Campaign Designer

1. Open the "CampaignElementSchemaManagerEx" (CampaignElementSchemaManagerEx code) schema.

2. Add the "Communication" group" (UsrCommunicationGroup code) schema.

   CampaignElementSchemaManagerEx

   require(["CampaignElementSchemaManager", "UsrSmsElement", "UsrCommunicationGroup"],
       function() {
           /* Register the "UsrSmsElement" in the Campaign Designer. */
           var coreElementClassNames = Terrasoft.CampaignElementSchemaManager.coreElementClassNames;
   
           /* Add the custom schema to the list of available schemas. */
           coreElementClassNames.push({
               itemType: "Terrasoft.UsrSmsElement"
           },
           {
               itemType: "Terrasoft.UsrCommunicationGroup"
           });
       }
   );

3. Click Save.

3. Implement a custom campaign element

Instructions: Implement a custom campaign element.

4. Bind the custom campaign element to the custom group

1. Open the "SMS element" (UsrSmsElement code) schema.

2. Add the groupsTo property to assign the campaign element to the "Communication" group.

3. Add the elementPosition property to set the element position.

   UsrSmsElement

   define("UsrSmsElement", ["UsrSmsElementResources",
       "CampaignBaseCommunicationSchema"], function(resources) {
       Ext.define("Terrasoft.manager.UsrSmsElement", {
           /* Parent schema. */
           extend: "Terrasoft.CampaignBaseCommunicationSchema",
           /* Alternative class name. */
           alternateClassName: "Terrasoft.UsrSmsElement",
           /* ID of the new campaign element. */
           managerItemUId: "a1226f93-f3e3-4baa-89a6-11f2a9ab2d71",
           /* Mixins that extend functionality. */
           mixins: {
               campaignElementMixin: "Terrasoft.CampaignElementMixin"
           },
           /* Element code. */
           name: "Sms",
           /* Localizable strings. */
           caption: resources.localizableStrings.SmsElementCaption,
           titleImage: resources.localizableImages.TitleImage,
           largeImage: resources.localizableImages.LargeImage,
           smallImage: resources.localizableImages.SmallImage,
           /* Schema code of the record page. */
           editPageSchemaName: "UsrSmsElementPropertiesPanel",
           /* Element type. */
           elementType: "Sms",
           /* Full name of the class that implements the campaign element logic.
           This class saves and reads the element properties from the schema
           properties. Since the class is placed in the regular package, use the
           "Terrasoft.Configuration.UsrSmsElement, Terrasoft.Configuration"
           typeName. If the class is placed in the assembly package, use 
           typeName: "Terrasoft.Configuration.UsrSmsElement,
           SomeAssemblyPackageName" */
           typeName: "Terrasoft.Configuration.UsrSmsElement, sdkCustomCampaignElement",
           /* CSS styles. */
           color: "rgba(249, 160, 27, 1)",
           width: 69,
           height: 55,
           /* Custom element properties. */
           smsText: null,
           phoneNumber: null,
           /* Bind to the "Communication" group. One element can belong to multiple groups. */
           groupsTo: ["Communication"],
           /* Position of element within the group. */
           elementPosition: 10,
           /* Define the types of outbound connections supported by this element. */
           getConnectionUserHandles: function() {
               return ["CampaignSequenceFlow", "CampaignConditionalSequenceFlow"];
           },
           /* Include custom properties in serialization. */
           getSerializableProperties: function() {
               var baseSerializableProperties = this.callParent(arguments);
               return Ext.Array.push(baseSerializableProperties, ["smsText",
                   "phoneNumber"]);
           },
           /* Configure the element icons that are displayed on the campaign flow. */
           getSmallImage: function() {
               return this.mixins.campaignElementMixin.getImage(this.smallImage);
           },
           getLargeImage: function() {
               return this.mixins.campaignElementMixin.getImage(this.largeImage);
           },
           getTitleImage: function() {
               return this.mixins.campaignElementMixin.getImage(this.titleImage);
           }
       });
       return Terrasoft.UsrSmsElement;
   });

4. Click Save.

5. Bind the base element to the custom group

1. Click Add → Module.

2. Fill out the schema properties.

   For this example, use the following schema properties.

   Property	Property value
   Code	UsrBulkEmailElement
   Title	"Bulk email" element

3. Add the source code that binds the Bulk email campaign element to the custom "Communication" group.

   UsrBulkEmailElement

   define("UsrBulkEmailElement", ["MarketingEmailSchema"], function() {
       Ext.define("Terrasoft.manager.UsrBulkEmailElement", {
           /* Parent schema. */
           extend: "Terrasoft.MarketingEmailSchema",
           /* Alternative class name. */
           alternateClassName: "Terrasoft.UsrBulkEmailElement",
           /* ID of the base campaign element. */
           managerItemUId: "523e76dc-b63e-48a8-9566-97f5173cee09",
           /* Element code. */
           name: "MarketingEmail",
           /* Bind to the "Communication" group. One element can belong to multiple groups. */
           groupsTo: ["Communication"],
           /* Position of element within the group. */
           elementPosition: 20
       });
       return Terrasoft.UsrBulkEmailElement;
   });

4. Click Save.

5. Display the "Bulk email" element within the "Communication" group in the Campaign Designer.

   1. Open the "CampaignElementSchemaManagerEx" (CampaignElementSchemaManagerEx code) schema.

   2. Add the "Bulk email" element" (UsrBulkEmailElement code) schema and remove the base "MarketingEmailSchema" (MarketingEmailSchema code) schema.

      CampaignElementSchemaManagerEx

      require(["CampaignElementSchemaManager",
          "UsrSmsElement",
          "UsrCommunicationGroup",
          "UsrBulkEmailElement",
          "MarketingEmailSchema"],
          function() {
              /* Register the "UsrSmsElement" in the Campaign Designer. */
              var coreElementClassNames = Terrasoft.CampaignElementSchemaManager.coreElementClassNames;
      
              /* Remove the base "MarketingEmailSchema" from the Campaign Designer. */
              for (var i = coreElementClassNames.length - 1; i >= 0; i--) {
                  if (coreElementClassNames[i].itemType === "Terrasoft.MarketingEmailSchema") {
                      coreElementClassNames.splice(i, 1);
                  }
              }
      
              /* Add the custom schema to the list of available schemas. */
              coreElementClassNames.push({
                  itemType: "Terrasoft.UsrSmsElement"
              },
              {
                  itemType: "Terrasoft.UsrCommunicationGroup"
              },
              {
                  itemType: "Terrasoft.UsrBulkEmailElement"
              });
          }
      );

   3. Click Save.

View the result

1. Compile the app. Instructions: Compile the configuration.
2. Clear browser cache.
3. Open the Campaigns section.
4. Create a campaign that has arbitrary parameters. Instructions: Add a campaign (user documentation).
5. Click Edit campaign flow. This opens the Campaign Designer.

As a result, Creatio will display a custom "Communication" group in the Elements area of the Campaign Designer. The group includes both the custom SMS element and base Bulk email element. View the result >>>

Source code

UsrSmsElement

define("UsrSmsElement", ["UsrSmsElementResources",
    "CampaignBaseCommunicationSchema"], function(resources) {
    Ext.define("Terrasoft.manager.UsrSmsElement", {
        /* Parent schema. */
        extend: "Terrasoft.CampaignBaseCommunicationSchema",
        /* Alternative class name. */
        alternateClassName: "Terrasoft.UsrSmsElement",
        /* ID of the new campaign element. */
        managerItemUId: "a1226f93-f3e3-4baa-89a6-11f2a9ab2d71",
        /* Mixins that extend functionality. */
        mixins: {
            campaignElementMixin: "Terrasoft.CampaignElementMixin"
        },
        /* Element code. */
        name: "Sms",
        /* Localizable strings. */
        caption: resources.localizableStrings.SmsElementCaption,
        titleImage: resources.localizableImages.TitleImage,
        largeImage: resources.localizableImages.LargeImage,
        smallImage: resources.localizableImages.SmallImage,
        /* Schema code of the record page. */
        editPageSchemaName: "UsrSmsElementPropertiesPanel",
        /* Element type. */
        elementType: "Sms",
        /* Full name of the class that implements the campaign element logic.
        This class saves and reads the element properties from the schema
        properties. Since the class is placed in the regular package, use the
        "Terrasoft.Configuration.UsrSmsElement, Terrasoft.Configuration"
        typeName. If the class is placed in the assembly package, use 
        typeName: "Terrasoft.Configuration.UsrSmsElement,
        SomeAssemblyPackageName" */
        typeName: "Terrasoft.Configuration.UsrSmsElement, sdkCustomCampaignElement",
        /* CSS styles. */
        color: "rgba(249, 160, 27, 1)",
        width: 69,
        height: 55,
        /* Custom element properties. */
        smsText: null,
        phoneNumber: null,
        /* Bind to the "Communication" group. One element can belong to multiple groups. */
        groupsTo: ["Communication"],
        /* Position of element within the group. */
        elementPosition: 10,
        /* Define the types of outbound connections supported by this element. */
        getConnectionUserHandles: function() {
            return ["CampaignSequenceFlow", "CampaignConditionalSequenceFlow"];
        },
        /* Include custom properties in serialization. */
        getSerializableProperties: function() {
            var baseSerializableProperties = this.callParent(arguments);
            return Ext.Array.push(baseSerializableProperties, ["smsText",
                "phoneNumber"]);
        },
        /* Configure the element icons that are displayed on the campaign flow. */
        getSmallImage: function() {
            return this.mixins.campaignElementMixin.getImage(this.smallImage);
        },
        getLargeImage: function() {
            return this.mixins.campaignElementMixin.getImage(this.largeImage);
        },
        getTitleImage: function() {
            return this.mixins.campaignElementMixin.getImage(this.titleImage);
        }
    });
    return Terrasoft.UsrSmsElement;
});

CampaignElementSchemaManagerEx

require(["CampaignElementSchemaManager",
    "UsrSmsElement",
    "UsrCommunicationGroup",
    "UsrBulkEmailElement",
    "MarketingEmailSchema"],
    function() {
        /* Register the "UsrSmsElement" in the Campaign Designer. */
        var coreElementClassNames = Terrasoft.CampaignElementSchemaManager.coreElementClassNames;

        /* Remove the base "MarketingEmailSchema" from the Campaign Designer. */
        for (var i = coreElementClassNames.length - 1; i >= 0; i--) {
            if (coreElementClassNames[i].itemType === "Terrasoft.MarketingEmailSchema") {
                coreElementClassNames.splice(i, 1);
            }
        }

        /* Add the custom schema to the list of available schemas. */
        coreElementClassNames.push({
            itemType: "Terrasoft.UsrSmsElement"
        },
        {
            itemType: "Terrasoft.UsrCommunicationGroup"
        },
        {
            itemType: "Terrasoft.UsrBulkEmailElement"
        });
    }
);

UsrCommunicationGroup

define("UsrCommunicationGroup", ["terrasoft",
    "UsrCommunicationGroupResources",
    "CampaignBaseElementSchema"],
    function(Terrasoft, resources) {
        Ext.define("Terrasoft.manager.UsrCommunicationGroup", {
            extend: "Terrasoft.CampaignBaseElementSchema",
            alternateClassName: "Terrasoft.UsrCommunicationGroup",
            /* ID of new element group. */
            managerItemUId: "28da8553-7c53-41b4-9a0c-e0d4e728d480",
            /* Group name. */
            name: "Communication",
            /* Position of element. */
            elementPosition: 55,
            /* Group caption. */
            caption: resources.localizableStrings.CommunicationGroupCaption,
            /* Group icon. */
            groupImage: resources.localizableImages.CommunicationGroupImage,
            /* Flag to indicate this is a group. */
            isGroup: true
        });
    return Terrasoft.UsrCommunicationGroup;
});

UsrBulkEmailElement

define("UsrBulkEmailElement", ["MarketingEmailSchema"], function() {
    Ext.define("Terrasoft.manager.UsrBulkEmailElement", {
        /* Parent schema. */
        extend: "Terrasoft.MarketingEmailSchema",
        /* Alternative class name. */
        alternateClassName: "Terrasoft.UsrBulkEmailElement",
        /* ID of the base campaign element. */
        managerItemUId: "523e76dc-b63e-48a8-9566-97f5173cee09",
        /* Element code. */
        name: "MarketingEmail",
        /* Bind to the "Communication" group. One element can belong to multiple groups. */
        groupsTo: ["Communication"],
        /* Position of element within the group. */
        elementPosition: 20
    });
    return Terrasoft.UsrBulkEmailElement;
});

---

Resources

Package with example implementation