练习 - 生成自行车修理店画布应用

已完成

在本练习中,您将运用所学知识基于在练习 - 使用 Figma 设计一个自行车修理店应用单元中生成的设计完成画布应用的创建流程。

应用场景

您想要为同事创建一个基于 Figma 设计的画布应用。 构建的应用可以让同事使用专用平板电脑登记 VIP 销售活动的潜在参与者,以及收集参与者的偏好信息。

您将使用 Microsoft Excel 电子表格捕获参与者信息,方便营销团队在活动前后联系客户。

准备步骤

按照基于 Figma 设计创建画布应用单元中的步骤使用已构建的自行车修理店设计。 在第 11 步中,您可以将应用命名为 Bicycle VIP Event

下载 Bicycle VIP registration.xlsx Excel 电子表格文件。 此文件就是应用的数据源。 将其保存到有权访问的 Microsoft OneDrive for Business 位置。

命名为“Bicycle VIP registration”的 Microsoft Excel 电子表格的屏幕截图。

练习

完成以下步骤,创建画布应用,以将注册信息存储在 Bicycle VIP registration 电子表格中:

  1. 连接到数据源,然后在 Power Apps 画布工作室左侧窗格的数据部分下,选择添加数据

    Power Apps 画布工作室的屏幕截图。图中突出显示了左侧导航窗格“数据”部分中的“添加数据”选项。

  2. 选择 Excel Online (Business) 作为数据源。

    Power Apps 画布工作室的屏幕截图。图中突出显示了 Excel Online Business 数据源。

  3. 选择连接

    Power Apps 画布工作室的屏幕截图。图中突出显示了 Excel Online Business 数据源的“连接”选项。

  4. 转到您在准备步骤部分保存 Bicycle VIP registration 电子表格的位置,然后选中电子表格。

    Power Apps 画布工作室的屏幕截图。图中突出显示了 Bicycle VIP registration Excel 文件。

  5. 选择注册表,然后选择连接

    Power Apps 画布工作室的屏幕截图。图中突出显示了“注册”表和“连接”按钮。

  6. 选择使用 Excel 表中的唯一列选项作为“注册”的标识符,再选择 _PowerAppsId_连接

    Power Apps 画布工作室的屏幕截图。图中突出显示了 Power Apps ID 和“使用 Excel 表中的唯一列”选项。

  7. 要将 msft_Form 控件连接到数据源,请将 DataSource 属性更新为 Registrations

    Power Apps 画布工作室的屏幕截图。图中突出显示了 DataSource 属性设置为“Registrations”。

  8. 为确保控件可以在后续步骤中得到正确识别,请重命名数据卡片和输入组件。

    Power Apps 画布工作室的屏幕截图。图中突出显示了数据卡片控件的“重命名”。

    结果应类似于下图。

    Power Apps 画布工作室的屏幕截图。图中突出显示了已重命名的组件。

  9. 要将数据卡片连接到 Excel 表格中的列,请为每个数据卡片控件的 DataField 属性提供列名称(包括引号)。

    • PreferencesDC - "Preference"

    • PhoneDC - "Phone"

    • CustomerEmailDC - "Email"

    • CustomerNameDC - "Name"

    Power Apps 画布工作室的屏幕截图。图中突出显示了 PreferencesDC 的“DataField”属性和“Preference”属性值。

  10. 要将应用中的值插入 Excel 表,请为每个数据卡片控件的 Update 属性提供输入控件文本属性。

    • PreferencesDC - PreferencesInput.SelectedText.Value

    • PhoneDC - PhoneInput.Text

    • CustomerEmailDC - CustomerEmailInput.Text

    • CustomerNameDC - CustomerNameInput.Text

    Power Apps 画布工作室的屏幕截图。图中突出显示了 PreferencesDC 的“Update”属性和“PreferencesInput.SelectedText.Value”属性值。

  11. 要将值保存到 Excel 电子表格并将画布应用窗体重置为数据输入模式,请将提交按钮的 OnSelect 属性设置为 SubmitForm(msft_Form); NewForm(msft_Form);

    Power Apps 画布工作室的屏幕截图。图中突出显示了 msft_Button 的“On Select”属性。

现在,您得到了一个完整的应用,客户可以使用该应用来注册即将举行的 VIP 销售活动。 要测试应用,请选择保存播放图标。 要将应用共享给同事,请选择共享图标。

Power Apps 画布工作室的屏幕截图。图中突出显示了“共享”、“播放”和“保存”图标。

以下视频演示了本单元的步骤。

后续步骤

现在,您已了解了如何创建基于 Figma 设计的画布应用。 此应用已连接到数据源,您和同事可以使用它登记 VIP 销售活动的客户信息和偏好。 接下来,您可以验证一下在本模块中学习的相关知识。