次の方法で共有

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

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

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

フォームの操作

コマンド パレットでは、リッチでインタラクティブなコンテンツを作成する方法であるアダプティブ カードがサポートされています。 これは、フォームの作成や、より複雑なコンテンツの表示に役立ちます。

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

アダプティブ カード ペイロードは、 アダプティブ カード デザイナーを使用して作成できます。 そこでカードをデザインし、JSON ペイロードを拡張機能にコピーできます。

フォームページとコンテンツページの使用例については、 SamplePagesExtension/Pages/SampleContentPage.csに進みます。 注意すべきいくつかの簡単な点:

  • フォームの TemplateJson プロパティをアダプティブ カードの JSON ペイロードに設定します。 (これはアダプティブ カード デザイナーの "カード ペイロード エディター" 値です)
  • FormContent の DataJson プロパティを、カード テンプレートの入力に使用するデータに設定します。 (アダプティブ カード デザイナーの "SAMPLE DATA EDITOR" 値です)。 これは省略可能ですが、カードの作成が容易になる場合があります。
  • フォームの送信を処理する 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();
}

もちろん、好きな方法で IContent を混在させ、一致させることができます。 たとえば、最初に投稿の本文にブロック マークダウンを使用し、投稿に返信する横に FormContent を付けることができます。

関連コンテンツ