今日もローコードで業務改善をしたい

Power AutomateやPower Appsなど、Power Platformに関して学んだことを書いています。

Power AppsからTeamsのグループチャットを起動するアプリを作ってみる

はじめに

初めてのPower Apps記事になります!

Power Appsから特定のWebページを起動するには、Launch関数を用いることでできます。

今回はそれを利用して、Power AppsからTeamsのグループチャットを起動する方法をご紹介します。


下図のような、担当者を検索してワンタップでTeamsチャット(担当者が複数人の場合はグループチャット)を起動するアプリを作っていきます。

用意するもの

SharePoint Online リスト

任意のサイトで新規のリストを作成します。
今回は「担当者」というリスト名にし、ダミーデータをいくつか入れてみました。
列は既定のタイトル列と、Users列という「ユーザーまたはグループ列」を追加しています。

Users列は「複数選択を許可」をオンにすることで、複数名登録することができます。

SharePoint Online リストの設定は、これで以上です。

アプリの作成方法

1.SharePoint Onlineリストの接続

キャンバスアプリを一から作成します。
今回は「担当者検索」というアプリ名にし、形式は「電話」にしました。

SharePoint Online リストと接続をするために「+データの追加」をします。

「データソースの選択」より「SharePoint」と入力し、「SharePoint」を選択します。

該当する「SharePoint」を選択します。

リストを作成したサイトを選択します。

事前に作成したリストを選択し、「接続」をクリックします。

選択したリストが接続されていれば、完了です。

2.ギャラリーの追加

「挿入」>「ギャラリー」>「縦」を選択してギャラリーを追加します。

右メニューの「レイアウト」から「タイトル、サブタイトル、本文」にレイアウトを変更します。

データソースの選択で事前に接続したSharePoint Onlineリストを選択します。

リストの接続に成功すると、リストの情報がギャラリーに表示されます。
「NextArrow1」と「Body1」コントロールは不要なので、削除します。

ギャラリーのサイズをお好みで変更してください。

3.コントロール名の整理

コントロール名が「Gallery1」や「Title1」だと、後からアプリを見返したときや他の人に引き継いだ時にどこのコントロールかわかりにくくなってしまいます。

そこで、Microsoftが「Power Appsキャンバスアプリのコーディング規約とガイドライン」を公開しています。
自分のためにも人のためにも、わかりやすいコントロール名に変更しましょう!

今回は下図のようにコントロール名を変更しました。

4.ギャラリーの編集:ユーザーとグループ列を表示

いよいよアプリの要となる部分を追加していきます。

txtUsersコントロールのTextプロパティが「ThisItem.登録者.DisplayName」になっています。
ここはリストの「Users」列を表示させたいと思います。

ただ、「Users」列は複数名登録されているので、テーブル型になっています。
Textプロパティはテキスト型しか入れることができないので、「ThisItem.Users.DisplayName」とするとエラーになってしまいます。

そこで、テーブル型をテキスト型に変換するConcat関数を用います。

Concat(ThisItem.列名, DisplayName & ",")

docs.microsoft.com

ただ、上記式のままだと「User1, User2,」と最後に余分な「,」が入ってしまいます。
この余分な「,」を削除するために、LeftとLen関数の組み合わせを利用します。

Left(Concat(ThisItem.列名,DisplayName & ","),Len(Concat(ThisItem.列名,DisplayName & ",")) - 1 )

docs.microsoft.com

docs.microsoft.com


txtUsersのTextプロパティは以下の式を入れます。

Left(Concat(ThisItem.Users,DisplayName & "," ),Len(Concat(ThisItem.Users,DisplayName & "," )) - 1 )

これで無事にUsers列を表示させることができました。

5.ギャラリーの編集:Teamsのグループチャットを起動する

Teamsを起動させるためのボタンを追加していきます。

「galUsers」コントロールをクリックし、ギャラリーの鉛筆マークをクリックします。

「挿入」>「メディア」>「画像」を選択します。

画像を右に移動させます。
ついでにコントロール名も「imgTeams」と変更しました。

右メニューの「プロパティ」より、「画像」>「+画像ファイルの追加」をクリックします。
ここで私はTeamsアイコンの画像を追加しました。

Teamsの画像をクリックしたときに、Teamsのグループチャットを起動させたいので、
imgTeamsコントロールのOnSelectプロパティを設定します。

クリックしたときに指定されたユーザーとチャットを立ち上げるために、Launch関数を利用します。

Launch("https://teams.microsoft.com/l/chat/0/0", "users","ユーザーメールアドレス")

docs.microsoft.com

今回はグループチャットも起動させたいので、さきほど使ったConcat、Left、Len関数を組み合わせます。

imgTeamsコントロールのOnSelectプロパティに以下式を入れます。

Launch("https://teams.microsoft.com/l/chat/0/0","users",Left(Concat(ThisItem.Users,Email & "," ),Len(Concat(ThisItem.Users,Email & "," )) - 1 ))

以上でギャラリーの編集は、完了です。

6.検索ボックスの実装

せっかくなので、検索ボックスを付けて検索できるようにしてみましょう。

「挿入」>「入力」>「テキスト入力」をクリックします。

コントロール名を「txtSearchBox」に変更し、規定を「値なし」にします。

「galUsers」コントロールの「Items」プロパティに以下式を入れます。

Search(担当者,txtSearchBox.Text,"Title")

以上で検索ボックスの実装は、完了です。

アプリの実行

実際にアプリを実行してみましょう。

上から3つめのTeamsボタンをクリックしてみます。

Teamsが立ち上がります。

さきほど選択したLangerさんとShermanさんとのグループチャットが立ち上がりました。

アプリに戻り検索ボックスも利用してみます。
??部を検索するために「??」と入力したところ、ちゃんと??部だけが表示されるようになりました。

さいごに

Power AppsからTeamsのグループチャットを起動する方法のご紹介でした。

アプリでユーザーを検索し、ワンボタンでグループチャットを開くことができるのは結構便利だなと感じました!

今回はユーザーをテキスト表示だけにしましたが、ユーザーの画像も併せて表示できるともっと分かりやすくなるかなと思います。
ユーザーの画像表示方法についてわかりましたら、また記事を書きたいと思います。