次の方法で共有

アプリケーション内でのカードのレンダリング

  • [アーティクル]

アプリケーション内でアダプティブ カードをレンダリングするのは簡単です。 すべての一般的なプラットフォーム向けに SDK が提供されているだけでなく、独自のアダプティブ カード レンダラーを作成するための詳細な仕様も提供されています。

  1. 対象のプラットフォームにレンダラー SDK をインストールします。
  2. アプリのスタイル、規則、およびアクション イベント ハンドラーで構成されたレンダラー インスタンスを作成します。
  3. アプリに対して自動的にスタイル設定されるネイティブ UI にカードをレンダリングします。

アダプティブ カードの SDK

プラットフォーム インストール ビルド Docs 状態
JavaScript npm インストール ソース Docs ビルドの状態
.NET WPF Nuget インストール ソース Docs ビルドの状態
.NET HTML Nuget インストール ソース Docs ビルドの状態
Windows UWP Nuget インストール ソース Docs ビルドの状態
WinUI 3 Nuget インストール ソース Docs ビルドの状態
Android Maven Central ソース Docs ビルドの状態
iOS CocoaPods ソース Docs ビルドの状態

レンダラーのインスタンスを作成する

次の手順では、AdaptiveCardRenderer のインスタンスを作成します。

アクション イベントをフックする

既定では、アクションはカード上にボタンとしてレンダリングされますが、期待通りに動作するかどうかはアプリ次第です。 各 SDK には、処理する必要のある OnAction イベントに相当するものがあります。

  • Action.OpenUrl - 指定された url を開きます。
  • Action.Submit - 送信の結果を取得し、ソースに送信します。 カードのソースに送信する方法は、自分で完全に決定できます。
  • Action.ShowCard - ダイアログを呼び出し、そのダイアログにサブカードをレンダリングします。 これを処理する必要があるのは、ShowCardActionMode が popup に設定されている場合のみであることにご注意ください。

カードをレンダリングする

カードのペイロードを取得したら、レンダラーを呼び出してカードで渡すだけですみます。 カードのコンテンツで構成されるネイティブ UI オブジェクトに戻ります。 その後は、この UI をアプリの任意の場所に配置するだけです。

カスタマイズ

レンダリングされる対象をカスタマイズするには、いくつかの方法があります。

HostConfig

HostConfig は、アプリ内のカードの基本的なスタイル設定と動作を制御する、共有のクラスプラットフォーム構成オブジェクトです。 これにより、フォント サイズ、要素間の間隔、色、サポートされるアクションの数などを定義します。

ネイティブ プラットフォームのスタイル設定

ほとんどの UI フレームワークでは、ネイティブ UI フレームワークのスタイル設定を使用して、レンダリングされたカードのスタイルを設定できます。 たとえば、HTML では HTML の CSS クラスを指定でき、XAML では出力を細かく制御するためにカスタムの ResourceDictionary を渡すことができます。

要素ごとにレンダリングをカスタマイズする

各 SDK では、任意の要素のレンダリングをオーバーライドすることや、定義するまったく新しい要素のサポートを追加することもできます。 たとえば、Input.Date レンダラーの残りの出力を保持したまま、独自のカスタム コントロールを生成するように、このレンダラーを変更できます。 また、定義するカスタムの Rating 要素に対するサポートを追加できます。