上一期我们讲到 VA 公司成立了一个 Fusion 团队用于构建企业的解决方案。本期 Fusion 团队将开始他们的第一个任务,通过 Power Apps 创建应用原型(本期内容为动手实操,本期内容为动手实操,本期内容为动手实操,)。
虽然开发人员阿杰对 Power Apps 这种低代码解决方案持有怀疑态度,但他还是决定和库房经理阿彪一起去开发一款 App ,去解决库存管理的问题,帮助现场技术人员在手机 APP 中实时查询库存,搜索知识库以及查看客户预约日程表。阿杰和阿彪两个小伙伴计划利用这次项目机会,好好学习下 Power Apps 。
按理说通过低代码工具构建应用原型是应该由业务用户(公民开发者)来完成的,但是阿杰还是希望这次能够先参与进来,方便他了解整个应用是如何构建的,这样他才能知道如何更好的给阿彪提供数据源和API等服务。至此开始了他们的 Power Apps 应用创作之旅。
库存管理
阿彪最初是想用 Power Apps 创建一个画布应用,然后在应用里显示零配件的列表,让用户点击零配件的时候可以查看详细信息,并且还可以对指定零配件进行下单。当然,最初的版本只是做一个原型,不会真正的连接到后端的库存系统。在参考了现场技术人员老温的意见后,阿杰跟阿彪将一起协作先完成原型,最后真正的去连接后端的库存系统。
因为阿杰对后端库存系统非常熟悉,所以他先创建了一份包含模拟数据的 Excel , 里面包含一些基本的零配件信息。表格中包括 ID、Name、CategoryID、Price、Overview、NumberInStock 和 Image 列(字段)。他可以通过这个 Excel 来创建和测试画布应用,最后阿杰把这个 Excel 存储到了他的 OneDrive 账户中,命名为 BoilerParts.xlsx.
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418366-876442-c246ecc0f8cc930b1d548e0f602e04a7.png)
Excel 中的内容为示例数据,可前往 https://github.com/microsoft/fusion-dev-ebook 下载。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418380-906771-8820f881bb4aba91594c93b2fe812822.png)
当有了数据以后,接下阿杰和阿彪就准备一起来完成应用。
首先他们进入到 Power Apps 的门户站点:http://make.powerapps.com/ (如果没有账户的话,可以申请开发者计划)
之后阿彪发现 Power Apps 可以直接在首页从数据源快速创建应用,于是他们选择了从 Excel Online 创建数据。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418410-1430-577e3c122df3ed7fd5f2a50153dfbcb3.png)
阿彪在弹出的连接器页面,选择添加 OneDrive for Business 连接,然后找到了他之前上传的 BoilerParts.xlsx。(这一步相当于是确定数据源的具体位置)
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418422-797306-c1a8ce6f77d4621dcd1ce81f0c803ca7.png)
选择 Table1 ,点击连接。(因为要将 Excel 中的内容转化为表格 Table 形式,才可以被读取到)
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418454-26810-b2fe16d1e74ab144e6f73aad48fc43af.png)
之后阿彪发现 Power Apps 会自动根据数据源生成应用的初始界面,在左侧的树状视图中显示了应用当中所有的控件,阿彪点击 BrowseScreen1 看到 Excel 里面的相关数据都被读取显示到了应用界面中。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418467-732612-d8eeee095c5af3312b6155794720cc1e.png)
阿彪认为由于 Power Apps 默认显示的数据对现场技术人员的帮助不是很大,所以他们需要更改界面显示的内容,比如需要看到具体的零配件名字,所以阿彪接下来就点击界面中的第一行内容(之前显示的 Category)把它的 Text 值改为 ThisItem.Name ,这表示在界面中显示 Excel 的 Name 列(这里用到了 Power Fx 公式,通过 ThisItem.Name 指定 Text 值为数据源的 Name 列)。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418478-911616-b67f67cb6ed3eb0551ec99e946c2df70.png)
然后阿彪用同样的方式,将 ID 改为 ThisItem.CategoryID , Image 改成 ThisItem.Overvew 。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418488-149903-b8bb242d9cda666f28c55dbe44b7f553.png)
接下来阿彪想要改变一下数据的排序和搜索方式,他在左侧树状视图中点击 BrowseGallery1 ,将它的 Items 属性修改为:
SortByColumns(Search([@Table1], TextSearchBox1.Text, "Name", "CategoryID", "Overview"), "Name",
If(SortDescending1, Descending, Ascending))
上面这一段 Power Fx 是阿杰帮他找到的,阿杰向阿彪解释到,通过 SortByColumns 公式可以对指定内容按照自己指定的列进行排序,而 Search 公式可以对指定数据源实现搜索的功能阿彪听到以后还是一头雾水,决定先按照阿杰说的写,之后看看文档好好学习一下。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418523-304631-f99ee2aa7e73c6745a8ff2f91fa4ecb1.png)
阿彪发现默认页面中的标题是 Table1 ,他想改成更加符合当前功能的内容,于是双击 Table1 的文本控件将 Table1 改成了”库存浏览“。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418534-341851-5addc7e4096c20e1b5d4a100eb88cd4c.png)
之后阿杰告诉阿彪,Power Apps 有一个主题的功能,可以快速帮助更改整个应用的外观样式,于是阿彪决定换一个主题。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418543-959664-e76d9ffe3804c5c5edf514a8820d625a.png)
截止到目前位置,阿彪和阿杰的配合还算默契,他们一起创建了基础的应用,并且修改了一个默认页面,从而显示零配件的数据列表。接下来他们会去更改零配件的详情页面。
阿彪在树状视图,选择 DetailScreen1,打算切换到详情页面。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418557-467615-83f5ecc7f22e81e0e082a873acc571d5.png)
他在这里首先将默认的 Table1 改成了“零配件详情”。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418568-379242-5d19f5f1554e9d09108c27612161ae88.png)
接下来他想要调整一下详情页中显示的字段顺序,详情页中的内容是通过表单控件来显示的,阿杰让他点击 DetailForm1 ,选择编辑字段,然后按照自己喜欢的顺序拖拽进行调整。
• Name
• CategoryID
• Overview
• Price
• NumberInStock
• Image
• ID
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418580-128713-07c52d4086515b4fbfa9cafa60f94198.png)
阿彪觉得 ID 是多余的,不需要给现场技术人员显示,于是他把 ID 字段从表单中删除。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418590-517898-ac24fa1f7de232f7fa612a0584dd6465.png)
之后阿彪把详情页的表单字段改了一下显示的名称,希望名字对现场技术人员更友好一些,于是他点击左侧树状视图,展开 DetailForm1 ,点击 CategoryID_DataCard1 ,在右侧属性面板选择高级,解锁已更改属性,更改 DisplayName 字段为 “分类”。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418599-722704-e21655980c3851f158970262798c3419.png)
用同样的方式将 NumberInStock_DataCard1 的 DisplayName 改为 “库存数量”。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418609-346915-142e4d015dd2c04e8a99ff1234307547.png)
再用同样的方式,把其他几个字段改成“名称”,“说明”,“价格”“图片”。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418619-16580-883ee1bb7362e3f630e32afc680433b4.png)
接下来阿彪想要将价格改为货币的形式显示。展开Price_DataCard1, 选择 DataCardValue7, 将高级属性中的 Text 更改为:
Text(Value(Parent.Default),"[$-en-US]$ ###,##0.00")
上面的 Power Fx 公式意味着对原有的价格进行了格式转化,将它转化为了货币形式。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418637-444674-4ea4d28c50d821bad9b76551a19eb0bc.png)
阿彪发现图片目前显示的是一个网址,所以他先将 Image_DataCard1 下面的 DataCardValue3 删除
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418647-756585-f49a0fb715cc21baf0abe5c834fe1a81.png)
然后选中 Image_DataCard1,点击插入,选择媒体下方的图像控件,重新插入了一个图片。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418660-23922-c0dfa058c66702aadda6de6cddf379eb.png)
把图片调整为合适的大小。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418676-87500-83e935759c23987ebdcf33d33c1c9991.png)
更改图片控件的 Image 属性,将其更改为 Parent.Default
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418691-852928-737fc4f24cad10bc3c893996a853b615.png)
另外阿彪发现这款APP 在初始的时候自动包含一个编辑页面,但实际上现场技术人员不应该对零配件的信息进行更改,所以他打算把这个页面删除。
阿彪从树状视图中找到并删除了 EditScreen1。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418700-984288-d14f50ea3012b8b3938f9b9ff5a3d513.png)
之后他发现由于把 EditScreen1 删除,导致了一些错误的出现,于是他选中 DetailScreen1 ,将右上角的编辑图标删除,因为现在页面都没有了,也就不需要编辑图标了。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418712-337286-ffaf3fab405f7ecf42630657f9896892.png)
顺便将 IconDelete1 也删除。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418747-504402-0b2e71c86ca75470994e332d97c01f13.png)
两个图标删除后,他发现页面又出现了新的错误,于是找到错误,将 LbIAppName2 的 Width 改为 Parent.Width - Self.X
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418757-273269-860e3820b7c1d7b0ebe4799ab34d1220.png)
阿彪回到BrowseScreen1 页面,把 IconNewItem1 也给删除了。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418768-145500-0785ebc52893276e9004f2eecd690470.png)
然后继续和之前一样修改由删除内容引发的相关错我,首先将 LbIAppName1 的 Width 改为
Parent.Width - Self.X - IconSortUpDown1.Width - IconRefresh1.Width
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418782-938960-af80a144631318ab8596bde5eef1203f.png)
然后将 IconSortUpDown1 的 X 属性改为 Parent.Width - Self.Width 。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418800-388638-7a96a3cf04d6324e7663d5ed101701a7.png)
最后阿彪将 IconRefresh1 的 X 属性改为
Parent.Width - IconSortUpDown1.Width - Self.Width
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418816-50176-39b36a0b4c79a8b2e836d4aac3e370eb.png)
现在所有错误都没有了,应用也基本做完了,都完成以后阿彪按 F5 预览了一下应用。
他在预览界面搜索框输入名称时,应用列表中会筛选出指定的零部件,说明功能没有问题。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418826-313813-3c4f575e5e94717e0ac549438eb129bf.png)
并且他点击可以查看对应的零配件详情,每个详情页也是按照之前修改的顺序显示的。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418849-620350-e263c8bdff69777d6248857ce06077d9.png)
阿彪发现应用运行没问题后,就关上预览,然后点击左上角文件进行保存操作,将应用起个名字,保存到了云端。
![](https://forum.power-platform.cn/assets/files/2022-03-16/1647418860-934407-3b58276200238dd922f40f830c3a3e2e.png)
至此,阿彪在阿杰的帮助下完成了第一个 Power Apps 应用原型 - 库存管理。
明天他们会继续完成下一个应用原型 - 知识库。