Walkthrough: Add an activity type to the Marketing Automation UI

The ConditionItem activity type

Version:

The ConditionItem activity type helps define the logic when Marketing Automation enrolls contacts into campaigns.

You use the ConditionItem activity type to wait for a contact interaction or a time-out before you decide between two different marketing actions. For example, you can offer a contact to sign up for a newsletter. If the contact signs up you can continue along the Yes path and send a thank-you message. If the contact does not sign up or does nothing for a period of time, you can choose to proceed along the No path.

Item structure

The ConditionItem activity type contains the following structure:

Illustration showing the structure of the ConditionItem activity type.

Properties

The ConditionItem activity type has the following properties:

Ingoing paths	1
Outgoing paths	2
Title and subtitle	Displayed when the activity type parameters are defined.
Logic positions	Before or after the outgoing paths of other `ConditionItem` activity types.

Supported CSS classes

The ConditionItem activity type supports the following CSS classes:

CSS class	Undefined	Defined
`listener`

Sample TypeScript implementation

This is a sample implementation of the ConditionItem activity type:

sample/src/sample-condition-item-activity-type.ts

import { ConditionItem } from '@sitecore/ma-core';

export class SampleConditionItemActivityType extends ConditionItem {

  getVisual(): string {
    const subTitle = this.isDefined ? 'Count: ' + this.editorParams.count : '';
    const cssClass = this.isDefined ? '' : 'undefined';

    // The CSS class can only be listener.
    return `
      <div class="listener ${cssClass}">
        <span class="icon">
          <img src="/~/icon/OfficeWhite/32x32/gearwheels.png" />
        </span>
        <p class="text with-subtitle" title="Sample condition item">
          Sample condition item
          <small class="subtitle" title="${subTitle}">${subTitle}</small>
        </p>
      </div>
    `;
  }

  get isDefined(): boolean {
    /*
      The editorParams property value is the object that is serialized from the activity editor.
      If the activity is undefined, the editorParams property will evaluate to {}.
    */
    return Boolean(this.editorParams.count);
  }
}

If you have suggestions for improving this article, let us know!