アダプティブカードを使用するように調査通知を更新する

[アーティクル]
03/09/2022

この記事では、検査アプリからの検査通知を、HTML ベースのメッセージから Microsoft Teams のアダプティブカードに変更します。

アダプティブカードは、通知をよりインタラクティブにします。チャネルへの投稿は素晴らしいですが、それらは一方向のコミュニケーションです。アダプティブカードは、よりインタラクティブな通知を提供し、メッセージのカスタマイズを可能にし、アプリにハイパーリンクする機能、またはカードからアプリデータを更新する機能を提供します。

このビデオでは、検査通知を更新してアダプティブカードを使用する方法について説明しています:

前提条件

始める前に、Teams でアプリを編集するために必要な権限で検査サンプルアプリをインストールして構成しておく必要があります。

Power Automate フローを作成して、アダプティブカードを生成する

Teams の Power Apps 個人用アプリを始めて、アプリを検索および検査します。より使いやすい方法としては、Teams で Power Apps ロゴをクリックし、ポップアウトアプリ を選択して、Power Apps Studio をその独自のウィンドウで連携させます。

検査アプリを選択して Teams で Power Apps Studio を開き、アプリの編集を開始します。
トップメニューバーで、設定オプションの右側の縦の省略記号を選択します。これにより 3 つのオプション: Power Automate、コレクション、変数が表示されます。
画面の右上で Power Automate を選択して、データ サイドバーを開きます。ここで利用可能なフローが表示されます。
新規フローの作成 を選択します。これによって、新しいブラウザーウィンドウで Power Automate フローが起動します続行する前に、変更しようとしているアプリを含むチームにとって正しい環境にいることを確認してください。
左上の領域で、フローの名前が無題となっていることがわかります。そのテキストを選択して、名前を Teams への従業員アイデア投稿アダプティブカード に変更します。
Power Apps トリガーを追加します。これによって、Power Apps からのフローをトリガーでき、Power Apps から Power Automate へパスするための値を追加します。
次に、4 つの 初期化変数 アクションを追加します。これらのアクションは、Power Apps からの情報を保存するために使用され、レビュー検査アプリへのリンクを保存します。各アクションの名前を次のように変更します。
- 変数の初期化: カードタイル
- 変数の初期化: 場所
- 変数の初期化: 作業タイプ
- 変数の初期化: 検査リンクの確認
それぞれの "タイプ" 値を "文字列" に設定し、それぞれに次の名前を追加します: varCardTitle、varLocation、varWorkType、varReviewInspectionLink。
カードタイトル、場所、作業の種類のアクションの場合、[値] フィールド領域を選択して動的コンテンツメニューを選択します。
Power Apps で質問する を選択します。このアクションにより、Power Apps トリガーで変数が作成され、アプリから Power Automate にデータを渡すことを許可します。
検査リンクの確認アクションには、アプリがあるタブへのリンクを使用します。 Teams チャネルで Review Inspections アプリを開き、右上隅にあるボタンを選択して、アプリを独自のウィンドウにポップアウトします。そこから、直接 URL をアプリにコピーできます。 Power Automate スタジオに戻ります。 [検査リンクの確認] アクションの [値] フィールド領域を右クリックして、リンクを貼り付けます。

ヒント

Microsoft Teams でディープリンクの作成について学ぶには、ディープリンクを作成するをご覧ください。
チャットまたはチャネルでアダプティブカードを投稿 アクションを追加します。 投稿者 の値を ユーザー、その 投稿する場所 の値を チャネル に設定します。
Team フィールドと チャネル フィールドで、アダプティブカードを投稿するチームとチャンネルを選択します。

アダプティブカードの JSON を生成するには、https://adaptivecards.io にアクセスしてください。 アダプティブカード フィールドで、以下をコピーして貼り付けます。

{
    "type": "AdaptiveCard",
    "body": [
{
    "type": "TextBlock",
    "size": "large",
    "weight": "Bolder",
    "text": "@{variables('varCardTitle')}",
    "wrap": true
},
{
    "type": "TextBlock",
    "text": "A new @{variables('varWorkType')} has been submitted!",
    "wrap": true
},
{
    "type": "TextBlock",
    "text": "For the location: @{variables('varLocation')}",
    "wrap": true
}
],
    "actions": [
{
    "type": "Action.OpenUrl",
    "title": "View @{variables('varWorkType')}",
    "url": "@{variables('varReviewInspectionsLink')}"
}
],
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2"
}

