excel2016样式（Power Apps 画布应用 入门教程 第三章 基于 Excel 的员工管理应用之【数据列表显示】）Excel教程 / Excel文档中的样式管理与自定义...

上一章中我们完成了应用的创建，并通过添加【标签】控件实现了应用的顶部导航本期中我们将连接到 Excel 数据，并将数据列表显示到应用本期看点在画布中显示每名员工的姓名，部门和职位其中涉及到了【连接器】的概念，通过连接器获取位于 SharePoint 文档库中的 Excel 文件，并通过【库】控件显示 Excel 数据，之后在显示职位和部门时通过【&】将多个文字进行拼接处理。

最后通过【Switch】公式让不同职位显示不同颜色的矩形框通过连接器获取 Excel 数据之前说到我们的员工数据存储在 Excel 中，此时要想在画布应用中显示 Excel 的数据，就需要通过【连接器】连接到 Excel 数据源。

什么是连接器

在 Power Apps 画布应用中可以对接多个系统的数据，而每个对应的系统都需要一个连接器才能与之进行对接全球版 Power Apps 中提供了 400多个预置连接器，用来与 400多个系统进行对接除此之外也可以通过【自定义连接器】与其他系统进行对接。

通常当我们需要连接到企业自己系统时，都需要使用【自定义连接器】在 Power Apps 中有多种方法可以对接 Excel 数据源，从 Excel 导入

该方法可以将 Excel 中的数据导入到 Power Apps 画布应用中，但是通过这种方式只能做一次性的导入，无法实现数据的刷新，更改等操作一般只有在测试的时候会使用该方法，因为这种数据导入进来后会成为静态数据，无法实时刷新。

ExcelOnline(Business)

该连接器可以连接到存储在 OneDrive for Business 和 SharePoint 文档库中的 Excel 表格由于 Excel 存储在了云端，所以可以通过该连接器获取最新的 Excel 数据，并对存储在云中的 Excel 进行添加、修改和删除操作。

Excel Online 连接器也有一些已知的限制： Excel 大小不能超过 50MB

Excel 中的数据行不能超过 64000条

当我们的数据超过 50MB 或者 64000条的时候，就说明我们不应该用Excel 作为数据源了，此时应该考虑 SQL 或者 Dataverse 等数据源准备 Excel 数据在 Excel 连接器中只能读取到转化为表格的数据，因此我们首先需要在原 Excel 中选中数据，按 CTRL+ T 将所选区域转化为表格，同时将表名称进行友好的命名。

接下来我们需要将 Excel 上传到 SharePoint 中，因为只有这样才可以让数据动态刷新。

连接到 SharePoint 中的 Excel 数据回到 Power Apps 画布应用编辑器，点击视图中的数据源选项卡此操作会将左侧原树状视图窗口切换为【数据源】视图，该视图中会显示当前应用中已经连接到的数据源有哪些。

可以看到目前没有任何数据源，此时我们可以点击【添加数据】，会展开所有可用的【连接器】，之后在搜索框中输入【Excel】找到【Excel Online(Business)】并点击该连接器。

首次点击时会进行添加连接器的操作，我们按照指引点击【连接】

建立连接后，依次定位到我们的目标文件

选择文件后，可以查看到所选 Excel 文件中的表数据（只有将数据转化为表格才能被查看），选择【员工表】，点击连接。

针对 Excel 数据本身，在对接到 Power Apps 时需要指定一个唯一标识符，该标识符主要用于确认数据的唯一性我们可以自动生成 ID 或者指定 Excel 表中的某一列为【唯一列】比如我们可以将【员工编号】设置为【唯一列】，因为正常来讲员工编号就是员工数据的唯一标识符，之后点击连接。

如果大家出现了下面的错误【必须为数据集提供一个值】，这说明你的 Excel 放错了位置。目前如果将 Excel 放到了 sharepoint Site 站点下就会出现该问题。

必须将 Excel 放到 group 站点下，比如下面这些，才不会报错。

在连接成功后会在数据源视图中显示【员工表】，表示我们已经将员工表 Excel 对接到 Power Apps。

将 Excel 数据显示到画布应用中当把数据源集成到 Power Apps 以后，我们需要将数据显示到画布中如果我们想让画布以列表形式显示，则需要用到【库】控件该控件可以将一组数据以水平或垂直布局的方式显示到画布中。

在点击插入选项卡找到库控件后，可以发现他提供了六种可选项分别代表了不同的样式，如果我们希望完全自己去定义每一行数据的样式则可以选择下方的空白库而我们在手机上希望垂直显示，所以应该选择【垂直空白库】

选中之后会将【垂直空白库】插入到画布中此时只会显示一个蓝色的框，因为我们插入的是空白库所以里面没有任何界面元素接下来我们可以从【插入】选项卡中将其他控件到【垂直空白库】中，用来定义每一行数据的样式比如我们希望显示员工姓名，则可以通过插入【标签】控件来完成。

