例4 - Power Virtual Agents で送信ボタンのあるフォームを表示する

[アーティクル]
03/24/2023

注意

Power Virtual Agents では、Composer なしでこれらの機能に対応できるようになりました。

Bot Framework Composer でカスタムダイアログを開発し、Power Virtual Agents のボットに追加することで、ボットを強化できます。

この例では、Composer を使用して、Power Virtual Agents に送信ボタン付きのフォームを表示する方法について説明します。

重要

Composer の統合は、Teams Power Virtual Agents ライセンスのみを持っているユーザーはご利用いただけません。試用版、もしくは Power Virtual Agents ライセンスの完全版が必要です。

前提条件

新しいトリガーを作成する

Power Virtual Agents で、例 3 からボットを開きます。例 3 をまだ完了していない場合は、Power Virtual Agents でフォールバックとして Bing Search を使用するを参照してください。
Composer でボットを開きます。その方法については、 Bot Framework Composer の使用を開始するを参照してください。
ボットエクスプローラーで、メインダイアログに移動します。 その他のオプション (...) を選択し、続いてトリガーの追加を選択します。
トリガーの作成ウィンドウで:
1. このトリガーの種類は何ですか?で用途確認済みを、選択します。
2. このトリガーの名前は何ですか?で、StartTrial と入力します。
3. トリガーフレーズに、以下をコピーして貼り付けます:
```
- start trial
- sign up to try
- register to try service
```
4. 有効にするを選択します。
ボットの応答 ページに移動し、Contoso 食品配送サービス を選択してから、コードの表示を選択します。

以下の内容をコピーし、コードビューに貼り付けます:

# adaptivecardjson_StartTrialForm()
- ```
{
    "type": "AdaptiveCard",
    "body": [
        {
            "type": "TextBlock",
            "size": "Medium",
            "weight": "Bolder",
            "text": "Register for a meal plan trial:"
        },
        {
            "type": "Input.Text",
            "placeholder": "Please enter your Name",
            "id": "Name"
        },
        {
            "type": "Input.Text",
            "placeholder": "Please enter your Address",
            "id": "Address",
            "isMultiline": true
        },
        {
            "type": "Input.Number",
            "placeholder": "How many weeks",
            "id": "Weeks"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.Submit",
                    "title": "Submit",
                    "style": "positive"
                }
            ]
        }
    ],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}
```

このアダプティブカードの各入力フィールドはそれぞれ、名前、住所、週というユニークな ID を持っています。

ボット応答に追加されたアダプティブカード JSON のスクリーンショット。

以下のコードをコピーし、同じコードビューに貼り付けます:

# AdaptiveCard_StartTrialForm()
[Activity
    Attachments = ${json(adaptivecardjson_StartTrialForm())}
]

ボット応答に追加されたアクティビティのスクリーンショット。

会話ロジックの追加

作成ページにアクセスし、StartTrialトリガーを選択します。
作成キャンバスで、追加 (+)、質問する、テキスト を選択します。
プロパティペインの ボットの応答 セクションで、コードの表示 を選択します。

警告

応答エディタではなく、コードエディタに以下の式を追加すると、アダプティブカードの代わりに生の JSON でボットが応答するようになります。
以下の式をコピー＆ペーストしてください:
```
- ${AdaptiveCard_StartTrialForm()}
```
プロパティペインで ユーザーによる入力 タブを選択し、次の操作を行います:
1. プロパティに、user.name と入力します。
2. 値に =turn.activity.value.Name と入力します。
作成キャンバスで、追加 (+)、 プロパティの管理、と プロパティの設定 を選択します。
プロパティペインで、次の操作を実行します:
1. 割り当てで プロパティ ボックスと値ボックスに新規追加を選択します。
2. プロパティに、user.address と入力します
3. 値に =turn.activity.value.Address と入力します。
4. 新規追加 をもう一度選択して、別の プロパティ と値を追加します。
5. プロパティに、user.weeks と入力します。
6. 値に =turn.activity.value.Weeks と入力します。
キャンバスの作成で、追加 (+) を選択し、応答の送信 を選択します。

応答エディターで、次のボット応答をコピーして貼り付けます:

${user.name} - thanks for starting a ${user.weeks} week trial with us! Your meals will be delivered to this address: ${user.address}.

確認応答のスクリーンショット。

キャンバスの作成で、追加 (+) を選択し、 Power Virtual Agents トピックの開始 を選択します。
プロパティペインの、ダイアログ名で、会話の終了 を選択します

ボットのテスト

Composer コンテンツを公開して、Power Virtual Agents ボットで利用できるようにします。

重要

Composer で公開を選択すると、変更をテストに使用できるようになりますが、ボットは自動的に公開されません。

Power Virtual Agents でボットを公開すると、接続されているすべてのチャネルでボットが更新されます。
Power Virtual Agents トピック のページに移動して、新しい StartTrial トピックの内容を確認します。
ボットのテストペイン を開き、トピック間の追跡がオンになっていることを確認してください。メッセージの How do I sign up for a trial? を入力して、会話を始めます。