機能拡張-JavaScriptExtensibility - JavaScript

JS SDK バージョン2.0 以降での拡張性Extensibility with the JS SDK version 2.0 and greater

開始する前にBefore you start

重要: バージョン2.0 以降の JS SDK では、 TypeScript デコレーターが使用されます。IMPORTANT: Version 2.0 and greater of the JS SDK makes use of TypeScript decorators. デコレーターは実験的な機能であり、ファイルで明示的に有効にする必要があり tsconfig.js ます。Decorators are still an experimental feature and must be explicitly enabled in your tsconfig.js file:

{
   "compilerOptions": {
       "experimentalDecorators": true
   }
}

JS SDK のバージョン2.0 では、カスタム要素とアクションを実装および登録する方法に重大な変更が導入されています。Version 2.0 of the JS SDK introduces breaking changes in the way custom elements and actions are implemented and registered. 以前のバージョンの SDK を使用して要素またはアクションを実装および登録する方法の例については、「 バージョン2.0 より前の JS sdk での機能拡張」を参照してください。For an example on how to implement and register an element or action using previous versions of the SDK, see Extensibility with the JS SDK prior to version 2.0.

カスタム要素Custom elements

カスタムアダプティブカード要素の種類を作成する手順は次のとおりです。The steps for creating a custom Adaptive Card element type are:

  • から派生する新しいクラスを作成します。 CardElementCreate a new class deriving from CardElement
  • 静的プロパティの定義を宣言してスキーマを作成するCreate its schema by declaring static property definitions
  • getJsonTypeName、、およびメソッドを実装する internalRenderImplement its getJsonTypeName, and internalRender methods
  • グローバル要素レジストリに登録するか、またはカスタムレジストリをカードごとに使用します。Register it in the global element registry, or use a custom registry on a per-card basis

例を見て、簡単なプログレスバー要素を実装します。Let's take an example and implement a simple Progress Bar element:

export class ProgressBar extends AC.CardElement {
    static readonly JsonTypeName = "ProgressBar";

    //#region Schema

    static readonly titleProperty = new AC.StringProperty(AC.Versions.v1_0, "title", true);
    static readonly valueProperty = new AC.NumProperty(AC.Versions.v1_0, "value");

    @AC.property(ProgressBar.titleProperty)
    get title(): string | undefined {
        return this.getValue(ProgressBar.titleProperty);
    }

    set title(value: string) {
        if (this.title !== value) {
            this.setValue(ProgressBar.titleProperty, value);

            this.updateLayout();
        }
    }

    @AC.property(ProgressBar.valueProperty)
    get value(): number {
        return this.getValue(ProgressBar.valueProperty);
    }

    set value(value: number) {
        let adjustedValue = value;

        if (adjustedValue < 0) {
            adjustedValue = 0;
        }
        else if (adjustedValue > 100) {
            adjustedValue = 100;
        }

        if (this.value !== adjustedValue) {
            this.setValue(ProgressBar.valueProperty, adjustedValue);

            this.updateLayout();
        }
    }

    //#endregion

    private _titleElement: HTMLElement;
    private _leftBarElement: HTMLElement;
    private _rightBarElement: HTMLElement;

    protected internalRender(): HTMLElement {
        let element = document.createElement("div");

        let textBlock = new AC.TextBlock();
        textBlock.setParent(this);
        textBlock.text = this.title;
        textBlock.wrap = true;

        this._titleElement = textBlock.render();
        this._titleElement.style.marginBottom = "6px";

        let progressBarElement = document.createElement("div");
        progressBarElement.style.display = "flex";

        this._leftBarElement = document.createElement("div");
        this._leftBarElement.style.height = "6px";
        this._leftBarElement.style.backgroundColor = AC.stringToCssColor(this.hostConfig.containerStyles.emphasis.foregroundColors.accent.default);

        this._rightBarElement = document.createElement("div");
        this._rightBarElement.style.height = "6px";
        this._rightBarElement.style.backgroundColor = AC.stringToCssColor(this.hostConfig.containerStyles.emphasis.backgroundColor);

        progressBarElement.append(this._leftBarElement, this._rightBarElement);

        element.append(this._titleElement, progressBarElement);

        return element;
    }

    getJsonTypeName(): string {
        return ProgressBar.JsonTypeName;
    }

