チュートリアル: マーケティングオートメーションUIにアクティビティの種類を追加する

アクティビティエディター

Version:

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

アクティビティエディターは、アクティビティタイプアイテム用に書かれたAngular 5グラフィカルユーザーインターフェースです。コンテンツ作成者は、アクティビティエディターを使用してアクティビティを設定します。

次のサンプル実装は、SingleItemアクティビティの種類に基づくアクティビティのアクティビティエディターを示しています。FinalItem、ConditionItem、およびDecisionPointItemアクティビティタイプに対して簡単に変更できます。

アイテムの構造

SingleItemアクティビティの種類には、次の構造が含まれています。

Illustration showing the structure of the SingleItem activity type.

ユーザーインターフェース

SingleItemアクティビティの種類は、コンテンツ作成者に次のユーザーインターフェイスを提供します。

Illustration showing the user interface of the SingleItem activity type.

TypeScriptコンポーネントの実装例

アクティビティエディターコンポーネントは、カスタムコードを実装する場所です。コンポーネントは、次のメンバーを持つEditorBaseクラスを拡張する必要があります。

メンバー	形容
abstract serialize(): any	アクティビティ・エディタでの変更がコミットされ、適用されるときに呼び出されるserializeメソッド。 modelオブジェクトを返します。アクティビティエディターは、このメソッドの実装を提供する必要があります。
model: any	アクティビティパラメーターに対応するプロパティを含むオブジェクト。

メンバー

形容

abstract serialize(): any

アクティビティ・エディタでの変更がコミットされ、適用されるときに呼び出されるserializeメソッド。 modelオブジェクトを返します。

アクティビティエディターは、このメソッドの実装を提供する必要があります。

model: any

アクティビティパラメーターに対応するプロパティを含むオブジェクト。

これは、SingleItemアクティビティエディターの実装例です。

//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
    };
  }
}

メモ

この実装のserializeメソッドは、SingleItemアクティビティの種類から継承されたcountプロパティのみを含むオブジェクトを返します。

マーケティングオートメーションアプリケーションサービスのドキュメントを参照してください。これらは、アクティビティエディターを実装するときに便利です。

サンプルTypeScriptモジュールの実装

このモジュールでは、コンポーネントやその他のモジュールをインポートし、Sitecoreで使用するためにモジュールをエクスポートします。この実装では、SampleSingleItemEditorComponentがngModelディレクティブを使用するため、FormsModuleがインポートされます。

//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 { }

この記事を改善するための提案がある場合は、お知らせください!