次の方法で共有

アダプティブ カードの制御

  • [アーティクル]

アダプティブ カードは、プラットフォームにとらわれず、リッチでインタラクティブなカードのようなインターフェイスを作成することができ、Microsoft Teams、Outlook、Copilot Studio チャットボット、その他のチャットや web アプリケーションなど、さまざまなアプリケーションに組み込むことができます。 アダプティブ カードの主な利点は、開発者がカードを一度デザインすれば、複数のプラットフォームで、それぞれのレイアウトを調整することなく使用できることです。 オープンなカード交換フォーマットにより、開発者はコンテンツをシンプルな JavaScript Object Notation(JSON) オブジェクトとして記述できます。 そのため、カードの構造や動的な操作も簡単です。

財務と運用アプリケーション用の Adaptive Cards コントロールにより、開発者はアプリケーションページで Adaptive Cards をネイティブにレンダリングできます。 アダプティブ カードのサイトには、独自の Adaptive Cards を構築するために使用できるドキュメントやサンプル、デザイナーがあります。

財務と運用アプリの「顧客」ページで顧客プロファイルと分析情報を表示するアダプティブ カードのスクリーンショット。

アダプティブ カードの使用

財務と運用アプリのページでアダプティブ カードを使用するには、以下の手順に従ってください。

  1. アダプティブ カードに入力するデータ プロパティのデータ コントラクトを定義します。
  2. アダプティブ カードのテンプレートを構成して、カードのレイアウトとフォーマットを定義します。
  3. アダプティブカードのコントロールをページに追加します。
  4. カードに入力するデータを定義します。

アダプティブ カードのデータ プロパティの定義

まず、アダプティブ カードに入力するデータ プロパティを定義します。 AdaptiveCardData クラスを継承したデータ コントラクトとして新しいクラスを作成し、プロパティを定義します。 次に、クラスの各プロパティにアクセサ メソッドを追加します。

次の例は、プロファイルと顧客レコードに関する分析情報を表示するアダプティブ カードのプロパティを含むクラスを示します。

[DataContract]
public class AdaptiveCardCustomerData extends AdaptiveCardData
{
    private str custName = "";
    private str profileImage = "";
    private str createdUtc = "2017-02-14T06:08:39Z";
    private str custDescription = "";
    private str custInsightsTitle = "";
    private str custInsights = "";

    [DataMember("custName")]
    public str custName(str _custName = custName)
    {
        custName = _custName;
        return custName;
    }

    [DataMember("profileImage")]
    public str profileImage(str _profileImage = profileImage)
    {
        profileImage = _profileImage;
        return profileImage;
    }

    [DataMember("createdUtc")]
    public str createdUtc(str _createdUtc = createdUtc)
    {
        createdUtc = _createdUtc;
        return createdUtc;
    }

    [DataMember("custDescription")]
    public str custDescription(str _custDescription = custDescription)
    {
        custDescription = _custDescription;
        return custDescription;
    }

    [DataMember("custInsightsTitle")]
    public str custInsightsTitle(str _custInsightsTitle = custInsightsTitle)
    {
        custInsightsTitle = _custInsightsTitle;
        return custInsightsTitle;
    }

    [DataMember("custInsights")]
    public str custInsights(str _custInsights = custInsights)
    {
        custInsights = _custInsights;
        return custInsights;
    }
}

アダプティブ カード テンプレートを構成する

アダプティブ カードに入力するプロパティを定義したら、アダプティブ カードのテンプレートを構成して、カード上のフィールドのレイアウトを制御します。 テンプレートは、アダプティブ カード コントロール上のデータのレイアウトとフォーマットを定義します。

アダプティブ カードのフィールドのレイアウトを定義するには、以下の手順に従います。

  1. AdaptiveCardTemplate クラスを拡張するクラスを作成します。

  2. クラスで設定されたプロパティを返すアクセサ メソッドを持つデータ コントラクトとしてクラスを定義します。

  3. type プロパティには、テンプレート タイプの識別子として使用される値を指定します。

  4. template プロパティには、アダプティブ カードのレイアウトとフォーマットを定義する JSON オブジェクトの文字列を指定します。

    ヒント

    アダプティブ カードのテンプレートの JSON の作成にヘルプが必要な場合は、アダプティブ カード デザイナーなどのツールを使用できます。

  5. プロジェクトを構築して、財務と運用アプリのページでテンプレートを使用できるようにします。

次の例は、アダプティブ カード テンプレート用のクラスを示します。 このクラスには、カードの内容を更新するアクション、定義されたカード要素をコピーするアクション、サムアップやサムダウン投票によるフィードバックを提供するアクションが含まれます。

[DataContract]
public class AdaptiveCardCustomerTemplate extends AdaptiveCardTemplate
{
    List dataToCopy;

