Power Apps - 创建你的第一个Power Apps应用程序

Power Apps - 创建你的第一个Power Apps应用程序

06 Mar 2021

需求：在这篇练习中，我们将使用Onedrive for Business中的Excel表格文件作为数据源，从零开始实现一个简单手机端app。 App由三个页面组成, 分别用作浏览列表, 查看详细信息，增加/修改条目。

使用组织账户登录Make a Power App.
在Home选项卡, 选择Canvas app from blank来创建一个blank app.
在blank app中, 选择Data选项卡, 单击Add data来连接数据源, 我们使用Ondrive for Business中的Excel表格文件作为数据源.

Power Apps会在Excel表格文件的最后一列添加Power Apps中的唯一标识，在后续修改Excel文件时，这列标识不要改动。

使用Gallery实现BrowseScreen

在Tree view中, 将第一个Screen重命名为BrowseScreen.
选择Insert按钮, 选择Gallery, 选择Vertial控件.
在Tree view中, 将新添加的Gallery1重命名为BrowseGallery.
选中BrowseGallery, 在Gallery属性框中, 添加Data source, 将Excel中的Table1作为Gallery数据源.
选中BrowseGallery, 在Gallery属性框中, 选中Edit Fields.
在Data属性框中, 为Title和Subtitle指定相应的数据列.

选择Inseart按钮, 选择Icons, 选择Rectangle控件.
在BrowseScreen中, 将Rectangle控件调整到合适大小并放置到页面最顶端, 可以通过属性框中的Position和Size进行微调.
使用蓝色填充Rectangle的Color属性.
这样，BrowseScreen的Navigation Bar就做好了.
适当调整BrowseGallery与Navigation Bar的相对位置.

使用Form控件实现DetailScreen

在菜单栏，选择New screen, 选择Blank.
在Tree view中, 将新添加的Screen重命名为DetailScreen.
选择Insert按钮, 选择Forms, 选择Edit.
在Tree view中, 将新添加的Form重命名为ViewItemForm.
选择ViewItemForm, 在ViewItemForm的属性窗口中, 设置Data source为Table1.
在ViewItemForm的属性窗口中, 选择Edit fields.
在Fields窗口中, 选择Add field按钮,将Excel表格中的所有列名选中, 并点击Add按钮.
在ViewItemForm的属性窗口中, 将Default mode设置为View.
在页面顶部, 确保Item属性被选中, 添加以下功能：
```
 BrowseGallery.Selected
```
将在BrowseScreen中添加的Navigation Bar复制到DetailScreen.
适当调整ViewItemForm与Navigation Bar的相对位置.

使用Form控件实现EditScreen

选择New screen, 选中Blank.
在Tree view中, 将新添加的Screen重命名为EditScreen.
选择Insert按钮, 选择Forms, 选择Edit.
在Tree view中, 将新添加的Form重命名为EditItemForm.
选择EditItemForm, 在EditItemForm属性窗口中, 设置Data source为Table1.
在EidtItemForm的属性窗口中, 选择Edit fields.
在Fields窗口中, 选择Add field按钮,将Excel表格中的所有列名选中,并点击Add按钮.
在EditItemForm属性窗口中,将Default mode设置为Edit.
在页面顶部, 确保Item属性被选中, 添加以下功能：
```
 BrowseGallery.Selected
```
将在BrowseScreen中添加的Navigation Bar复制到EditScreen.
适当调整EditItemForm与Navigation Bar的相对位置.

添加BrowseScreen与DetailScreen之间的跳转逻辑

在Tree view中, 选中BrowseGallery控件, 选中NextArrow图标.
在页面顶部, 确保在Onselect事件中,添加以下功能：
```
 Navigate(DetailScreen,ScreenTransition.CoverRight)
```
在Tree view中, 选择DetailScreen.
选择Insert, 选择Icons, 选择Left.
将Left icon拖动到Navigation Bar的左上角.
选中Left icon图标, 在页面顶部, 确保在Onselect事件中,添加以下功能：
```
 Navigate(BrowseScreen,ScreenTransition.CoverRight)
```

在DetailScreen添加Remove按钮

在Tree view中, 选择DetailScreen.
选择Insert, 选择Icons, 选择Trash.
将新添加的Trash icon拖动到Navigation Bar的相应位置.
选择Trash icon.

在页面顶部, 确保在OnSelect事件中, 添加以下功能：

 Remove(Table1,BrowseGallery.Selected);If (IsEmpty(Errors(Table1,BrowseGallery.Selected)),Back())

在DetailScreen中添加Edit按钮

在Tree view中, 选择DetailScreen.
选择Insert, 选择Icons, 选择Edit.
将新添加的Edit icon拖动到Navigation Bar的相应位置.
选择Edit icon.
在页面顶部, 确保在OnSelect事件中, 添加以下功能：
```
 EditForm(EditItemForm);Navigate(EditScreen,FormPattern.None)
```

在EditScreen中添加Save按钮

在Tree view中, 选择EditScreen.
选择Insert, 选择Icons, 选择Save.
将新添加的Save icon拖动到Navigation Bar的相应位置.
选择Save icon.
在页面顶部, 确保在OnSelect事件中, 添加以下功能：
```
 SubmitForm(EditItemForm)
```

在EditScreen中添加Cancel按钮

在Tree view中, 选择EditScreen.
选择Insert, 选择Icons, 选择Cancel.
将新添加的Cancel icon拖动到Navigation Bar的相应位置.
选择Cancel icon.

在页面顶部,确保在OnSelect事件中,添加以下功能：

 ResetForm(EditItemForm);Navigate(DetailScreen,ScreenTransition.CoverRight)

在BrowseScreen中添加Add按钮

在Tree view中, 选择BrowseScreen.
选择Insert, 选择Icons, 选择Add.
将新添加的Add icon拖动到Navigation Bar的相应位置.
选择Add icon.
在页面顶部, 确保在OnSelect事件中, 添加以下功能：
```
 NewForm(EditItemForm);Navigate(EditScreen,None)
```

修改EditScreen和DetailScreen中的Fx支持Add功能

需求：当在EditScreen中新增一个Item时, 点击Save按钮以后, 页面期望导航到DetailScreen并在ViewItemForm中显示新添加的Item，而不是显示BrowseGallery中选中的Item.

在Tree view中, 选择EditItemForm.
在页面顶部, 确保在OnSuccess事件中, 添加以下功能：
```
 Set(varLastSubmit, EditItemForm.LastSubmit);Navigate(DetailScreen, ScreenTransition.None)
```
在DetailScreen中修改ViewItemForm的Item属性
在Tree view中, 选择ViewItemForm.
在页面顶部, 确保在Item属性中, 将属性从BrowseGallery.Selected修改为：
```
If(!IsBlank(varLastSubmit), varLastSubmit, BrowseGallery.Selected)
```