Walkthrough: Add an activity type to the Marketing Automation UI

The SingleItem activity type

Version:

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

You use the SingleItem activity type when you want to perform a marketing action and afterwards proceed directly to another activity type. For example, it can send an email to the contact and then send an SMS with a unique and personal code.

Item structure

The SingleItem activity type contains the following structure:

Illustration showing the structure of the SingleItem activity type.

Properties

The SingleItem activity type has the following properties:

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

Supported CSS classes

The SingleItem activity type supports the following CSS classes:

CSS class	Undefined	Defined
`marketing-action`
`other-element`

Sample TypeScript implementation

This is a sample implementation of the SingleItem activity type:

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

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

export class SampleSingleItemActivityType extends SingleItem {

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

    // The CSS class can either be marketing-action or other-element.
    return `
      <div class="marketing-action ${cssClass}">
        <span class="icon">
          <img src="/~/icon/OfficeWhite/32x32/gearwheels.png" />
        </span>
        <p class="text with-subtitle" title="Sample single item">
          Sample single 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!