    updateLayout(processChildren: boolean = true) {
        super.updateLayout(processChildren);

        if (this.renderedElement) {
            if (this.title) {
                this._titleElement.style.display = "none";
            }
            else {
                this._titleElement.style.removeProperty("display");
            }

            this._leftBarElement.style.flex = "1 1 " + this.value + "%";
            this._rightBarElement.style.flex = "1 1 " + (100 - this.value) + "%";
        }
    }
}

これで終了です。That's it. SDK によって認識されるようにするために、ProgressBar 要素を登録する必要があります。The ProgressBar element now needs to be registered in order to be recognized by the SDK. グローバルに登録できます。You can register it globally:

AC.GlobalRegistry.elements.register(ProgressBar.JsonTypeName, ProgressBar);

または、カードごとのレジストリを使用して、アプリケーションのさまざまなカードに対して異なるレジストリを使用できます。Or you can use a per-card registry, which allows the use of different registries for different cards in your application:

// Create a custom registry for elements
let elementRegistry = new AC.CardObjectRegistry<AC.CardElement>();

// Populate it with the default set of elements
AC.GlobalRegistry.populateWithDefaultElements(elementRegistry);

// Register the custom ProgressBar element
elementRegistry.register(ProgressBar.JsonTypeName, ProgressBar);

// Parse a card payload using the custom registry
let serializationContext = new AC.SerializationContext();
serializationContext.setElementRegistry(elementRegistry);

let card = new AC.AdaptiveCard();
card.parse(
    {
        type: "AdaptiveCard",
        version: "1.0",
        body: [
            {
                type: "ProgressBar",
                title: "This is a progress bar",
                value: 45
            }
        ]
    },
    serializationContext
);

カスタム入力Custom inputs

入力は、エンドユーザーによって入力されたデータを収集するために専用の特別な型の要素で、後でアクションにパラメーターとして渡すことができます。An input is a special type of element dedicated to collecting data entered by the end user that can subsequently be passed as parameter to actions.

アダプティブカード JS SDK のバージョン2.x では、入力に関して、次の2つの重要な変更が導入されています。Versions 2.x of the Adaptive Cards JS SDK introduces two notable changes when it comes to inputs:

  • 入力の検証: 視覚的な手掛かりを含む検証エラーを自動的に処理する組み込みの入力検証メカニズムが用意されています。Input validation: there is now a built-in input validation mechanism that automatically handles validation errors including visual cues
  • アクセシビリティの向上: 組み込みの入力でユーザー補助機能のサポートが強化されましたAccessibility improvements: built-in inputs have better support for accessibility features

このため、カスタム入力を実装する場合は、単純な要素を実装するよりも若干多くのロジックが必要になります。Because of this, implementing custom inputs requires a little more logic than implementing simple elements. 次の表に、入力検証メカニズムを partiocipate してアクセスできるようにするために、カスタム入力実装で実装する必要があるすべてのメソッドを示します。The table below lists all the methods a custom input implementation should to implement in order to partiocipate in the input validation mechanism and be accessible:

