以下のふーさんに対するおいしみさんのリプを見て、Power Apps単体でTeamsに画像を含むテキストの投稿を実際にやってみた記事です。
普通にリッチテキスト内に画像を貼り付けて投稿してもTeams上では表示できない
リッチテキストエディタ(RichTextEditor1)とボタンを配置し、ボタンのOnSelectを以下の数式に設定します。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/63f7bc87d4328bbbe8fe4bb6049ac5eb.png)
MicrosoftTeams.PostMessageToConversation(
"User",
"Channel",
ParseJSON(JSON({
recipient:
{
groupId: "groupId",
channelId: "channelId"
},
messageBody: RichTextEditor1.HtmlText,
subject: "件名"
}
))
)
普通にmessageBodyにリッチテキストエディタの出力を設定しただけでは、画像がうまく表示されません。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/6f18a85c7ad01e69751284d213e459a8.png)
Hostedcontentsに特定の形式のJSONを入力する
おいしみさんが紹介しているHiroさんの記事によると、Hostedcontentsに特定の形式のJSONを入力すればPower AppsやPower AutomateからTeamsに画像つきの投稿ができるそうです。
[Tips] Power Automate から Teams に投稿するメッセージに画像を埋め込む #PowerAutomate - Qiita
Send chatMessage in a channel or a chat - Microsoft Graph v1.0 | Microsoft Learn
ラベルでRichTextEditor1.HtmlTextを確認すると画像の拡張子やbase64の情報が含まれているので、これらを抜き出して置換&Hostedcontentsに入力すれば良さそうです。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/94b51ef5e184f01445d83d28e6e775b9.jpg)
作り方
ボタンに以下の数式を設定します。
With(
{Html:MatchAll(RichTextEditor1.HtmlText, "<img.+?src=""data:(?<contentType>.+?);base64,(?<contentBytes>.+?)"" />")},
ClearCollect(
ColPostText,
{
recipient:
{
groupId: "groupId",
channelId: "channelId"
},
messageBody: RichTextEditor1.HtmlText,
subject: "件名",
hostedContents:
ShowColumns(
AddColumns(
Html,
@microsoft.graph.temporaryId,
Text(StartMatch)
),
contentBytes,contentType,@microsoft.graph.temporaryId
)
}
);
ForAll(
Html As html,
UpdateIf(
ColPostText, true,
{messageBody:Substitute(messageBody, html.FullMatch, "<img src=""../hostedContents/" & html.StartMatch & "/$value"">")}
)
);
MicrosoftTeams.PostMessageToConversation(
"User",
"Channel",
ParseJSON(JSON(First(ColPostText)))
)
)
Power Apps側で入力した画像とテキストをそのままTeamsに投稿できました。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/00fa42eb1e622491fca7f3decd90bb55.png)
以降で詳細なコードの説明をします。
With+MatchAll関数で抽出対象を変数に格納
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/af3e8b0f7610b79298f26edebcbe64f6.png)
MatchAll関数で正規表現によって抽出部分を検索し、その結果をWith関数でHtmlに格納しておきます。
コレクションにコネクタへの入力値を設定する
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/c4b6285898f64e748b4df3ce11ecee92.png)
次にForAllで置換処理を行う都合上、変数ではなく一行のコレクションに入力値を設定します。
recipientには、投稿先のグループIDとチャネルIDを設定します。
URLやこちらの方法を参考にPower AutomateのコードのプレビューからIDを取得・入力してください。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/791a22827ba4bf30c58fe0d646e9d4c8.png)
messageBodyはリッチテキストエディタの出力、subjectには件名に設定するテキストを設定します。
hostedContentsはWith関数で設定したHtmlのStartMatchをtemporaryIdにするためにAddColumns関数で型変換と列名変更、その後ShowColumns関数で列をスキーマに合わせます。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/94dce55f2eb106d935898e70c160c2ab.png)
messageBodyを置換処理
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/0658e090e12afe026928a2129ef8b101-1024x156.png)
messageBodyに対してSubstitute関数で置換処理を行います。
Htmlには画像の分だけレコードが存在するので、これをForAll関数で繰り返し処理すれば対象の文字列をすべて置換できます。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/a713cdb82c9a67f5f135fca9c4aac5e5.png)
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/071b39b5575350ae527768fab48fc295.png)
Teamsに投稿
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/fa24750f68cb07f1d5dcd273cf5c4334.png)
TeamsコネクタのPostMessageToConversationを用いてTeamsに投稿します。
ParseJSON、JSON関数でUntypedObject型への変換が必要です。
![](https://powerplatformnikki.com/wp-content/uploads/2024/02/1794076a2ac8bb7f9fff830822288b7d.png)
コメント