    public void new()
    {
        super();
        this.type("CustomerCard");
        this.template(strFmt('{"type":"AdaptiveCard","$schema":"https://adaptivecards.io/schemas/adaptive-card.json","version":"1.5","id":"CustomerCard","body":[{"type": "ColumnSet", "columns": [{"type": "Column", "items": [{"type": "Image", "style": "Person", "url": "${profileImage}", "altText": "${custName}", "size": "Small"}], "width": "auto"},{"type": "Column", "items": [{"type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": "${custName}", "wrap": true}, {"type": "TextBlock", "spacing": "None", "text": "Customer since {{DATE(${createdUtc},SHORT)}}", "isSubtle": true, "wrap": true}], "width": "stretch"},{"type":"Column","width":"auto","items":[{"type":"ActionSet","id":"headingActions","actions":[{"type":"Action.Execute","id":"RefreshCard","title":"%1","mode":"secondary","iconUrl":"icon:ArrowClockwise"}]}]}]},{"type":"TextBlock","text":"${custDescription}","wrap":true,"spacing":"Medium"},{"type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": "${custInsightsTitle}", "wrap":true, "Spacing": "Medium"}, {"type": "TextBlock", "text": "${custInsights}", "wrap": true}]}',
            "@AdaptiveCardControl:Refresh"));
    }
}

アダプティブ カードのコントロールをページに追加する

財務と運用アプリのページ上の必要な場所にアダプティブ カード コントロールを追加するには、以下の手順に従います。

  1. Visual Studio の、財務と運用アプリの開発環境のページのデザインで、アダプティブ カードを置きたいノードを見つけます。 ノードを選択したまま (または右クリック)、新規>アダプティブ カード を選択します。
  2. コントロールのプロパティで、Name プロパティに新しいカードの名前を指定します。
  3. Template class プロパティで、先ほど作成したテンプレート クラスを選択します。

アダプティブ カードのデータ プロパティの入力

アダプティブ カード コントロールが目的のページに追加された後、カードのテンプレートにプロパティを入力するデータを定義することができます。

アダプティブ カードのデータ プロパティを入力するには、以下の手順に従います。

  1. アダプティブ カードを追加したページのコードを表示します。
  2. データ クラスのインスタンスを作成し、データ コントラクトのプロパティを入力します。
  3. テンプレートに追加するアクションを定義するクラスを作成します。

次の例は、先に作成したテンプレートに入力するプロパティとアクションの定義を示しています。

[Form]
public class MyCustomerInsightsForm extends FormRun
{
    AdaptiveCardCustomerData currentData;

    public void run()
    {
        super();

        if (SysUserInfo::find().Density == SysUserInfoDensity::Density21)
        {
            CustomerProfile.widthValue(420);
            CustomerProfile.heightValue(190);
        }

        currentData = new AdaptiveCardCustomerData();
        currentData.custName('Contoso Electronics');
        currentData.profileImage('https://media.licdn.com/dms/image/C560BAQFJq1MdKASLWA/company-logo_200_200/0/1591822700485?e=2147483647&v=beta&t=BrJUkBS5fE2EO3x5XsiiakRIDzN5GXqzPV6U1oEHOc8');
        currentData.createdUtc('2017-02-14T06:08:39Z');
        currentData.custDescription('Contoso Electronics is a mid-sized IT service provider specializing in network infrastructure, cybersecurity, and cloud migration for small-to-medium businesses.');
        currentData.custInsightsTitle("Customer Insights");
        currentData.custInsights('- Needs streamlined tools for remote network monitoring and incident response.\n- Anticipating 20% growth with plans for new hires in cybersecurity and cloud engineering\n- Current outstanding balance: $35,000\n- Payment history: Generally prompt but had delayed payments twice in the past year due to cash flow adjustments during expansion phases.');

        CustomerProfile.cardData(currentData);
    }

    [Control("Custom")]
    class CustomerProfile
    {
        public void executeAction(str actionId, str actionPayload)
        {
            super(actionId, actionPayload);

            if (actionId == "RefreshCard")
            {
                currentData.custName('Contoso Electronics');
                currentData.profileImage('https://media.licdn.com/dms/image/C560BAQFJq1MdKASLWA/company-logo_200_200/0/1591822700485?e=2147483647&v=beta&t=BrJUkBS5fE2EO3x5XsiiakRIDzN5GXqzPV6U1oEHOc8');
                currentData.createdUtc('2017-02-14T06:08:39Z');
                currentData.custDescription('Contoso Electronics is a mid-sized IT service provider specializing in network infrastructure, cybersecurity, and cloud migration for small-to-medium businesses.');
                currentData.custInsightsTitle('Customer Insights');
                currentData.custInsights('- Needs streamlined tools for remote network monitoring and incident response.\n- Anticipating 20% growth with plans for new hires in cybersecurity and cloud engineering\n- Current outstanding balance: $35,000\n- Payment history: Generally prompt but had delayed payments twice in the past year due to cash flow adjustments during expansion phases.');
                CustomerProfile.cardData(currentData);
            }
        }
    }
}