通知をアダプティブカードに置き換えてコラボレーションを強化する

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

この記事では、従業員アイデア投稿アプリからの通知を、Teams の HTML ベースのメッセージから Teams のアダプティブカードに変更します。現在、Teams の通知はアプリ内から開始し、Teams チャネルに投稿されたメッセージとして送信されます。この Teams チャネル通知を、Power Automate フローを使用して開始されるアダプティブカード通知に置き換えます。

通知をアダプティブカードに置き換える方法については、このビデオをご覧ください:

前提条件

このレッスンを完了するには、一部の Microsoft 365 サブスクリプションで使用できる Microsoft 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 へ値を追加します。
+ 新規 手順を追加して、新しいステップの追加 > 行 ID に対して ID で行を取得アクションの選択 > [値] フィールド領域を選択して動的コンテンツメニューを表示 > Power Apps で質問する を選択します。このアクションにより、Power Apps トリガーで変数が作成され、アプリから Power Automate にデータを渡すことを許可します。
次に、2 つの 初期化変数 アクションを追加します。これらのアクションは、Power Apps からの情報を保存するために使用され、レコードに直接リンクするためにアダプティブカードで使用されるアイデアアプリへのリンクを保存します。各アクションの名前を次のように変更します。

変数の初期化 - カードタイル
- 名前 = varCardTitle
- 種類 = 文字列
変数の初期化 - キャンペーン
- 名前 = varCampaign
- 種類 = 文字列

それぞれのタイプ値を文字列に設定し、それぞれに名前を追加します: それぞれ varCardTitle、varCampaign、および varReviewIdeasLink。
カードタイトルとキャンペーンアクションの場合、[値] フィールド領域を選択して [動的コンテンツ]メニューを表示し、Power Apps で質問する を選択します。この構成により、Power Apps トリガーで変数が作成され、アプリから Power Automate にデータを渡すことを許可します。
アイデアのレビューリンクアクションには、アプリへのリンクを使用します。このリンクを見つけるには、Ideas アプリがインストールされている Teams を開き、アプリがインストールされているタブのリンクをコピーします。タブへのリンクをコピーするには、タブを開いてから右上隅にある省略記号 (...) を選択します。

URL は、次の例のようになります。

https://teams.microsoft.com/l/entity/GUID/_djb2_msteams_prefix_1434832750?context=%7B%22subEntityId%22%3Anull%2C%22channelIdGUIDthread.tacv2%22%7D&groupId=GUID&tenantId=GUID
続行するには、URL のうち、context= に続く部分をコピーし、https://www.urldecoder.org/ などの URL デコーダーを使ってテキストをデコードします。
デコードしたテキストをコピーし、Power Automate フローに戻ります。
フローに、変数を初期化するステップを新たに追加します。
- ステップの名前を変更して変数を初期化する – アイデアリンクの確認
- セット名= varReviewIdeasLink
- 種類 = 文字列を選択
- 入力値 = {上記URLからコピーしたテキストを貼り付ける}
作成アクションを含む新しいステップを追加し、入力フィールドに次のコードを貼り付けます。
```
replace(replace(replace(variables('varReviewIdeasLink'),'{','%7B'),'"','%22'),'}','%7D')
```
チャットまたはチャネルでアダプティブカードを投稿 アクションを追加します。 投稿者 の値を ユーザー、その 投稿する場所 の値を チャネル に設定します。 Team フィールドと チャネル フィールドで、アダプティブカードを投稿するチームとチャンネルを選択します。

次のサンプルコードは一例にすぎませんが、独自のカードを設計することもできます。

ヒント

アダプティブカードの詳細については、https://adaptivecards.io/ をご覧いただき、https://adaptivecards.io/designer/ のビジュアルエディターで独自のカードをデザインします。

アダプティブカード フィールドで、以下をコピーして貼り付けます。

