1. Walkthrough: Add an activity type to the Marketing Automation UI

The activity editor

Version:

An activity editor is an Angular 5 graphical user interface written for an activity type item. The content author uses activity editors to configure activities.

The following sample implementation shows an activity editor for an activity based on the SingleItem activity type. You can easily modify it for the FinalItem, ConditionItem, and DecisionPointItem activity types.

Item structure

The SingleItem activity type contains the following structure:

Illustration showing the structure of the SingleItem activity type.

User interface

The SingleItem activity type presents the following user interface to the content author:

Illustration showing the user interface of the SingleItem activity type.

Sample TypeScript component implementation

The activity editor component is where you implement your custom code. The component must extend the EditorBase class, which has the following members:

Member

Description

abstract serialize(): any

The serialize method that is called when changes in the activity editor are committed and applied. It returns the model object.

The activity editor must provide an implementation of this method.

model: any

An object containing properties corresponding to the activity parameters.

This is a sample implementation of the SingleItem activity editor:

//sample/src/editor/sample-single-item-editor.component.ts

import { Component, OnInit } from '@angular/core';
import { EditorBase } from '@sitecore/ma-core';

@Component({
  selector: 'sample-single-item-editor',
  template: `
    <section class="content">
      <div class="form-group">
        <div class="row sample-single-item-editor">
          <label class="col-6 title">Count</label>
          <div class="col-6">
            <span class="minus-icon" (click)="decreaseValue()">-</span>
            <input type="number" class="form-control" [(ngModel)]="count"/>
            <span class="plus-icon" (click)="increaseValue()">+</span>
          </div>
        </div>
      </div>
    </section>
  `,
  // CSS styles are omitted for brevity.
  styles: [``]
})

export class SampleSingleItemEditorComponent extends EditorBase implements OnInit {

  /**
  * Count property is bound to the input element
  */
  count: number;

  /**
  * A component lifecycle hook.
  * Called whenever the model property or any other property in the component changes.
  */
  ngOnInit(): void {
    this.count = this.model ? this.model.count || 0 : 0;
  }

  /**
  * Increases the count by 1. Bound to the '+' button.
  */
  increaseValue() {
    this.count++;
  }

  /**
  * Decreases the count by 1. Bound to the '-' button.
  */
  decreaseValue() {
    this.count--;
  }

  /**
  * Called when the changes in the editor are applied.
  * @returns an object that contains the values of the parameters of the activity,
  * where each property corresponds to a parameter key.
  */
  serialize(): any {
    return {
      count: this.count
    };
  }
}
Note

The serialize method in this implementation returns an object containing only the count property inherited from the SingleItem activity type.

See the documentation for the Marketing Automation application services. These are useful when implementing activity editors.

Sample TypeScript module implementation

The module is where you import your component and other modules and export the module for use in Sitecore. This implementation imports the FormsModule because the SampleSingleItemEditorComponent uses the ngModel directive.

//sample/src/editor/sample-single-item-editor.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { SampleSingleItemEditorComponent } from './sample-single-item-editor.component';

@NgModule({
  imports: [
    FormsModule
  ],
  declarations: [SampleSingleItemEditorComponent],
  entryComponents: [SampleSingleItemEditorComponent]
})

export class SampleSingleItemModule { }
If you have suggestions for improving this article, let us know!