SharePointリストをデータソースにしてApps表示させる方法。
一覧表示させるにはギャラリーかデータテーブルか迷いますが、単純にExcelのように見せるにはデータテーブルの方が軽く、簡単なようです。
絞込み検索機能を設けるまでの手順の備忘録。
仕上がりは図のような感じです。
SharePointリストの構成
| 表示名 | 内部列 | 型 |
|---|---|---|
| ID | ID | 数値 |
| タスクID | Title | テキスト |
| 担当者 | field_1 | １行テキスト |
| 期限 | field_2 | １行テキスト |
| 進捗状況 | field_3 | １行テキスト |
| close | close | 日付と時刻 |
| 優先度 | field_4 | １行テキスト |
| Money | Money | 数値 |
| 完了 | Complete | 数値 |
| 変更日 | ChangeDay | 日付と時刻 |
| 契約ID | ContractID | １行テキスト |
| 当番 | PersonOnDuty | １行テキスト |
IDはリストで自動採番されるシステムID
タスクIDはデフォルト設定される「Title」を名称変更して使用しています
日付と時刻のところは「日付」だけで作成しています
コンテナの挿入
Apps画面の作成によっては自動で入っているかもしれませんが挿入で「垂直コンテナ」を用意しましょう。（既に挿入されている場合は不要です）
縦に積み上げていくタイプのコンテナです。
この中に「見出し」と「検索ボックス」と「データテーブル」を縦に並べていく予定です。
挿入したら、垂直コンテナの名前を「MainContainer1」にしましょう。
※別にどんな名前でも良いのですが、この記事ではMainContainer1で設定してるので、合わせた方がやりやすいと思います。
MainContainer1のプロパティ
このコンテナは基本的にデフォルトのままで問題ないと思いますが、サイドバーを見せたいとか、横幅を他のコンテナに使用させるときはデザインしましょう。
LayoutGap を 10 に変更したぐらいで次の設定へいきます
MainContainer1の中身
以下を挿入しましょう
- ディスプレイ ＞ テキスト
- レイアウト ＞ 水平コンテナ
- レイアウト ＞ テーブル（プレビュー）
もしテキストやテーブルが該当カテゴリに見当たらない、クラシックしかない、といった場合はアプリの設定を見直してください。
設定 ＞ 更新 ＞ 新規 ＞ モダンコントロールとモダンテーマ
上記がONになっているとモダンなアイテムが「挿入」メニューに表示されます。
特に「テキスト」は似たようなものが複数あるため注意です。
この記事で利用しているのは左図のテキストです。
テキスト
いわゆるタイトルとして使用しようとしています。
この「テキスト」のコントロール名は TextCanvas1 にしています。
タイトルが不要な場合は挿入しなくても問題なし。
TextCanvas1 のプロパティ
| プロパティ | 設定内容 | 備考 |
|---|---|---|
| Align | ‘TextCanvas.Align’.Center | 中央配置 |
| AlignInContainer | AlignInContainer.Center | |
| Height | 30 | |
| Text | “タスク管理リスト” | |
| VerticalAlign | VerticalAlign.Middle | 垂直配置は中央 |
| Width | Parent.Width | |
| Wrap | false | 折り返しません |
水平コンテナ
水平コンテナのコントロール名は Container1 で設定
ここは 検索ボックス を用意するコンテナです。
以下の２つを水平コンテナに「挿入」しましょう。
- ディスプレイ ＞ テキスト
- 入力 ＞ テキスト入力
テキストのコントロール名 TextCanvas2
テキスト入力のコントロール名 TextSearch_担当者1
TextCanvas2 のプロパティ
| プロパティ | 設定内容 | 備考 |
|---|---|---|
| Align | ‘TextCanvas.Align’.Center | 中央寄せ |
| Height | Parent.Height | 親の水平コンテナに合わせます |
| Text | “担当者” | |
| VerticalAlign | VerticalAlign.Middle | 縦の位置も中央 |
| Wrap | false | 折り返し表示は不要 |
TextSearch_担当者1 のプロパティ
| プロパティ | 設定内容 | 備考 |
|---|---|---|
| Height | Parent.Height | 親の高さと一緒 |
| Placeholder | “前方一致で検索可” | 未設定でも良いけどユーザビリティで |
| TriggerOutput | ‘TextInputCanvas.TriggerOutput’.FocusOut | OnChangeと抱き合わせ設定なので、今回は不要ですかね |
| Width | 300 |
テーブル（プレビュー）
コントロール名は Table1 で設定
プロパティは以下の通り
| プロパティ | 設定内容 | 備考 |
|---|---|---|
| AlignInContainer | AlignInContainer.Center | |
| EnableMultipleSelection | ‘PowerAppsOneGrid.EnableMultipleSelection’.Enable | 複数選択可 |
| EnableRangeSelection | ‘PowerAppsOneGrid.EnableRangeSelection’.Disable | 範囲選択コピーを無効 |
| Height | 200 | |
| Items | 別途（下記へ） | |
| NoDataText | “表示できるレコードがありません” | 絞込み後のデータがないとき表示するテキスト |
| Width | Parent.Width |
プロパティ Items は以下の通り設定
Filter(
'タスク管理リスト5000件以上',
IsBlank(TextSearch_担当者1.Value) || StartsWith(field_1, TextSearch_担当者1.Value)
)TextSearch_担当者1 に値が入れば先頭一致で絞り込まれます
TextSearch_担当者1 が空欄の場合は何の絞込みも行われません
複数の検索値でフィルター
例えば「優先度」もフィルタリング項目に追加したい場合。
テキストボックスを１つ追加して TextSearch_優先度1 という名称にしておきます。
「優先度」のSharePointリストの内部列は field_4 であることを確認します。
※優先度という意味の列を現実的に作る場合はchoiceかもしれませんが、ここでは１行テキストで設定しています(;^_^A
データテーブルのプロパティ Items を以下のように変更します
Filter(
'タスク管理リスト5000件以上',
(IsBlank(TextSearch_担当者1.Value) || StartsWith(field_1, TextSearch_担当者1.Value)) &&
(IsBlank(TextSearch_優先度1.Value) || StartsWith(field_4, TextSearch_優先度1.Value))
)これで絞込み表示が可能なデータテーブルを作成することができました！
続いて、このデータテーブルを使用した実践編を作成しましたので、ご興味がある方は下のリンクへ。