{

"type": "AdaptiveCard",

"body": [

{

"type": "TextBlock",

"size": "large",

"weight": "Bolder",

"text": "@{variables('varCardTitle')}",

"wrap": true

},

{

"type": "TextBlock",

"text": "A new idea has been submitted!",

"wrap": true

},

{

"type": "TextBlock",

"text": "For the campaign: @{variables('varCampaign')}",

"wrap": true

}

],

"actions": [

{

"type": "Action.OpenUrl",

"title": "View @{variables('varCardTitle')}",

"url":
"https://teams.microsoft.com/l/entity/b7fad6ce-2e23-4aba-b209-859a59ca230e/_djb2_msteams_prefix_1434832750?context=@{outputs('Compose')}"

}

],

"\$schema": "http://adaptivecards.io/schemas/adaptive-card.json",

"version": "1.2"

}

件名フィールドで、以下のコードをコピーして貼り付けます。
```
New idea submitted for @{variables('varCampaign')} Campaign
```

このアクションは、アダプティブカードの特性を設定し、アダプティブカードで Power Apps からの変数を使用します。

フローを保存してテストし、正しく機能することを確認します。テストフローサイドバーから手動で選択すると、カードタイトル、キャンペーン、およびアイデアのレビューリンク変数を入力できます。

フローを Idea アプリに追加します。

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

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

ここで、貼り付けたコードを編集する必要があります。次のテキストを見つけて削除します。
```
Notify(

If(tglIdeaDetailControls_PostToTeams.Value,

If(

IsError(

MicrosoftTeams.PostMessageToChannelV3(

gblSettingTeamId,

gblSettingNotificationChannelId,

{

content: Concatenate(

"A new employee idea has been created!",

"\<br\>\<br\>",

"\<b\>Description\</b\>",

"\<br\>",

locFormRecordIdea.Description

),

contentType: "html"

},

{subject: locFormRecordIdea.Title}

)

),

"Message was not posted. You may not have access to the Team and/or Channel.
Contact the app administrator.",

NotificationType.Warning

)

)

);
```

削除されたテキストがあった場所に、次のコードを貼り付けます。

