Power Apps Excel风格可编辑表格 – 第1部分

大家好，我是阿波，一个不会描述只会给详细实现方式的创作者。每天进步一点点，关注我的微信公众号【创界Power工坊】，获取更多Power Apps开发技术知识！

Excel是全球最受欢迎的商业应用。所有在办公室工作的人都了解这个应用是什么，也知道如何使用它的基础。加入一个可编辑的表格设计类似Excel电子表格，是许多Power Apps的极佳补充。它为用户提供了高效的数据录入方式，并让他们对已经熟悉的概念感到熟悉。遗憾的是，Power Apps 没有内置此功能。在这个两部分系列中，我将向你展示如何在 PowerApps 中构建一个类似 Excel 风格的可编辑表格。第一部分将教你如何设置表格、编辑数值以及将更改保存回数据源。第二部分将重点介绍如何添加新记录和删除现有记录。

库存盘点应用

库存盘点应用被家居建材店员工用来记录该企业拥有的每件产品的实际数量。一名员工点击“新建”按钮，将多个项目的信息记录到表格中，完成后点击保存。如果需要更正，可以编辑或删除该项。

创建一个名为“库存计数”的新SharePoint列表，包含4列：ItemNumber（文本）、Description（文本）、数量（编号）和位置（文本）。

打开 Power Apps，从空白创建一个新的 Canvas 应用，名为 Inventory Count App。在画布上插入一个名为 gal_EditableTable 的画廊，数据源是“Inventory Count”的 SharePoint 列表。然后在画廊中放置4个文本输入控件，分别名为txt_ItemNumber、txt_Description、txt_Quantity和txt_Location，并在它们的默认属性中使用这些代码：ThisItem.ItemNumber、ThisItem.Description、ThisItem.Quantity、ThisItem.Location。 应用现在看起来就像下面展示的图片。

现在我们将着手设计画廊，使其看起来像可编辑的表格。更改 gal_EditableTable 以实现这些属性

TemplatePadding: 0TemplateSize: 40Code language:HTTP(http)

然后将txt_ItemNumber、txt_Description、txt_Quantity和txt_Location调整以反映这些属性。

BorderColor: DarkGrayBorderThickness: 1Color: BlackFill: WhiteFocusedBorderColor: Self.BorderColorFocusedBorderThickness: Self.BorderThicknessHoverBorderColor: Self.BorderColorHoverColor: Self.ColorHoverFill: RGBA(186, 202, 226, 1)PressedBorderColor: Self.BorderColorPressedColor: Self.ColorPressedFill: Self.FillRadiusBottomLeft: 0RadiusBottomRight: 0RadiusTopLeft: 0RadiusTopRight: 0Code language:HTTP(http)

样式调整完成后，画廊看起来就像一个可编辑的表格。

作为最后的细节，我们将在画廊上方添加一个带有列头名称的标签。把标签的填充属性设置为与你应用主题相匹配的颜色，并将字体粗大设置为加粗。我们的画廊现在看起来像一个Excel表格。

检测编辑行

员工需要能够编辑表格中的数值并将其保存回SharePoint列表。为了确保应用性能最佳，我们只想更新已更改的记录。我们会通过在画廊右侧插入一个名为tog_isChanged的开关来跟踪。

把这段代码放在开关的默认属性里，以控制它的行为。

ThisItem.ItemNumber<>txt_ItemNumber.TextOrThisItem.Description<>txt_Description.TextOrThisItem.Quantity<>Value(txt_Quantity.Text)OrThisItem.Location<>txt_Location.TextCode language:CSS(css)

试着在表格中更改几个值，以了解切换是如何工作的。当切换处于“开”位置时，表示该行被修改过。“关闭”位置告诉我们该行保持未编辑状态。

一旦确认切换正常工作，我们可以通过将可见属性改为虚假来隐藏它。员工不需要看到切换开关。

编辑表格和保存更改

最初，表格应处于仅视图状态。员工会点击编辑按钮，使画廊可编辑。在画廊上方放置一个“编辑”图标和带有“编辑”字样的标签。

将这段代码放入ico_Edit和lbl_Edit的以下属性中

OnSelect: Set(varGalleryMode, "Edit")Visible: varGalleryMode=Blank()Code language:JavaScript(javascript)

然后在文本输入控件的 DisplayMode 属性中使用这段代码：txt_ItemNumber、txt_Description、txt_Quantity 和 txt_Location。

If(varGalleryMode="Edit", DisplayMode.Edit,DisplayMode.View)Code language:JavaScript(javascript)

现在当我们点击编辑按钮时，画廊会从“查看”模式切换到“编辑”模式。

接下来我们会添加另外两对图标和标签，分别是“保存”和“取消”。

它们只应该在画廊处于“编辑”模式时出现。把这个代码放进图标和标签的Visible属性里。

varGalleryMode = "Edit"Code language:JavaScript(javascript)

当员工点击“保存”时，任何更改都应写回SharePoint列表。我们将创建一个名为colUpdates的集合来存储修改后的记录。第一步是通过将该代码放入应用的 OnStart 属性中来定义集合模式。

ClearCollect(colUpdates,{ID: 1,    ItemNumber: "A",    Description:"A",    Quantity: 1,    Location:"A"});Clear(colUpdates);Code language:CSS(css)

然后将这个代码插入保存图标的OnSelect属性及其关联标签中。它会在画廊中循环查找任何更改的记录，将其存储在 colUpdates 集合中，然后同时将多行修丁到 SharePoint，以实现最佳性能。

// Create a collection to store updated valuesForAll(    Filter(        gal_EditableTable.AllItems,        tog_isChanged.Value    ) As ChangedRows,    Patch(colUpdates,    Defaults(colUpdates), {ID: ChangedRows.ID,ItemNumber: ChangedRows.txt_ItemNumber.Text,Description: ChangedRows.txt_Description.Text,Quantity: Value(ChangedRows.txt_Quantity.Text),Location: ChangedRows.txt_Location.Text    }));// Update SharePoint with new valuesPatch('Inventory Count', colUpdates);Clear(colUpdates);// Return gallery to view modeSet(varGalleryMode, Blank());Code language:JavaScript(javascript)

一旦 SharePoint 列表更新，画廊会恢复为“仅查看”模式。

取消变更

最后，我们希望允许员工在不保存任何更改的情况下返回“查看”模式。把这个代码放在取消图标和标签的OnSelect属性里。

// Reset text inputs to erase any edits madeSet(varResetTextInputs, true); Set(varResetTextInputs, false);// Clear any changes from colUpdatesClear(colUpdates);// Return gallery to view modeSet(varGalleryMode, Blank());Code language:JavaScript(javascript)

然后将代码写入txt_ItemNumber、txt_Description、txt_Quantity和txt_Location的重置属性。

varResetTextInputs

点击取消图标后，所有记录都会被重置并显示原始值。

以上就是本次的全部内容，如果对你有帮助，如未实现如图所示效果，可留言；麻烦点一点 在看+点赞+分享，你的支持就是作者更新最大的动力！

                     你喜欢这篇文章吗？转发在看就是最大的支持❤️