从图像创建画布应用

应用程序制作过程通常包括一个设计阶段,以规划应用程序的外观。 无论设计是基于现有的纸质表格、白板绘图还是传统应用程序的图像,从零开始构建应用程序都需要花费大量时间。

根据视觉设计创建应用,并通过几个简单的引导步骤将其连接到数据。

备注

  • 应用程序中各组件的样式,如字体和颜色,都是基于 Power Apps 中的 Office Blue 主题。
  • 如果您希望在创建应用时保留确切的设计样式,请考虑从 Figma 创建画布应用
  • Power Apps 不会保留您上传的图像。 上传的图像仅在内存中进行处理以生成应用。

先决条件

  • Power Apps 许可证。 如果没有 Power Apps 的许可证,您可以免费注册
  • 如果您使用的是自己的图像,则图像文件扩展名必须为 .jpg 或 .png,并且文件大小不得超过 4 MB。
  • 图片必须包含一个清晰可读的单页表单,背景颜色为浅色。 为获得最佳效果,请编辑您的图像,使其具有白色背景和高对比度。

创建应用

  1. 登录到 Power Apps

  2. 在主屏幕上,选择从页面设计开始

  3. 选择图像或 Figma 文件>从图像开始

  4. 查看建议的图像和提示的示例。 为提供最佳体验,请确保您的图像符合以下建议。 完成后,选择下一步

  5. 输入应用的名称。

  6. 上载您自己的图像。 如果没有准备好图片,请选择从样本图片开始,然后从可用的样本图片中选择一张。

    备注

    使用您自己的图像时,请确保图像满足图像要求中提到的图像要求。

    例如,以下是两个具有可接受和不可接受质量的示例图像:

    可接受质量 不可接受质量
    具有可接受质量的示例手绘图像。 具有不可接受质量的示例手绘图像。
  7. 根据图像的尺寸,系统会自动为您选择格式(平板电脑或手机)。 为获得最佳效果,建议您保留建议的格式。 使用建议格式可确保输入的图片与最终应用最匹配。 选择下一步

    提供图像名称、图像类型和布局。

  8. 您的图片会根据识别出的组件自动标记。 例如,在下面的示例图像中,显示“输入您的名字”的框被识别为 文本输入 控件。

    您可以通过选择并拖动以选择包含组件的区域来绘制新标记。 然后,选择要与新标记关联的组件类型。

    要对现有标记进行编辑或删除它,选择该标记。 然后,您可以为该标记分配不同的组件,或通过拖动角调整标记的维度来更改大小。 如果您想要删除标记,请选择删除标记

    通过选择标记或创建新标记,然后选择 tag 控件来设计应用的组件。

    小费

    选择屏幕右侧的指南选项卡,详细了解不同类型的组件以及如何准确标记每个组件。

    查看标记并确保每个组件都正确标记后,选择下一步

  9. 设置数据。 为获得最佳体验,我们建议您选择连接到 Dataverse 表,将应用程序连接到数据源。 如果您选择此选项并选择下一步,系统会引导您选择一个现有的 Dataverse 表,并将图片中的字段映射到该表中的列,或者在 Dataverse 中创建一个新表,并根据图片中的表单字段添加列。 您的应用程序包含一个连接到 Dataverse 表的表单组件。

    如果您不想连接到 Dataverse,请选择现在跳过。 如果您选择此选项并选择创建,您的应用程序将按原样创建,这意味着您在上一步中标记的组件将直接生成。 它们不会被放入表单组件中,您的应用程序也不会连接到数据。

    选择连接到 Dataverse,或者现在不创建表格而继续。

    如果选择跳过连接 Dataverse,请选择创建,应用程序将为您创建。 之后,您可以向您的应用添加数据连接,来将应用与您的数据相连接。

    备注

    如果您的环境中没有 Dataverse,则连接到 Dataverse 表的选项将被禁用。

  10. 如果选择连接 Dataverse 表,并选择创建新表或现有表,现在就可以编辑表格和列的详细信息。 根据图像中确定的表单字段,每个标签对应一个数据列。

    选择标记来修改列属性,如显示名称名称数据类型。 要删除现有列,选择标记,然后选择删除列

    设计表格、更改列及其属性。

    您可以通过绘制新标记并设置属性来添加数据列。 标记列时,大多数时候您将围绕以下两项绘制标记:标签和用户将数据输入到的地方,如文本输入。

    小费

    选择屏幕右侧的表属性查看和编辑新表的属性。

    选择下一步后,您将能够查看表和列结构。

    审核并确认表和列架构结构。

    完成审核后,选择创建创建应用。 创建应用程序可能需要一两分钟。

  11. 应用程序创建完成后,新应用程序将在 Power Apps Studio 中打开,您可以继续构建和自定义应用程序。

    应用程序已创建并在 Power Apps Studio 中打开,供您自定义。

    如果您选择在 Dataverse 中创建新表,您的表单将自动连接到您的新表。

    表已创建并添加到应用。

  12. 通过添加更多组件或修改样式属性,继续构建和自定义应用程序。

    以下是一些可让您的应用更上一层楼的常用的后续步骤:

    1. 向您的应用添加一个名为 Screen2新屏幕,并添加一个库来显示记录。 将库的数据源设置为您的新 Dataverse 表。
    2. 在包含您的表单的屏幕上,添加一个按钮(如果还没有)来提交表单数据。 将 OnSelect 属性的公式设置为 SubmitForm(Form1)
    3. 选择表单,然后选择屏幕右侧的高级选项卡,将属性 OnSuccess 设置为 Navigate(Screen2)。 这样,成功提交表单数据后,应用将导航到包含库的屏幕以显示记录。
    4. 选择屏幕右上角的播放预览您的应用。 填充表单,然后选择提交提交表单。 您的新记录将显示在库屏幕中。
  13. 保存并发布应用。

图像要求

  • 您要上传的图片的文件扩展名必须是 .jpg 或 .png。 如果您的设计图片有其他文件扩展名,请使用 .jpg 或 .png 文件扩展名保存图片文件,以便在此功能中使用。
  • 图像大小必须小于 4 MB。
  • 如果使用的是屏幕截图或数字草图,如果没有白色背景,请将背景改为浅色、纯色。
  • 如果您正在拍照,请使用更高的对比度或使其更亮。 确保要标记的部分清晰明亮。
  • 如果您使用相机或手机拍照,请使用更高的对比度来改善浅色背景。 使用任何可用的图片编辑应用程序编辑图片对比度。
  • 如果使用手绘图片,请尽量使用没有任何线条的白色素描垫。

限制

另请参见