如何用PowerApps基于SharePoint列表创建可点击切换的交互式组织架构图

一、先搞定SharePoint列表结构 #

你的列表必须包含这些核心字段，才能支撑架构图的逻辑：

• 员工姓名：单行文本类型
• 职级：选项或单行文本（比如「总监」「经理」「员工」，要提前定义好层级顺序）
• 直属上级：人员类型，关联列表内的员工账号
• 所属团队：选项或单行文本

二、搭建PowerApps基础界面 #

1. 新建Canvas应用，连接你的目标SharePoint列表
2. 添加一个垂直容器作为架构图主区域，再放一个标签在容器顶部，用来显示当前聚焦的负责人（初始值可以设为公司最高职级的员工，比如First(Filter(你的列表名, 职级 = "总监"))）
3. 添加一个垂直画廊到容器内，用来展示下属团队，画廊的数据源先设为：

   Filter(你的列表名, 直属上级.Email = 当前负责人.Email)
   

   这里的当前负责人是需要提前创建的全局变量，初始值设为最高职级员工即可

三、实现点击交互逻辑 #

1. 给画廊里的员工卡片设置OnSelect属性：

   Set(当前负责人, ThisItem)
   

   点击任意员工后，当前负责人变量会更新为该员工，画廊会自动筛选出他的直属下属
2. （可选）给顶部的负责人标签加返回上级功能，设置OnSelect属性：

   If(!IsBlank(当前负责人.直属上级), Set(当前负责人, LookUp(你的列表名, Email = 当前负责人.直属上级.Email)))
   

   这样点击顶部负责人就能回到上一级架构

四、按职级+团队排序展示 #

修改画廊的Items属性，加入排序规则：

Sort(
    Filter(你的列表名, 直属上级.Email = 当前负责人.Email),
    职级, Descending, // 先按职级从高到低排序
    所属团队, Ascending // 同职级下按团队名称升序排列
)

如果职级是选项字段，要确保选项的顺序和你想要的层级一致（比如把「经理」放在「员工」前面）

五、界面美化（匹配示例样式） #

• 给不同职级的员工卡片设置差异化背景色，方便区分层级
• 添加分隔线或简易连接线，强化上下级视觉关联
• 调整容器、画廊的间距和布局，让整体结构和你提供的示例界面一致

内容的提问来源于stack exchange，提问作者user16083620