The activity editor
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 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:
User interface
The SingleItem activity type presents the following user interface to the content author:
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 |
|---|---|
|
|
The serialize method that is called when changes in the activity editor are committed and applied. It returns the The activity editor must provide an implementation of this method. |
|
|
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
};
}
}
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 { }