If(tglIdeaDetailControls_PostToTeams.Value,
EmployeeIdeasAdaptiveCardToTeams.Run(locFormRecordIdea.Title,gblSelectedRecordCampaign.Title,locFormRecordIdea.'Employee
Idea',locFormRecordIdea.'Employee Idea'));

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

編集したテキスト全体をコピーして、[検査の送信] ボタンの OnSelect プロパティに貼り付けます。ボタンにエラーがないことを確認します。

アダプティブカードリンクを使用して実際のレコードを開くようにアプリを更新します

次に、ハイパーリンクパラメーターを受け入れ、レコードへのディープリンクをサポートするようにアプリを更新します。

アダプティブカードには、作成されたアイデアレコードに戻るためのリンクがあります。適切なデータをロードするには、アプリの [ロード] ページにいくつかの変更を加える必要があります。

ツリービューで、読み込み画面を選択します。次に、コンテナー conLoading_HiddenHelper を選択し、その下で tmrLoadingDelay を選択します。
タイマーコントロールの OnTimerEnd プロパティを選択し、 IF condition named If(gblAppLoaded,----------) という名前の IF 条件があることに注意してください。

その IF 条件全体を次の IF 条件に置き換えます (元のチェックに加えてさらにいくつかのチェックを追加します)。

注意

このコードは、アプリがアダプティブカードから開かれた場合に備えて、特定のアイデアレコードへのディープリンクを含むように編集されています。特定のアイデアレコードに直接ディープリンクする場合は、画面が読み込まれる前に定義する必要のあるコレクション/値がいくつかあります

If(

gblAppLoaded,

If(

!IsBlank(Param("subEntityId")), //check if the parameter is blank or not, if
not, populate the relevant variables and collections to make deep linking work

Set(

gblRecordCampaignIdea,

LookUp(

'Employee Ideas',

'Employee Idea' = GUID(Param("subEntityId"))

)

);

ClearCollect(

colResponses,

Filter(

'Employee Idea Responses',

Idea.msft_employeeideaid = gblRecordCampaignIdea.msft_employeeideaid

)

);

ClearCollect(

colFiles,

Filter(

'Employee Idea Files',

'Employee Idea Files'[@Idea].'Employee Idea' = gblRecordCampaignIdea.'Employee
Idea'

)

);

Set(

gblSelectedRecordCampaign,

LookUp(

'Employee Idea Campaigns',

'Employee Idea Campaign' = gblRecordCampaignIdea.Campaign.'Employee Idea
Campaign'

)

);

ClearCollect(

colIdeas,

Filter(

'Employee Ideas',

'Employee Ideas'[@Campaign].'Employee Idea Campaign' =
gblSelectedRecordCampaign.'Employee Idea Campaign'

)

);

If( //check if the user is on a mobile device or desktop/web and redirect the
user accordingly to deep link into the specific idea

Or(

Param("hostClientType") = "android",

(Param("hostClientType") = "ios" And Parent.Width \< 800)

),

Navigate(

'Campaign Detail Screen',

ScreenTransition.None,

{

locVisibleCampaignIdea: true,

locVisibleCampaignView: false,

locCreateNewIdea: false

}

),

Navigate(

'Mobile Idea Screen',

ScreenTransition.None,

{

locVisibleCampaignIdea: true,

locVisibleCampaignView: false,

locCreateNewIdea: false

}

)

),

If( //if the parameter is blank, check if the user is on a mobile device or
desktop/web and redirect the user accordingly

Or(

Param("hostClientType") = "android",

(Param("hostClientType") = "ios" And Parent.Width \< 800),

tglAdmin_Mobile.Value// Studio Testing

),

Navigate(

'Mobile Landing Screen',

ScreenTransition.None,

{locShowSetup: false}

),

Navigate(

'Campaign Summary Screen',

ScreenTransition.None,

{

locShowModal: (gblRecordUserSettings.'Display Splash (Power Apps)?' = 'Display
Splash (Power Apps)? (Employee Ideas User Settings)'.Yes),

locShowPowerAppsPrompt: gblRecordUserSettings.'Display Splash (Power Apps)?' =
'Display Splash (Power Apps)? (Employee Ideas User Settings)'.Yes

}

)

)

)

)

このアクションは、アプリが開いた後に必要なすべてのデータを適切にロードする必要があります。アダプティブカードのレコードを選択したユーザーは、適切なアイデアに導かれます。

アイデア投稿アプリを公開する

アイデア投稿アプリに対する変更がすべて完了しました。
これで、右上の [チームに公開] ボタンを選択してアプリを公開できます。

アプリをテストする

Teams にログインして、アイデア投稿アプリがインストールされている Team に移動します。
トップのアイデア投稿タブを選択します。
アイデア投稿アプリが開きます。
キャンペーンの 1 例として、職場の安全を選択します。
[アイデアを送信] ボタンを選択します。
タイトルと説明を入力します。
リストされた質問の評価を選択します。
必要なその他の情報を追加します。
すべての詳細が入力されたら、[アイデアの送信] ボタンをクリックします。
アイデアが提出されます。
アプリがインストールされている Team に通知が送信されます。
通知でリンクを選択し、アイデアレコードが開くことを確認します。

通知をアダプティブカードに置き換えてコラボレーションを強化する

前提条件

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

フローを Idea アプリに追加します。

アダプティブカードリンクを使用して実際のレコードを開くようにアプリを更新します

アイデア投稿アプリを公開する

アプリをテストする

関連項目

フィードバック

通知をアダプティブ カードに置き換えてコラボレーションを強化する

前提条件

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

フローを Idea アプリに追加します。

アダプティブ カード リンクを使用して実際のレコードを開くようにアプリを更新します

アイデア投稿アプリを公開する

アプリをテストする

関連項目

フィードバック

通知をアダプティブカードに置き換えてコラボレーションを強化する

アダプティブカードリンクを使用して実際のレコードを開くようにアプリを更新します