用圖庫顯示資料

Power Apps 入門

Luise Freese

Azure & Power Platform Architect

用 SharePoint 新增資料來源

 

  • Data 面板 → + Add data → SharePoint
  • 選擇你的 site，再選 list
  • 該清單會出現在 data source

Power Apps 資料面板搜尋 SharePoint，顯示 SharePoint 連接器為最上方結果

Power Apps 入門

可變高度圖庫

$$

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)

 

Power Apps 圖庫依 If(ThisItem.Priority = High, Red, Gray) 設定 Priority 標籤色彩，兩列 High 為紅色，Medium 為灰色

Power Apps 入門

突顯 DueDate

 

  • 日期也可用相同方式格式化：

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

  • 逾期列一眼可辨

Power Apps 圖庫依 If(ThisItem.DueDate < Today(), Red, Black) 設定到期日標籤色彩，過去日期為紅色，未來日期為黑色

Power Apps 入門

空狀態

應用畫面顯示空狀態：咖啡杯圖示，中央訊息為「No matching tasks」

 

  • 圖庫為空時顯示友善訊息
  • 在占位標籤設 Visible = IsEmpty(Gallery1.AllItems)
  • 適用於無資料與無篩選結果
Power Apps 入門

現在用 collection，職場用連接器

 

  • 這些練習中，你的列存於collection
  • 在組織中會指向 SharePoint list 或類似來源
  • 所有圖庫概念一樣適用

$$

$$

示意圖：SharePoint list 與應用內 collection 都可餵給同一個 Power Apps 圖庫，來源不同運作一致

Power Apps 入門

一起來練習吧！

Power Apps 入門

Preparing Video For Download...