探索画布应用中的控件和屏幕

已完成

在本单元中,我们将探讨已添加到应用中的控件(库和窗体),还要向应用添加一些屏幕,为下一个单元做好准备。

Power Apps 中的控件

控件是生成操作或显示信息的 UI 元素。 Power Apps 中的许多控件与您在其他应用中使用过的控件大同小异:标签、文本输入框、下拉列表和导航元素等。

除了这些典型控件外,Power Apps 还提供更专门用途控件,位于 + 插入按钮上,其中提供一个搜索字段,用于帮助您查找所需内容。

可用于增添应用的趣味性和影响力的一些控件包括:

  • - 布局容器控件,其中包含一组显示数据源中的记录的控件。

  • 窗体 - 此类控件显示有关您的数据的详细信息,并允许您创建和编辑记录。

  • Media - 此类控件允许您添加背景图像,包括相机按钮(以便用户可以通过应用拍摄图片)、条形码读取器(用于快速捕获标识信息)等。

  • 图表 - 此类控件允许您添加图表(包括 Power BI 数据),以便用户即时分析数据。

要查看哪些控件可用,请选择 + 插入选项卡,然后展开各个字段。 在此过程中,您会看到搜索字段实用工具,它可以帮助您快速找到要查找的内容。 不妨尝试在搜索字段中输入一些值以了解其行为。

在屏幕上的库内部,应该能够看到各种不同控件。 控件类型的名称左侧有一个图标,用于指示其控件类型。 请注意,您可以看到两个形状控件:一个矩形和一个分隔符。 继续操作,在树视图中选择矩形控件。 您会发现,它默认显示 OnSelect 属性,即“Select(Parent)”。 如果没有为任何此类库控件指定其他 OnSelect 属性,它们都将默认使用 Select(Parent),也就是说,选择该控件即会选择库本身。

现在,选择控件(而不是其中的标签或形状,您可能需要在树视图中查找)并查看 OnSelect 属性。 当前设置为 false,在定义操作之前,选择库中的任何控件都不会执行任何操作。

树视图中的库中重新选择矩形控件。 现在,选择公式 (fx) 输入字段左侧的下拉列表值,转到 Visible 属性。 请注意,控件的所有可用属性均位于可滚动列表中,方便您轻松查找/选择 Visible 属性。 Visible 属性是每个控件都具备的属性。 请注意,此控件的公式字段中为 ThisItem.IsSelected

库控件和属性的屏幕截图。

IsSelected 是一个布尔值,计算结果为“true”或“false”,表示此项在库中是否已选中。 任何情况下,都只能从库中选择一项,因此项对应的此值只能为“true”。 将应用置于预览模式。 尝试选择若干不同的咖啡机,查看“矩形”控件是否仅会显示在您选择的咖啡机上。 可见矩形还对应着库旁边窗体中显示的项。

其他醒目控件还有分隔符,这也是一个矩形,但始终可见(当前为白色,因此不会显示在白色屏幕上);还有一个名为“NextArrow1”的图标,当前仅用于从库中选择父项;以及一个图像控件。 假设我们想要将 NextArrow1 更改为编辑铅笔,以向用户指示他们必须按下控件才能编辑咖啡机。 如前所述,标题栏会显示所选控件的部分可更改属性, 只要选择标头中的“图标”下拉按钮,您就能看到“操作”下显示的“编辑”铅笔图标。 继续操作,将其选中,将向右键更改为“编辑”图标。

我们来简单讨论一下图像控件。 由于已经在您的数据中定义了图像字段,因此 Power Apps 能够从数据中分辨出此字段的内容。 如果要在此处显示其他图像,则可以将其放入此控件的 Image 属性中。 例如,如果某个项的图像字段中缺失图像,则可以使用公式检查图像字段是否为空,如果是,则显示其他图像。 图像字段只需要一个图像。

我们之前已经学习了标签,接下来,我们继续学习窗体中的控件。

窗体控件和属性

我们来快速介绍一下窗体的两个最重要属性。 DataSource 是连接到窗体的数据表。 此表非常重要,因为窗体更新时需要了解数据的写入位置。 另一个重要属性是 Item。 于我们的应用而言,这里的项就是从我们库中选择的项。

