【Power Platform】实现一个好看又好用的审批信息展示看板

这回给大家分享的案例是一个由SharePoint List作为数据源，在Power Apps的自定义表单中实现一个审批信息的看板，可以直观的展示审批流程中每一步的状态及审批信息。

先看最终效果，大概像下边这样：

本次案例我们设置三个审批人，其中主管审批的审批人由Power Automate自动获取发起人的直属主管、财务审批的审批人由发起人自己选择、经理审批的审批人为写死的固定人员。

首先是在SharePoint List中设置表单字段，除了表单填写的信息字段外，我们还需要为这个看板准备这些字段：

这些字段不需要全都放到Power Apps的自定义列表里，必须要放的只有一个“财务审批”字段，因为需要让发起人来选择财务审批的审批人；当然List界面里这些字段也不需要全都展示出来。

接下来我们开始搞Power Apps的界面。

首先放四个“图像”控件，用于显示发起人与三个审批人的头像。

设置这些图像控件，让其显示指定成员的头像。

然后设置一下这些图像控件的长宽与边框半径，以实现出圆形的效果；同时我给这些图像控件加了一个边框，可以实现一个头像边框会跟着流程和审批状态的改变而改变的效果。

至于图像与图像之间的连线，可以采用这个垂直线。

或者干脆用箭头什么的，都可以。但是我嫌这个垂直线不好调整长度。

所以我用了一个“文本标签”控件，设置边框并将其宽度改为0。

来实现图像之间的连线的效果，这下想要多长有多长，想要多宽有多宽了。

然后在每个图像控件的旁边添加“文本标签”控件，用来显示审批信息。

然后我们拼接审批信息的内容，例如这个主管审批的审批内容，当“主管审批意见”字段没有值的时候，说明主管还未作出审批，此时显示审批人名字和审批状态（审批中或等待审批，通过“审批标记”字段判别），当“主管审批意见”字段有值的时候直接显示“主管审批意见”字段的值。

其中发起人的审批内容是相对固定的，没有大量需要动态显示的内容。

其实做到这里，一个基本能用的审批信息看板就已经做好了，如果您对审批信息看板的需求没有那么多，那么其实做到这里就已经可以了。

但如果您对这个看板的视觉效果有更高的要求，接下来我们就要对这个看板做一些优化了。

首先我们来实现图像控件的边框以及连接图像控件的连线会根据审批流程和审批状态的改变而改变颜色的能力。

其实也没什么新奇的，根据“审批标记”字段和“审批状态”字段的值来动态地给颜色就好了。

这个连接发起人和主管审批的连线就是当标记为“0”、状态为“审批中”的时候（说明此时流程仍在运行而没有结束，并且运行到第一个审批节点了），说明这个节点正在审批中，边框颜色就给个橙色；而标记为“0”、状态为“审拒绝”的时候，说明这个节点被拒绝了，那就变红色；如果审批标记值为“1”或为“2”（不能写不等于“0”，因为无法排除空值的影响），说明流程继续往下流转了，那这个节点就是同意了，变绿色；以上几种情况都不符合，就给个灰色。

然后头像的边框颜色跟着连线的颜色变。

其他几个连线边框颜色的设置都跟这差不多，就是相关的值变一下就好了。

实现这个功能后我们再来设置头像左上角的小图标。

第一种方案：直接放个图标然后设置动态变化即可

这种方案就是一个方形的小图标，实现起来也比较简单。

第二种方案：搞花活，整个圆图标

这种玩法稍微有点复杂，因为这些个图标本身都是方形的，又无法设置边框半径，所以只靠这些图标是无法实现圆形图标的。

所以我们需要先放一个圆进来。

让这个圆的底色跟着头像的边框颜色变。

然后再在圆上放一个小一号的图标，并设置这个图标的动态变化。

这样就能把图标做出圆形的效果了。

然后我们的Power Automate再配合更新一下相关信息即可。

首先，由于我们的主管审批和经理审批不是发起人填写的，所以需要Power Automate在流程的一开始把相关人员更新到List的字段里，同时更新一下审批状态和审批标记。

然后在每个审批结点的后边通过变量来获取到审批意见。

之后判断审批结果，根据审批结果来修改审批状态和审批标记，同时顺便就把审批意见传过去，记得对应该审批意见的位置，可别把主管审批的意见更新到“财务审批意见”字段里去了。

结果为同意的话审批状态不变，审批标记变，拒绝的话正相反，状态变拒绝标记不变。

这样每一个审批节点都这样变一下，这样Power Apps就能根据实时变化的审批状态和审批标记来改变看板里的颜色和图标了。