この記事は「Office 365 Advent Calendar 2020」に参加しています。
Microsoft Teams のカスタム アプリで個人用タブを作成したときに、ページの上部にタブが表示されます。
しかしユーザー体験としては全画面で表示してほしい場合があります。これが Microsoft Teams マニフェストの 1.7 から実現できるようになりました。
スキーマとしては isFullScreen というプロパティが追加されています。
yo teams の場合は 2.16.0 以降からプロジェクト作成時に追加の質問がされるようになっています。
Would you like personal apps to be rendered without a tab header-bar?
2.16.0 以前のバージョンで作成している場合は手動でスキーマのバージョンを 1.7 以降に上げる必要があります。
実際に isFullScreen を true にしてみたところ。かなりいい感じに表示されていますね！
みんな大好き SharePoint の 5,000 件問題ですが、いつも結局のところを忘れてしまうので、備忘録として整理しておきます。
先にこちらの記事を見ておくといろいろ参考になります。
SharePoint に連番と色とサイズの列を持つ簡単なリストを作成します。色は「白」「黒」の 2 種類、サイズは「小」「中」「大」の 3 種類の値が入ります。
アイテム数としては 12,500 件を登録しました。よって、色でフィルターした場合は 6,250 件、サイズでフィルターした場合は 4,166 件が取得できることになります。
色とサイズの列にインデックスがついています。
Postman を使って API を呼び出します。
まずは何もフィルターしない場合です。フィルターがない場合は ID 順に最初の 100 件が取得されます。件数は $top の指定で変更することが可能ですが、5,000 を超える数を指定するとエラーになります。
フィルターにインデックスされていない列を指定した場合はエラーになります。これは内部的にフィルター操作によって 5,000 件を超えるデータを操作しようとするためです。このため、フィルターをする列にはインデックスを指定することが必須になります。
インデックス化されているサイズをフィルターとして指定してみます。検索が成功していることがわかります。
しかし色でフィルターするとエラーになってしまいます。これはフィルターの結果の件数が 5,000 件を超えているためです。つまり、何でもインデックスすればよいというわけではなく、データが分散されることが予想される列をインデックスの対象として選択するべきであることを示しています。
複数条件を指定したときは、結果は 5,000 件以下になるはずですが、これはエラーになります。これはまず色でフィルターされ、その結果に対してサイズのフィルターが処理されるためです。最初のフィルターの結果が 5,000 件を超えるとエラーが発生します。
条件の順番を変更してみると成功することからも動作が理解できると思います。複数条件を指定する際は、できるだけ絞り込みが可能な列を先に指定することでパフォーマンスの改善にも繋がります。
以上の検証結果をまとめてみます。
「なぜエラーになるのか」の仕組みさえ覚えておけば 5,000 件問題は決して難しくありません。動作を理解しうまく設計してあげることが肝心です。
親子関係のあるような複雑なデータを編集する場合は、できればモデル駆動型アプリを使っていただくのが正解だとは思うのですが、いろいろな都合により（主にライセンスの関係で）Microsoft Dataverse を使うことができないという場合もあるでしょう。そこで SharePoint リストを使ったキャンバス アプリで親子関係を持つデータをひとつの画面で編集するアプリを作ってみたいと思います。今回は見積書を作成するサンプル アプリを作成します。
SharePoint の任意のサイトに以下の 2 つのリストを作成します。
| 表示名 | 内部名 | 種類 |
|---|---|---|
| 見積番号 | Title | １行テキスト |
| 見積日 | QuotationDate | 日付と時刻 |
| 会社名 | CompanyName | 1 行テキスト |
| 納期 | Delivery | 1 行テキスト |
| 有効期限 | Expiry | 1 行テキスト |
| 支払条件 | PaymentTerm | 1 行テキスト |
| 表示名 | 内部名 | 種類 |
|---|---|---|
| 見積書 ID | QuotationId | 数値 |
| 連番 | Index | 数値 |
| 摘要 | Title | 1 行テキスト |
| 数量 | Quantity | 数値 |
| 単価 | UnitPrice | 数値 |
| 金額 | Amount | 集計値 |
注意点として、親子関係を定義するのに、参照列を使うのではなくて、ID の値を格納する列を作るようにしています。参照列は Power Apps では委任の関係から逆に扱いづらくなるため、このような方式を採っています。
一覧画面はあまり本題ではないので詳細は省略します。見積書リストのアイテムの一覧をギャラリーで表示します。
上部にフォームで見積書リストのアイテム、下部にギャラリーで見積書明細のリストのアイテムの一覧を表示します。
スクリーンの OnVisible プロパティでは QuotationDetails と QuotationDetailsIndexed という 2 つのコレクションを初期化します。QuotationDetails はギャラリーにバインドされるデータで、QuotationDetailsIndexed は保存時に連番を付けるために使用します。
NewForm(CreateForm); ClearCollect(QuotationDetails, Filter(見積書明細, '見積書 ID' = 0)); ClearCollect(QuotationDetailsIndexed, Filter(見積書明細, '見積書 ID' = 0))
ギャラリーの Items プロパティにはアイテムが連番で並ぶように以下の数式を設定します。
SortByColumns(Filter(QuotationDetails, 連番 > 0), "Index", Ascending)
ギャラリーのテキスト入力の OnChange プロパティでは入力したテキストがコレクションに反映されるように Patch を呼び出すようにします。
Patch(QuotationDetails, ThisItem, { 摘要: Self.Text })保存ボタンの OnSelect プロパティでは、まず親の見積書リストのアイテムを SubmitForm で登録し、次に子の見積書明細リストのアイテムを ForAll と Patch を使って登録していきます。ギャラリーは項目が追加されたり削除されたりして連番が続きになっていない可能性があるため、いったん QuotationDetails のコレクションを QuotationDetailsIndexed にコピーする形で連番を振り直しています。
If(
SubmitForm(CreateForm),
Clear(QuotationDetailsIndexed);
ForAll(
QuotationDetails,
Collect(
QuotationDetailsIndexed,
{
ID: ThisRecord.ID,
'見積書 ID': CreateForm.LastSubmit.ID,
連番: CountRows(QuotationDetailsIndexed) + 1,
摘要: ThisRecord.摘要,
数量: ThisRecord.数量,
単価: ThisRecord.単価
}
)
);
ForAll(
QuotationDetailsIndexed,
Patch(
見積書明細,
ThisRecord
);
Navigate(
MainScreen,
ScreenTransition.None
)
)
)
基本的には作成画面とそれほど変わりません。
スクリーンの OnVisible プロパティではコレクションを初期化しますが、見積書 ID でアイテムを取ってくるようにします。
EditForm(UpdateForm); ClearCollect(QuotationDetails, Filter(見積書明細, '見積書 ID' = MainGallery.Selected.ID)); ClearCollect(QuotationDetailsIndexed, Filter(見積書明細, '見積書 ID' = 0))
ギャラリーから項目を削除するときに、新規に追加したものでよければそのままコレクションから削除してしまえばいいのですが、既存のアイテムを削除するときはリストから削除しなければならないので、そのようなアイテムはいったん連番を -1 としておき、保存時にまとめて削除するようにします。削除ボタンの OnSelect プロパティは以下のようになります。
If(ThisItem.ID = 0, Remove(QuotationDetails, ThisItem), Patch(QuotationDetails, ThisItem, { 連番: -1 }))保存ボタンの OnSelect プロパティでは、作成画面とほぼ同じですが、削除とマークされたアイテムを削除するロジックが追加されます。
If(
SubmitForm(UpdateForm),
Clear(QuotationDetailsIndexed);
ForAll(
Filter(
QuotationDetails,
連番 < 0
),
Remove(
見積書明細,
ThisRecord
)
);
ForAll(
Filter(
QuotationDetails,
連番 > 0
),
Collect(
QuotationDetailsIndexed,
{
ID: ThisRecord.ID,
'見積書 ID': UpdateForm.LastSubmit.ID,
連番: CountRows(QuotationDetailsIndexed) + 1,
摘要: ThisRecord.摘要,
数量: ThisRecord.数量,
単価: ThisRecord.単価
}
)
);
ForAll(
QuotationDetailsIndexed,
Patch(
見積書明細,
ThisRecord
);
Navigate(
MainScreen,
ScreenTransition.None
)
)
)削除ボタンの OnSelect プロパティでは親子関係のアイテムをすべて削除するようにします。
RemoveIf(見積書明細, '見積書 ID' = MainGallery.Selected.ID); Remove(見積書, MainGallery.Selected); Navigate(MainScreen, ScreenTransition.None)
実行してみます。作成画面で項目を入力して保存をクリックします。
見積書リストにアイテムが追加されます。
同時に見積書明細リストにもアイテムが複数追加されているのがわかります。
明細を編集してみます。マウスを削除して LAN ケーブルを追加します。
見積書明細リストに編集が反映されています。ちゃんと連番もきれいに振られていますね。
SharePoint の親子関係の表現には参照列を使いたくなりますが、参照列は ID でのフィルターが委任制約に引っかかるため、使わないのが正解です。件数が増えてきたときのために適切にインデックスを貼っておくとよいと思います。
2020/11/09 および 2020/11/10 に開催された Global Microsoft 365 Developer Bootcamp 2020 Tokyo で Microsoft Teams 開発のハンズオン担当として登壇しました。
今回ははじめてのオンラインでのハンズオン イベントということで不慣れな点も多々ありましたが最後までやりきれてよかったです。
スライドは Speaker Deck にアップロードしています。
今回のハンズオンについては Microsoft Learn のモジュールを使っていますのでそちらを参照いただくのがいいかと思います。
ハンズオン中に「Teams タブのデバックはどのようにやればいいのか」という質問をいただきました。こちらでも試してみたのですが、Visual Studio Code の Debugger for Chrome 拡張を使ってブレーク ポイントに止めることはできたのですが、ステップ インがうまく動かなかったので、ちょっと難しいかもしれません。Visual Studio Code に詳しい人だったらなんとかなるのかなあと思ったりしています。
前回の記事では Param("hostClientType") を使って Microsoft Teams の実行されている環境を取得しました。
Microsoft Teams から Power Apps には他にも情報が取得できるので、サンプルとして、現在表示されているチームとチャネルの情報を取得して、メッセージを投稿してみたいと思います。
画面イメージは以下のような感じです。Param("groupId") と Param("channelId") でチーム ID とチャネル ID をそれぞれ取得できます。メッセージを入力して [Post] をクリックすると Power Automate の呼び出しを行います。
Power Automate ではシンプルに引数を受け取って Teams のメッセージを投稿するアクションを実行します。
試しに実行してみます。適当にメッセージを入れて [Post] をクリックします。
メッセージが投稿されているのがわかります。
Microsoft Teams と Power Apps の相互作用ができるようになると Power Apps の作成はもっと可能性が見えてくると思います。ぜひいろいろ試してみていただければと思います。