メソッドMethod 説明Description
protected updateInputControlAriaLabelledBy() このメソッドは、入力の検証シーケンス中に呼び出されます。This method is called during the input validation sequence. 入力が検証に失敗すると、関連付けられているエラーメッセージが表示され、 aria-labelledby 入力がアクセシビリティ要件に準拠するために、基になる入力コントロールの属性を更新する必要があります。When an input fails validation, its associated error message is displayed and the underlying input control's aria-labelledby attribute needs to be updated in order for the input to comply with accessibility requirements. updateInputControlAriaLabelledBy aria-labelledby 基になる入力コントロールに適切な属性を適用するには、カスタム入力がオーバーライドされる必要があります。Custom inputs SHOULD override updateInputControlAriaLabelledBy to apply the appropriate aria-labelledby attribute to the underlying input control. メソッドは、 getAllLabelIds(): string[] 属性で指定する必要があるすべてのラベルの id を取得するために使用でき aria-labelledby ます。The getAllLabelIds(): string[] method can be used to retrieve the Ids of all the labels that should be specified in the aria-labelledby attribute.
protected internalRender(): HTMLElement 他のアダプティブカードカスタム要素の場合と同様に、を internalRender オーバーライドして、必要に応じて入力をレンダリングする必要があります。Just like for any other Adaptive Card custom element, internalRender MUST be overridden to render your input as desired. ここで、実際に基になる入力コントロールを作成します。This is where you'll want to create the actual underlying input control.
protected get isNullable(): boolean 入力で未定義の値がサポートされているかどうかを示します (たとえば、input. Text のように入力します。トグルは行われません)。カスタム入力は、未定義の値がサポートされているかどうかを示すために、このプロパティ getter をオーバーライドする必要があります。Indicates whether the input supports undefined values (for instance, Input.Text does, whereas Input.Toggle doesn't.) Custom inputs SHOULD override this property getter to indicate if they support undefined values. 基本の実装はを返し true ます。The base implementation returns true.
public focus() 検証エラーが発生すると、検証に失敗した最初の入力にフォーカスが自動的に配置されます。When validation errors are encountered, the focus is automatically placed on the first input that failed validation. の基本実装は、 focus 場合によってはカスタム入力に対してのみ機能します。The base implementation of focus will in some cases just work for custom inputs. そうでない場合は、カスタム入力コントロールをオーバーライドして、 focus 基になる入力コントロールにフォーカスを明示的に配置する必要があります。When that isn't the case, custom input controls MUST override focus to explicitly put the focus on the underlying input control.
public abstract isSet(): boolean 入力の値がユーザーによって設定されているかどうかを示します。Indicates whether the input's value has been set by the user. このメソッドは入力検証シーケンス中に呼び出され、入力が成功したか、検証に失敗したかを判断します。This method is called during the input validation sequence to determine if the input passes or fails validation. isSet入力の検証メカニズムに参加するには、カスタム入力がオーバーライドされる必要があります。Custom inputs MUST override isSet in order to participate in the input validation mechanism.
public isValid(): boolean 入力の値が有効かどうかを示します。Indicates whether the value of the input is valid. このメソッドは入力検証シーケンス中に呼び出され、入力が成功したか、検証に失敗したかを判断します。This method is called during the input validation sequence to determine if the input passes or fails validation. isValid入力の検証メカニズムに参加するには、カスタム入力がオーバーライドされる必要があります。Custom inputs SHOULD override isValid in order to participate in the input validation mechanism. 基本の実装はを返し true ます。The base implementation returns true.
public abstract get value(): any 入力の値を返します。Returns the value of the input. 入力の値が基になる入力コントロールから取得されるように、カスタム入力はこれをオーバーライドする必要があります。Custom inputs MUST override this so that the value of the input is retrieved from the underlying input control.

カスタム アクションCustom actions

カスタムアクションを実装する手順は、要素の手順と同じです。The steps to implementing a custom action are the same as those for elements. 唯一の違いは、アクションは、要素レジストリではなくアクションレジストリに登録されることです。The only difference is that actions are registered in action registries, and not in element registries.

export class AlertAction extends AC.Action {
    static readonly JsonTypeName = "Action.Alert";

    //#region Schema

    static readonly textProperty = new AC.StringProperty(AC.Versions.v1_0, "text", true);

    @AC.property(AlertAction.textProperty)
    text?: string;

    //#endregion

    getJsonTypeName(): string {
        return AlertAction.JsonTypeName;
    }

    execute() {
        alert(this.text);
    }
}

新しいアクションをグローバルに登録します。Register the new action globally:

AC.GlobalRegistry.actions.register(AlertAction.JsonTypeName, AlertAction);

または、カードごとのレジストリを使用します。Or use a per-card registry:

// Create a custom registry for actions
let actionRegistry = new AC.CardObjectRegistry<AC.Action>();

// Populate it with the default set of actions
AC.GlobalRegistry.populateWithDefaultActions(actionRegistry);

// Register the custom AlertAction type
actionRegistry.register(AlertAction.JsonTypeName, AlertAction);

// Parse a card payload using the custom registry
let serializationContext = new AC.SerializationContext();
serializationContext.setActionRegistry(actionRegistry);

let card = new AC.AdaptiveCard();
card.parse(
    {
        type: "AdaptiveCard",
        version: "1.0",
        body: [
            {
                type: "TextBlock",
                text: "This demonstrates the AlertAction action."
            }
        ],
        actions: [
            {
                type: "Action.Alert",
                title: "Click me!",
                text: "Hello World"
            }
        ]
    },
    serializationContext
);

バージョン2.0 より前の JS SDK での機能拡張Extensibility with the JS SDK prior to version 2.0

カスタム要素Custom elements

開始する前にBefore you start

重要: バージョン2.0 以降の JS SDK では、 TypeScript デコレーターが使用されます。IMPORTANT: Version 2.0 and greater of the JS SDK makes use of TypeScript decorators. デコレーターは実験的な機能であり、ファイルで明示的に有効にする必要があり tsconfig.js ます。Decorators are still an experimental feature and must be explicitly enabled in your tsconfig.js file:

{
   "compilerOptions": {
       "experimentalDecorators": true
   }
}

JS SDK のバージョン2.0 では、カスタム要素とアクションを実装および登録する方法に重大な変更が導入されています。Version 2.0 of the JS SDK introduces breaking changes in the way custom elements and actions are implemented and registered. 以前のバージョンの SDK を使用して要素またはアクションを実装および登録する方法の例については、「 バージョン2.0 より前の JS sdk での機能拡張」を参照してください。For an example on how to implement and register an element or action using previous versions of the SDK, see Extensibility with the JS SDK prior to version 2.0.

カスタム要素Custom elements

カスタムアダプティブカード要素の種類を作成する手順は次のとおりです。The steps for creating a custom Adaptive Card element type are:

  • から派生する新しいクラスを作成します。 CardElementCreate a new class deriving from CardElement
  • 静的プロパティの定義を宣言してスキーマを作成するCreate its schema by declaring static property definitions
  • getJsonTypeName、、およびメソッドを実装する internalRenderImplement its getJsonTypeName, and internalRender methods
  • グローバル要素レジストリに登録するか、またはカスタムレジストリをカードごとに使用します。Register it in the global element registry, or use a custom registry on a per-card basis

例を見て、簡単なプログレスバー要素を実装します。Let's take an example and implement a simple Progress Bar element:

export class ProgressBar extends AC.CardElement {
    static readonly JsonTypeName = "ProgressBar";

    //#region Schema

    static readonly titleProperty = new AC.StringProperty(AC.Versions.v1_0, "title", true);
    static readonly valueProperty = new AC.NumProperty(AC.Versions.v1_0, "value");

    @AC.property(ProgressBar.titleProperty)
    get title(): string | undefined {
        return this.getValue(ProgressBar.titleProperty);
    }

    set title(value: string) {
        if (this.title !== value) {
            this.setValue(ProgressBar.titleProperty, value);

            this.updateLayout();
        }
    }

    @AC.property(ProgressBar.valueProperty)
    get value(): number {
        return this.getValue(ProgressBar.valueProperty);
    }

    set value(value: number) {
        let adjustedValue = value;

        if (adjustedValue < 0) {
            adjustedValue = 0;
        }
        else if (adjustedValue > 100) {
            adjustedValue = 100;
        }

        if (this.value !== adjustedValue) {
            this.setValue(ProgressBar.valueProperty, adjustedValue);

            this.updateLayout();
        }
    }

    //#endregion

    private _titleElement: HTMLElement;
    private _leftBarElement: HTMLElement;
    private _rightBarElement: HTMLElement;

    protected internalRender(): HTMLElement {
        let element = document.createElement("div");

        let textBlock = new AC.TextBlock();
        textBlock.setParent(this);
        textBlock.text = this.title;
        textBlock.wrap = true;

        this._titleElement = textBlock.render();
        this._titleElement.style.marginBottom = "6px";

        let progressBarElement = document.createElement("div");
        progressBarElement.style.display = "flex";

        this._leftBarElement = document.createElement("div");
        this._leftBarElement.style.height = "6px";
        this._leftBarElement.style.backgroundColor = AC.stringToCssColor(this.hostConfig.containerStyles.emphasis.foregroundColors.accent.default);

        this._rightBarElement = document.createElement("div");
        this._rightBarElement.style.height = "6px";
        this._rightBarElement.style.backgroundColor = AC.stringToCssColor(this.hostConfig.containerStyles.emphasis.backgroundColor);

        progressBarElement.append(this._leftBarElement, this._rightBarElement);

        element.append(this._titleElement, progressBarElement);

        return element;
    }

    getJsonTypeName(): string {
        return ProgressBar.JsonTypeName;
    }

    updateLayout(processChildren: boolean = true) {
        super.updateLayout(processChildren);

        if (this.renderedElement) {
            if (this.title) {
                this._titleElement.style.display = "none";
            }
            else {
                this._titleElement.style.removeProperty("display");
            }

            this._leftBarElement.style.flex = "1 1 " + this.value + "%";
            this._rightBarElement.style.flex = "1 1 " + (100 - this.value) + "%";
        }
    }
}

これで終了です。That's it. SDK によって認識されるようにするために、ProgressBar 要素を登録する必要があります。The ProgressBar element now needs to be registered in order to be recognized by the SDK. グローバルに登録できます。You can register it globally:

AC.GlobalRegistry.elements.register(ProgressBar.JsonTypeName, ProgressBar);

または、カードごとのレジストリを使用して、アプリケーションのさまざまなカードに対して異なるレジストリを使用できます。Or you can use a per-card registry, which allows the use of different registries for different cards in your application:

// Create a custom registry for elements
let elementRegistry = new AC.CardObjectRegistry<AC.CardElement>();

// Populate it with the default set of elements
AC.GlobalRegistry.populateWithDefaultElements(elementRegistry);

// Register the custom ProgressBar element
elementRegistry.register(ProgressBar.JsonTypeName, ProgressBar);

// Parse a card payload using the custom registry
let serializationContext = new AC.SerializationContext();
serializationContext.setElementRegistry(elementRegistry);

let card = new AC.AdaptiveCard();
card.parse(
    {
        type: "AdaptiveCard",
        version: "1.0",
        body: [
            {
                type: "ProgressBar",
                title: "This is a progress bar",
                value: 45
            }
        ]
    },
    serializationContext
);

カスタム アクションCustom actions

カスタムアクションを実装する手順は、要素の手順と同じです。The steps to implementing a custom action are the same as those for elements. 唯一の違いは、アクションは、要素レジストリではなくアクションレジストリに登録されることです。The only difference is that actions are registered in action registries, and not in element registries.

export class AlertAction extends AC.Action {
    static readonly JsonTypeName = "Action.Alert";

    //#region Schema

    static readonly textProperty = new AC.StringProperty(AC.Versions.v1_0, "text", true);

    @AC.property(AlertAction.textProperty)
    text?: string;

    //#endregion

    getJsonTypeName(): string {
        return AlertAction.JsonTypeName;
    }

    execute() {
        alert(this.text);
    }
}

新しいアクションをグローバルに登録します。Register the new action globally:

AC.GlobalRegistry.actions.register(AlertAction.JsonTypeName, AlertAction);

または、カードごとのレジストリを使用します。Or use a per-card registry:

// Create a custom registry for actions
let actionRegistry = new AC.CardObjectRegistry<AC.Action>();

// Populate it with the default set of actions
AC.GlobalRegistry.populateWithDefaultActions(actionRegistry);

// Register the custom AlertAction type
actionRegistry.register(AlertAction.JsonTypeName, AlertAction);

// Parse a card payload using the custom registry
let serializationContext = new AC.SerializationContext();
serializationContext.setActionRegistry(actionRegistry);

let card = new AC.AdaptiveCard();
card.parse(
    {
        type: "AdaptiveCard",
        version: "1.0",
        body: [
            {
                type: "TextBlock",
                text: "This demonstrates the AlertAction action."
            }
        ],
        actions: [
            {
                type: "Action.Alert",
                title: "Click me!",
                text: "Hello World"
            }
        ]
    },
    serializationContext
);

バージョン2.0 より前の JS SDK での機能拡張Extensibility with the JS SDK prior to version 2.0

カスタム要素Custom elements

カスタムアダプティブカード要素の種類を作成する手順は次のとおりです。The steps for creating a custom Adaptive Card element type are:

  • から派生する新しいクラスを作成します。 CardElementCreate a new class deriving from CardElement
  • 、、 getJsonTypeName parse toJSON 、およびの internalRenderrenderSpeech メソッドを実装するImplement its getJsonTypeName, parse, toJSON, internalRender and renderSpeech methods
  • それをレンダラーの要素レジストリに追加して登録するRegister it by adding it to the renderer's element registry

例を見て、簡単なプログレスバー要素を実装します。Let's take an example and implement a simple Progress Bar element:

import * as Adaptive from "adaptivecards";

export class ProgressBar extends Adaptive.CardElement {
    private _title: string;
    private _value: number = 0;
    private _titleElement: HTMLElement;
    private _leftBarElement: HTMLElement;
    private _rightBarElement: HTMLElement;

    protected internalRender(): HTMLElement {
        let element = document.createElement("div");

        let textBlock = new Adaptive.TextBlock();
        textBlock.setParent(this);
        textBlock.text = this.title;
        textBlock.wrap = true;

        this._titleElement = textBlock.render();
        this._titleElement.style.marginBottom = "6px";

        let progressBarElement = document.createElement("div");
        progressBarElement.style.display = "flex";

        this._leftBarElement = document.createElement("div");
        this._leftBarElement.style.height = "6px";
        this._leftBarElement.style.backgroundColor = Adaptive.stringToCssColor(this.hostConfig.containerStyles.emphasis.foregroundColors.accent.default);

        this._rightBarElement = document.createElement("div");
        this._rightBarElement.style.height = "6px";
        this._rightBarElement.style.backgroundColor = Adaptive.stringToCssColor(this.hostConfig.containerStyles.emphasis.backgroundColor);

        progressBarElement.append(this._leftBarElement, this._rightBarElement);

        element.append(this._titleElement, progressBarElement);

        return element;
    }

    getJsonTypeName(): string {
        return "ProgressBar";
    }

    toJSON(): any {
        let result = super.toJSON();

        Adaptive.setProperty(result, "title", this.title);
        Adaptive.setProperty(result, "value", this.value);

        return result;
    }

    parse(json: any, errors?: Array<Adaptive.IValidationError>) {
        super.parse(json, errors);

        this.title = Adaptive.getStringValueOrDefault(json["title"], undefined);
        this.value = Adaptive.getValueOrDefault(json["value"], this._value);
    }

    updateLayout(processChildren: boolean = true) {
        super.updateLayout(processChildren);

        if (this.renderedElement) {
            if (Adaptive.isNullOrEmpty(this.title)) {
                this._titleElement.style.display = "none";
            }
            else {
                this._titleElement.style.removeProperty("display");
            }

            this._leftBarElement.style.flex = "1 1 " + this.value + "%";
            this._rightBarElement.style.flex = "1 1 " + (100 - this.value) + "%";
        }
    }

    renderSpeech(): string {
        return (Adaptive.isNullOrEmpty(this.title) ? "Progress" : this.title) + " " + Math.ceil(this.value) + "%";
    }

    get title(): string {
        return this._title;
    }

    set title(value: string) {
        if (this._title !== value) {
            this._title = value;

            this.updateLayout();
        }
    }

    get value(): number {
        return this._value;
    }

    set value(value: number) {
        let adjustedValue = value;

        if (adjustedValue < 0) {
            adjustedValue = 0;
        }
        else if (adjustedValue > 100) {
            adjustedValue = 100;
        }

        if (this._value !== adjustedValue) {
            this._value = adjustedValue;

            this.updateLayout();
        }
    }
}

これで終了です。That's it. 次に、レンダラーを使用して進行状況バークラスを登録します。Now just register the Progress Bar class with the renderer:

Adaptive.AdaptiveCard.elementTypeRegistry.registerType("ProgressBar", () => { return new ProgressBar(); });

カスタム アクションCustom actions

カスタムのアダプティブカードアクションを作成する手順は、基本的にカスタム要素の動作と同じです。The steps for creating a custom Adaptive Card action are essentially the same as those for custom elements. 次に、構成可能なテキストを含むメッセージボックスを表示する単純なアラートアクションの例を示します。Here is a simple example of an Alert Action that simply displays a message box with configurable text:

import * as Adaptive from "adaptivecards";

export class AlertAction extends Adaptive.Action {
    text: string;

    getJsonTypeName(): string {
        return "Action.ALert";
    }

    execute() {
        alert(this.text);
    }

    parse(json: any) {
        super.parse(json);

        this.text = Adaptive.getStringValueOrDefault(json["text"], "Alert!");
    }

    toJSON() {
        let result = super.toJSON();

        Adaptive.setProperty(result, "text", this.text);

        return result;
    }
}

ここで、新しいアクションを登録します。Now register the new action:

Adaptive.AdaptiveCard.actionTypeRegistry.registerType("Action.Alert", () => { return new AlertAction(); });

Example

次に示すのは、ProgressBar 要素と AlertAction アクションの両方を使用するカードのサンプルです。Here is a sample card that uses both the ProgressBar element and AlertAction action:

{
    "type": "AdaptiveCard",
    "version": "1.0",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Custom ProgressBar element"
        },
        {
            "type": "ProgressBar",
            "title": "Please wait...",
            "value": 10
        }
    ],
    "actions": [
        {
            "type": "Action.Alert",
            "title": "Click me",
            "text": "Hello world!"
        }
    ]
}

次に、画像のレンダリング方法を示します。 And here is how it renders: image