在选中库控件的前提下，点击插入【标签】。此时会将标签控件插入到库控件中，相当于每一行数据都有一个标签。而默认标签控件中显示的内容是个示例数据。我们需要将示例数据改为之前对接的【员工表】

选中库控件，之后画布右侧会出现【选择数据源】的窗口。我们在其中可以直接找到之前添加的【员工表】数据。

一旦点击员工表数据后，画布会转变成下图的样子。库控件的数据源属性会配置为员工表，同时【Power Fx 公式栏】中会将 Items 属性配置为员工表。这表示我们库控件中引用的已经是员工表数据源了。

但我们可以发现此时标签中显示的并不是姓名，而是员工编号如果我们希望将员工编号该为姓名，可以点击库中的第一行员工编号，或者在左侧面板切换到树状视图，选择树状视图中 Gallery1 下面的 Label2控件。

此时可以发现上方【PowerFx 公式栏】中 Label 的 Text 属性变成了 ThisItem.员工编号这表示将标签的文本设置为 Excel 数据源中的员工编号列而由于库控件中会显示一组数据，所以这里的 ThisItem 指的是当前行的【员工编号】。

那如果我们希望让标签控件显示员工姓名，则只需要更改公式，将其替换为【ThisItem.姓名】

之后我们在树状视图中对 Gallery 和 Label 控件进行重命名操作。

调整库控件的外观

当我们将员工姓名成功显示在画布中以后，我们发现此时只显示了两个员工，这是因为库控件的高度不够。我们可以通过拖拽库控件，将其高度和位置设置为下图的样式。

库控件的整体高度拉高后，我们还可以单独设置每一行的高度每一行的高度在 Power Apps 库控件中是通过【模板大小】属性进行控制的我们可以在右侧属性面板中降低【模板大小】，或者选中库控件的第一行，然后将其高度通过拖拽缩短。

将部门和职位添加到画布中

在有了员工姓名后，我们还希望将该员工的部门和职位显示在姓名下方此时可以通过添加【标签】控件，并将标签控件的 Text 属性通过【Power Fx 公式】设置为对应的值来实现如果希望往库控件中添加其他控件，需要选中库控件的第一行，然后再点击插入选项卡进行控件添加操作。

否则会将控件添加到库控件外面添加【标签】控件，并将其 Text 属性设置为【ThisItem.部门】

调整姓名和部门标签的位置，之后将【部门】的字号和字体颜色进行配置，改为灰色，16号字。

接下来如果我们希望添加职位的话，除了再次添加一个新的标签控件外还可以在【部门】标签控件中，通过字符串拼接的方式实现选中【部门】标签，将其 Text 属性设置为【ThisItem.部门 &"-" & ThisItem.职位】。

这里在公式中用到了【&】符号，&符号在 Power Apps 中可以作为拼接字符串将两个文字进行字符串拼接我们在这里就是通过【&】首先拼接上【"-"】然后再通过【&】拼接上当前行的【职位】，最后的效果如图所示。

添加图标进行界面美化

为了让数据列表显得不那么空，我们可以插入一个图标控件，比如插入一个【矩形】图标。

然后控制【矩形】的大小位置和颜色，来美化我们的列表界面。

此时我们可以利用【PowerFx 公式】实现一个更有趣的功能比如根据员工职位的不同，让矩形显示不同的颜色这里可以用到【Switch】公式，通过【Switch】可以对指定公式进行求值，然后将结果和多个值进行匹配，并在匹配到不同值时返回不同的内容。

比如我们选中矩形框后，将【Fill】属性设置为：Switch(ThisItem.职位,"经理",RGBA(25, 25, 122, 1),"组长",RGBA(0, 134, 208, 1),"职员",RGBA(0, 206, 209, 1))

这表示对职位进行判断，如果职位等于“经理”则将矩形框的颜色设置为 RGBA(25, 25, 122, 1) 如果职位等于“组长”则将颜色设置为RGBA(0, 134, 208, 1) ，如果职位等于“职员”则将颜色设置为RGBA(0, 206, 209, 1) 。

其中的【RGBA(0, 206,209, 1)】用于表示 RGB 颜色值，前三位分别代表R，G，B，最后的A表示透明度，可以设置为0-1之间0.5 表示50%透明，1表示 100%显示，0表示完全透明

总结本期我们已经成功在画布中显示了每名员工的姓名，部门和职位其中涉及到了【连接器】的概念，通过连接器获取位于 SharePoint 文档库中的 Excel 文件，并通过【库】控件显示 Excel 数据，之后在显示职位和部门时通过【&】将多个文字进行拼接处理。

最后通过【Switch】公式让不同职位显示不同颜色的矩形框