Walkthrough: Add an activity type to the Marketing Automation UI

The FinalItem activity type

Version:

The FinalItem activity type helps define the logic when Marketing Automation enrolls contacts into campaigns. Sitecore covers relevant use cases for the FinalItem activity type by default.

Item structure

The FinalItem activity type contains the following structure:

Illustration showing the structure of the FinalItem activity type.

Properties

The FinalItem 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 other `FinalItem` activity types.

Supported CSS classes

The FinalItem 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 FinalItem activity type:

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

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

export class SampleFinalItemActivityType extends FinalItem {

  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="other-element ${cssClass}">
        <span class="icon">
          <img src="/~/icon/OfficeWhite/32x32/gearwheels.png" />
        </span>
        <p class="text with-subtitle" title="Sample final item">
          Sample final 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!