フォームを使用してユーザー入力を取得する

前へ: マークダウンコンテンツを表示する

基本的なマークダウン コンテンツを表示する方法を知ったので、アダプティブ カード の機能を活用して、より意味のあるものを表示してみましょう。 これは、フォームを作成したり、より複雑なコンテンツを表示したりする場合に便利です。

フォームの操作

IFormContentインターフェイスを使用して、コマンド パレットでカードを作成できます (ツールキットの実装については FormContent を参照してください)。 これにより、アダプティブ カード JSON を指定でき、コマンド パレットによってレンダリングされます。 ユーザーがフォームを送信すると、コマンド パレットはフォーム上の SubmitForm メソッドを JSON ペイロードとフォームからの入力と共に呼び出します。

1. Pages ディレクトリに新しいクラスを追加します
2. クラスに名前を付けます FormPage
3. FormPage クラスを更新します。

internal sealed partial class FormPage : ContentPage
{
    private readonly SampleContentForm sampleForm = new();

    public override IContent[] GetContent() => [sampleForm];

    public FormPage()
    {
        Name = "Open";
        Title = "Sample Content";
        Icon = new IconInfo("\uECA5"); // Tiles
    }
}

FormPage は、ユーザーにフォーム (SampleContentForm) を表示するコンテンツ ページです。 SampleContentFormのインスタンスが作成されます。これは、ユーザー入力フォームの UI とロジックを記述するフォーム (後で定義) です。

1. ファイルの下部 ( FormPage クラスの下) に、次を追加します。

internal sealed partial class SampleContentForm : FormContent
{
    public SampleContentForm()
    {
        TemplateJson = $$"""
{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.6",
    "body": [
        {
            "type": "TextBlock",
            "size": "medium",
            "weight": "bolder",
            "text": " Sample",
            "horizontalAlignment": "center",
            "wrap": true,
            "style": "heading"
        },
        {
            "type": "Input.Text",
            "label": "Name",
            "style": "text",
            "id": "SimpleVal",
            "isRequired": true,
            "errorMessage": "Name is required",
            "placeholder": "Enter your name"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit",
            "data": {
                "id": "1234567890"
            }
        }
    ]
}
""";

    }

    public override CommandResult SubmitForm(string payload)
    {
        var formInput = JsonNode.Parse(payload)?.AsObject();
        Debug.WriteLine($"Form submitted with formInput: {formInput}");
        if (formInput == null)
        {
            return CommandResult.GoHome();
        }
        ConfirmationArgs confirmArgs = new()
        {
            PrimaryCommand = new AnonymousCommand(
                () =>
                {
                    string? name = formInput["Name"]?.ToString();
                    ToastStatusMessage t = new($"Hi {name}" ?? "No name entered");
                    t.Show();
                })
            {
                Name = "Confirm",
                 Result = CommandResult.KeepOpen(),
            },
            Title = "You can set a title for the dialog",
            Description = "Are you really sure you want to do the thing?",
        };
        return CommandResult.Confirm(confirmArgs);
    }
}

SampleContentFormには、フォームとフォームの送信ロジックが含まれています。 TemplateJsonには、フォーム構造とアクションが含まれています。 この例には、"Name" という ID を持ち、フォームを送信するアクションが 1 つのテキスト入力のみが含まれています。 SubmitFormはペイロードの解析を処理します。無効な場合はコマンドがホームに返され、それ以外の場合は確認ダイアログとトースト通知が表示されます。

1. <ExtensionName>CommandsProvider.csをオープンする
2. MarkdownPageをFormPageに置き換えます。

public <ExtensionName>CommandsProvider()
{
    DisplayName = "My sample extension";
    Icon = IconHelpers.FromRelativePath("Assets\\StoreLogo.png");
    _commands = [
+       new CommandItem(new FormPage()) { Title = DisplayName },
    ];
}

1. 拡張機能をデプロイする
2. コマンド パレットで操作します。Reload

アダプティブ カードは、別の json オブジェクトを使用してカスタム フォームを動的に作成するなど、より複雑なフォームを実行できます。 最初に アダプティブ カード デザイナー を使用してフォームを設定し、コマンドを更新します。

