ギャラリーでデータを表示

Power Apps 入門

Luise Freese

Azure & Power Platform Architect

SharePointでデータソースを追加

 

  • データパネル → + データを追加 → SharePoint
  • サイトを選択してからリストを選択します
  • リストがデータソースとして表示されます

SharePointを検索したPower Appsのデータパネル。SharePointコネクタが検索結果の最上部に表示されている

Power Apps 入門

可変高さのギャラリー

$$

タイトルとサブタイトルを持つ3つのタスク行を表示するPower Appsギャラリー。各行はコンテンツに合わせて自動的にサイズ調整される

 

  • 行はコンテンツに合わせて自動的に拡大します
  • タイトルやステータスピルが途切れません
  • モダンキャンバスアプリの既定設定です
Power Apps 入門

テンプレートのカスタマイズ

 

  • テンプレート行（一番上のカード）を選択します
  • テンプレート内の各コントロールは ThisItem.Column を使用します
  • 一度編集すれば、すべての行が更新されます

$$

テンプレート編集モードのPower Appsギャラリー。タイトルラベルが選択され、数式バーに ThisItem.Title と表示されており、各行が自分のタスクタイトルを表示している

Power Apps 入門

Text() で値を読み取る

 

Text(ThisItem.DueDate, "[$-en-US]mmm d")
  • オブジェクトの後に . を入力するとプロパティと列が表示されます
  • 値には型があります：Text、Number、Boolean、Date/Time、Record、Table
  • ThisItem.DueDate は Date 型なので、Text() はJun 15のような形式にします
  • [$-en-US] は言語を指定し、mmm d は表示形式を指定します
Power Apps 入門

条件付き書式

 

  • コントロールの色は行のデータによって変えられます
  • ラベルのColorプロパティで If() を使用します
  • 例：

If(ThisItem.Priority = "High", Color.Red, Color.Gray)

 

If(ThisItem.Priority = High, Red, Gray) でPriorityラベルを色分けしたPower Appsギャラリー。2行でHighが赤、Mediumが灰色で表示されている

Power Apps 入門

DueDateのハイライト

 

  • 日付も同様に書式設定できます：

If(ThisItem.DueDate < Today(), Color.Red, Color.Black)

  • 期限切れの行がすぐに目立ちます

If(ThisItem.DueDate < Today(), Red, Black) で期限日ラベルを色分けしたPower Appsギャラリー。過去の日付が赤、未来の日付が黒で表示されている

Power Apps 入門

空の状態

親しみやすいコーヒーカップのアイコンと「一致するタスクがありません」というメッセージが画面中央に表示された空の状態のアプリ画面

 

  • ギャラリーが空のときはわかりやすいメッセージを表示します
  • プレースホルダーのLabelに Visible = IsEmpty(Gallery1.AllItems) を使用します
  • データが空の場合とフィルター結果が0件の場合の両方で機能します
Power Apps 入門

今はコレクション、実務ではコネクタ

 

  • この演習では、行はコレクションに格納されています
  • 実際の組織ではSharePointリストなどを参照します
  • ギャラリーの仕組みはどちらも同じです

$$

$$

図：SharePointリストとアプリ内コレクションの両方が1つのPower Appsギャラリーにデータを供給しており、ソースに関係なくギャラリーが同じように機能することを示している

Power Apps 入門

練習しましょう！

Power Apps 入門

Preparing Video For Download...