拆解一个Power Apps模板应用 - 4 - ViewTicketScreen

最新推荐文章于 2024-02-19 13:53:02 发布

aladinggao

最新推荐文章于 2024-02-19 13:53:02 发布

阅读量522

点赞数 1

分类专栏： Microsoft Power Apps 文章标签： microsoft

本文链接：https://blog.csdn.net/aladinggao/article/details/108938364

版权

Microsoft 同时被 2 个专栏收录

53 篇文章 14 订阅

订阅专栏

Power Apps

44 篇文章 54 订阅

订阅专栏

接上一节，本节继续解析屏幕构件。

三. ViewTicketScreen

屏幕总体构成：

这里用到一个新的页面类型，Scrollable 页面。

顺便来了解一下这个Scrollable类型的页面：

新建一个Scrollable 页面，看看默认的各个模块在页面上的位置（默认的，每个控件的宽度都是占据整行的。为便于识别，我把各个控件的宽度做了调整，以便把背景也就是最高层红色的ScrollableScreen、以及第二层黄色的画布也就是Canvas1露出来）。

Add section 在左侧没有对应的控件进行控制，是系统自带的，用来添加新的卡片。每添加一个卡片，它就会被自动放到新加卡片的下方，用来继续添加新的卡片。

回到主题，分析ViewTicketScreen：

可以看出，这个ScrollableScreen最底层只有一个卡片。卡片上面的两级， ViewTicketScreen以及 ViewTicketScreenCanvas 只是设置了视觉效果，如背景及边框颜色等。没有操作逻辑的设定，略去不提。

接下来我们一起来解析ViewTicketScreenDataCard 卡片控件：

按照页面元素类型对卡片控件进行分区，可以划分成四个主要区域：

1. 绿框标出的标题区域

展开来看，内部构成很简单，总共三个控件元素:

a. 返回按钮: OnSelect = Back();
b. 标题文字: Text = "View Ticket";
c. 背景矩形框: Fill = RGBA(158, 11, 15, 1)。

2. 黑底的信息概览区域

如上图蓝框标出的，这片区域包含三类控件:

A. 一个票券形状的图标（设定好Image 属性和布局相关的属性就行）。
B. 一系列标签控件，分两类：
- I. 标识名称的标签（静态 – 上图中控件名里有Label的几个）：设定好 Text 属性就行。
- II. 需要从后台数据源获取数据进行显示的标签(动态 – /#和控件名包含Label相对应的没有Label的几个控件。通过名称来区分不同控件，尤其是有对应关系的控件，是个好习惯。#/),

举两个例子:

>> a. Status控件:

>Text= SelectedTicket.TaskStatus.Value /# SelectedTicket 在上面的MyTicketScreen页面里进行了定义#/
> Color = Switch( SelectedTicket.TaskStatus.Value,
"DEFERRED",        ColorValue("#BC40EA"),
"COMPLETED",    ColorValue("#00a604"),
"IN PROGRESS",  ColorValue("#f0c000"),
"NOT STARTED",        ColorValue("#fe2e34"),
"WAITING ON CSR",   ColorValue("#28a1ff")
)    /# 这里利用Switch函数根据任务的不同状态来设定状态文本的颜色。#/

b. Created控件:

>> Text = Text(SelectedTicket.Create, ShortDate) /# 这里使用了Text函数加ShortDate 参数来格式化日期格式#/

C. 一个设定为黑色背景的按钮控件。主要是视觉样式上的设置。

3. 逐条细节的区域

由下面几组控件组成。

可以看到，前三组都是由三个子控件控件组成:

两个Label（和上面黑底部分一样，一个动态标签一个静态标签）
一个背景矩形控件。

这三种控件之前提到多次，不再赘述。

重点先来看看Completed控件, 它实现了一个比较有趣的功能 ---- 进度滚动条。具体来看:

A. 进度数字显示：

由下面两个控件组成，一个图标和一个位于图标内的标签控件（用来显示数字）

这两个控件需根据当前进度值而显示到相应的位置，因此主要有两个属性需要控制:

数字控件的 Text: = SelectedTicket.PercentComplete *100 & "%" /#这里使用了 & 命令符直接连接两个字符串，另外用到了当前选中工单的完成百分比这个数值。#/
数字和图标两个控件的横向位置

-- 数字控件: X= ViewTicketScreenCompletedColoredButton.Width +48

-- 图标控件: X = ViewTicketScreenCompletedColoredButton.Width +25

可以看到，两个控件都是以ViewTicketScreenCompletedColoredButton.Width 为基准，然后加上自身的增量来进行横向定位。

B. 进度条：

由两个按钮控件组成。

做静态背景: 一次性设置好视觉样式就行。另外，X =45, Y=779, Width=510.
随进度增长宽度逐渐变大的按钮：初始的横向值被设置成0，然后会随着进度增加按钮宽度不断向右延展。主要的属性有：
- X = 45， Y= 779 /#和上面的静态按钮保持位置一致#/
- Fill = RGBA(158, 11, 15, 1) , /#使用了和上面的图标一样的颜色，保持视觉效果一致。#/]
- Width = 510*SelectedTicket.PercentComplete /# 以静态背景按钮的宽度为基准，乘一个系数来决定当前进度对应的长度。这里的系数使用的是当前选定工单的完成百分比。这个百分比的数值是在后续编辑工单里手工拖动进度条生成的。#/