在窗体内,选择一个字段时,该字段就会描述为树视图中的 DataCard。 请注意,每个 DataCard 均包含四种不同控件。 DataCard 中有两个至关重要的控件,一个标签控件,其中最初包含 DataCardKey 名称,另一个是文本输入控件,最初包含 DataCardValue 名称。 其他两个控件为可选,取决于是否需要数据。 StarVisible 是一个带有星号的文本标签,只要将此字段指定为必填(无论是在窗体中,还是在数据中),该标签就会显示出来。 ErrorMessage 是尝试提交窗体但输入缺失时显示的另一个文本标签。 您可以查看这些控件的 Visible 属性。 Visible 评估结果为:“true”或“false”。 您将在 StarVisible 控件中看到 And() 函数,其意思是,用逗号分隔的两个条件必须同时为 true,函数才能评估为“true”。

窗体控件内的许多属性不可更改,除非您有充分理由“解锁”卡片。 尽管窗体控件的目的在于简化数据输入,但它对于设计目的而言不够灵活。 如果要从现有窗体中添加或删除字段,我们的控件会自动调整大小,而且我们也将丢失所做的编辑(请记住“Product Summary”文本输入)。 在未来的学习中,我们将了解有关自定义数据输入的更多信息,但是暂时不对自定义窗体卡片进行过多解释。

对于我们的咖啡机窗体数据,唯一的非文本输入控件位于 ImageDataCard 中。 请注意,除我们之前了解的四个控件(添加图片控件)之外,此卡片还提供一个额外的控件。 添加图片控件是一种媒体控件,允许您从设备(或在线位置)选择图像来替换现有图像。 “点击或选择添加图片”时,您会看到一个打开弹出窗口,我们可以在其中选择图像文件,然后在窗体中打开该图像。

对于每个数据卡片,需要注意以下两个重要属性:Default 属性和 Update 属性。 Default 属性用于说明数据中为卡片提供默认值的列。 Update 属性用于说明 Power Apps 使用哪个输入控件的数据来更新记录中的数据。

选择 Product Summary 卡片,仅选择该卡片,而不选择卡片中的文本输入字段。 请注意,卡片的默认值为 ThisItem.'Product Summary',这是您在 DataCardValue 文本输入字段中看到的值。 切换到卡片的 Update 属性,留意卡片从 DataCardValue.Text 接收的更新信息。 因此,提交窗体时,Power Apps 会获取文本输入字段中写入的所有内容并更新该项的“Product Summary”。

只要添加的控件可以提供数据源所需的数据类型,就可以在卡片中解锁和添加其他控件,以及更改卡片的 Update 属性!

最后,我们必须为 Power Apps 提供 SubmitForm 命令,使其保存我们在窗体中输入的任何更改。 在我们的案例中,窗体下方显示的“保存更改”按钮就可以达到这个目的。 请注意,如果选择了该按钮(在编辑模式下),OnSelect 属性会显示为 SubmitForm(Form1),这可以获取每个更新的窗体卡片并将其写回我们的数据源。

添加屏幕

截至目前,我们的应用只有一个屏幕。 在接下来的两个单元中,我们将继续自定义应用,同时添加更多功能。 请按照以下过程将屏幕添加到您的应用:

  1. 树视图面板中选择 Screen1,然后从命令栏或树视图面板顶部选择新建屏幕按钮,接着选择空白屏幕模板。

  2. 重复上述步骤,添加第三个屏幕。

  3. 下面,我们对三个屏幕进行重命名。 为此,请双击树视图面板中的 Screen1 并将其重命名为“Catalog Screen”。

  4. 重复此流程,将 Screen2 重命名为“Home Screen”,将 Screen3 重命名为“Admin Screen”。

  5. 最后,我们重新调整屏幕在“树视图”中的位置。 要执行此操作,您可以通过选择省略号按钮,然后选择上移命令。

现在,我们对库和窗体控件有了更加深入的了解,也了解了如何向应用添加屏幕,接下来,我们要继续修改应用以增强用户体验。