アクティビティエディター
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
アクティビティエディターは、アクティビティタイプのアイテム向けに書かれたAngular 5のグラフィカルユーザーインターフェースです。コンテンツ作成者はアクティビティエディターを使ってアクティビティを設定します。
以下のサンプル実装は、SingleItemアクティビティタイプに基づくアクティビティエディタを示しています。FinalItem、ConditionItem、DecisionPointItemアクティビティタイプに対して簡単に変更できます。
項目構成
SingleItemアクティビティタイプには以下の構造が含まれています。
ユーザーインターフェース
SingleItemアクティビティタイプは、コンテンツ作成者に以下のユーザーインターフェースを提供します:
TypeScriptコンポーネント実装のサンプル
アクティビティエディターコンポーネントはカスタムコードを実装する場所です。コンポーネントはEditorBaseクラスを拡張しなければならず、そのクラスには以下のメンバーがあります:
メンバー
概要
abstract serialize(): any
アクティビティエディタの変更がコミットされ適用されたときに呼び出されるシリアライズメソッドです。 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: `
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で使用するためにモジュールをエクスポートする場所です。この実装はSampleSingleItemEditorComponentngModel指令を使うため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 { }