用图库展示数据

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" 提示

 

  • 图库为空时显示 友好提示
  • 在占位 Label 上使用 Visible = IsEmpty(Gallery1.AllItems)
  • 适用于 空数据 与 筛选后无结果
Power Apps 入门

现在用 collection，工作中用连接器

 

  • 本练习中，您的行数据存于 collection
  • 在机构内，您会指向 SharePoint list 或类似来源
  • 所有图库概念用法 完全一致

$$

$$

示意图：SharePoint 列表与应用内 collection 同时作为输入到一个 Power Apps 图库，表明无论来源如何图库均相同工作

Power Apps 入门

让我们一起练习吧！

Power Apps 入门

Preparing Video For Download...