1. https://adaptivecards.io/designer/をオープンする
2. CARD PAYLOAD EDITORで json を次のように置き換えます。

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.6",
    "body": [
        {
            "type": "TextBlock",
            "size": "medium",
            "weight": "bolder",
            "text": " ${ParticipantInfoForm.title}",
            "horizontalAlignment": "center",
            "wrap": true,
            "style": "heading"
        },
        {
            "type": "Input.Text",
            "label": "Name",
            "style": "text",
            "id": "Name",
            "isRequired": true,
            "errorMessage": "Name is required",
            "placeholder": "Enter your name"
        },
        {
            "type": "TextBlock",
            "size": "medium",
            "weight": "bolder",
            "text": "${Survey.title} ",
            "horizontalAlignment": "center",
            "wrap": true,
            "style": "heading"
        },
        {
            "type": "Input.Toggle",
            "label": "Please accept the terms and conditions:",
            "title": "${Survey.questions[0].question}",
            "valueOn": "true",
            "valueOff": "false",
            "id": "AcceptsTerms",
            "isRequired": true,
            "errorMessage": "Accepting the terms and conditions is required"
        },
        {
            "type": "Input.Toggle",
            "label": "How do you feel about red cars?",
            "title": "${Survey.questions[1].question}",
            "valueOn": "RedCars",
            "valueOff": "NotRedCars",
            "id": "ColorPreference"
        }
    ],
    "actions": [
        {
            "type": "Action.Submit",
            "title": "Submit",
            "data": {
                "id": "1234567890"
            }
        }
    ]
}

1. SAMPLE DATA EDITORで json を次のように置き換えます。

{
    "ParticipantInfoForm": {
        "title": "Input.Text elements"
    },
    "Survey": {
        "title": "Input Toggle",
        "questions": [
            {
                "question": "I accept the terms and conditions (True/False)"
            },
            {
                "question": "Red cars are better than other cars"
            }
        ]
    }
}

デザイナー ツールは次のようになります。

拡張機能にこのコンテンツを追加するには:

1. TemplateJsonをCARD PAYLOAD EDITORのコンテンツで更新する
2. [ TemplateJsonで、次を追加します。

        DataJson = $$"""
{
    "ParticipantInfoForm": {
        "title": "Input.Text elements"
    },
    "Survey": {
        "title": "Input Toggle",
        "questions": [
            {
                "question": "I accept the terms and conditions (True/False)"
            },
            {
                "question": "Red cars are better than other cars"
            }
        ]
    }
}
""";

1. 拡張機能をデプロイする
2. コマンド パレットで操作します。Reload

TemplateJson と DataJson 連携して、動的なデータドリブン フォームを作成します。 TemplateJson はフォームブループリントとして機能し、DataJson は動的コンテンツソースとして機能します。

完全なサンプル

フォームページとコンテンツページの使用例については、 SamplePagesExtension/Pages/SampleContentPage.csに進みます。

主要項目

• TemplateJsonの FormContent プロパティを使用してフォーム レイアウトを定義します。 これは、 https://adaptivecards.io/designer/のカード ペイロード エディターの JSON ペイロードです。 フォームの構造と UI について説明します。

• 必要に応じて、 DataJson プロパティを使用して動的データをバインドします。 これは、アダプティブ カード デザイナーのサンプル データ エディターの JSON です。 ${...} プレースホルダーを使用してカードに動的な値を挿入できるため、フォームのローカライズと保守が容易になります。

• SubmitForm メソッドを実装してフォームの送信を処理します。 このメソッドは、ユーザーがフォームを送信するときに呼び出されます。 フォームのペイロードを JSON 文字列として受け取ります。これを解析して使用して、アクションのトリガー、確認ダイアログの表示、ナビゲーション結果の返しを行うことができます。

public override CommandResult SubmitForm(string payload)
{
    var formInput = JsonNode.Parse(payload)?.AsObject();
    if (formInput == null)
    {
        return CommandResult.GoHome();
    }

    // retrieve the value of the input field with the id "name"
    var name = formInput["name"]?.AsString();
        
    // do something with the data

    // and eventually
    return CommandResult.GoBack();
}

関連コンテンツ

• PowerToys コマンド パレット ユーティリティ
• 拡張性の概要
• 拡張機能のサンプル