件名フィールドで、以下のコードをコピーして貼り付けます。
```
New @{variables('varWorkType')} submitted
```
これは、アダプティブカードの特性を設定し、アダプティブカードで Power Apps からの変数を使用します。
フローを保存してテストし、正しく機能することを確認します。フローをテストのサイドバーから手動で選択すると、カードタイトル、場所、作業タイプの変数を入力できます。

フローを検査アプリに追加する

フローが正しく機能していることを確認したら、それを検査アプリに追加できます。

検査アプリが編集されていた Power Apps Studio に戻ります。
画面の左側にあるツリービューで、レビュー画面を選択します。
ツリービューで検査の提出ボタン btnContinueSubmitInspection を選択します。このボタンで作成した Power Automate フローを追加します。
まず、ボタンの OnSelect プロパティに現在あるコードをコピーします。 Power Automate フローを Power Apps のコントロールに追加するというひとつの問題は、コントロール上の既存のコードがすべて削除されます。この問題を回避するには、コピーしたコードをメモ帳などのテキストエディターに貼り付け、完了したら編集して OnSelect プロパティに貼り付けます。コードを貼り付けた後、すべてのコードが追加されたことを確認します。
ボタンを選択したまま、上部の設定の右側にある縦の省略記号を選択します。 Power Automate を選択し、これにより、データ サイドバーを表示します。
これで、Teams への検査アダプティブカード フローが [利用可能なフロー] セクションに表示されます。省略記号ボタンを選択して探します。

ここで、貼り付けたコードを編集する必要があります。以下のように、数式の次の部分を置き換えます。

式からセクションを削除します:

MicrosoftTeams.PostMessageToChannelV3(
                gblPlannerGroupId,
                gblRecordSettings.'Parameter (Notification Channel Id)',// gblParamChannelId,
                {
                    content: Concatenate(
                        With(
                            {
                                varDefault: "A new " & Lower(gblWorkType) & " has been submitted!",
                                varOOBTextId: "_translateCommon__" & gblWorkType & "Submitted"
                            },
                            With(
                                {
                                    varLocalizedText: LookUp(
                                        colLocalization,
                                        OOBTextID = varOOBTextId,
                                        LocalizedText
                                    )
                                },
                                Coalesce(
                                    varLocalizedText,
                                    varDefault
                                )
                            )
                        ),
                //"A new " & Lower(gblWorkType) & " has been submitted!",
                        "<br></br>",
                        "<b>" & With(
                            {
                                varDefault: "For the Location:",
                                varOOBTextId: "_translateCommon__InspectionForLocation"
                            },
                            With(
                                {
                                    varLocalizedText: LookUp(
                                        colLocalization,
                                        OOBTextID = varOOBTextId,
                                        LocalizedText
                                    )
                                },
                                Coalesce(
                                    varLocalizedText,
                                    varDefault
                                )
                            )
                        ) & " " & "</b>",
                //"<b>For the Location: </b>",
                        gblLastInspection.Location.Name
                    ),
                    contentType: "html"
                },
                {subject: gblLastInspection.Name}
            )

式にセクションを追加します:

InspectionAdaptiveCardToTeams.Run(gblLastInspection.Name,
gblLastInspection.Location.Name, Lower(gblWorkType))

更新された検査式を送信します。

この数式には、追加したフローへの参照と Power Automate へ渡す変数が含まれています。

編集したテキスト全体をコピーして、[検査の送信] ボタンの OnSelect プロパティに貼り付けます。ボタンにエラーがないことを確認します。
ツリービューからウェルカム画面を選択し、アプリをプレビューし、テスト検査を入力して、フローがフローで定義したチームチャネルにアダプティブカードを投稿していることを確認します。

アダプティブカードを使用するように調査通知を更新する

前提条件

Power Automate フローを作成して、アダプティブカードを生成する

フローを検査アプリに追加する

関連項目

フィードバック

アダプティブ カードを使用するように調査通知を更新する

前提条件

Power Automate フローを作成して、アダプティブカードを生成する

フローを検査アプリに追加する

関連項目

フィードバック

アダプティブカードを使用するように調査通知を更新する