测试 Azure 托管应用程序的门户接口Test your portal interface for Azure Managed Applications

为托管应用程序创建 createUiDefinition.json 文件之后,需要测试用户体验。After creating the createUiDefinition.json file for your managed application, you need to test the user experience. 为了简化测试,请使用一个可在门户中加载文件的沙盒环境。To simplify testing, use a sandbox environment that loads your file in the portal. 不需要真正部署该托管应用程序。You don't need to actually deploy your managed application. 沙盒在当前的全屏门户体验中提供用户界面。The sandbox presents your user interface in the current, full-screen portal experience. 也可使用脚本来测试接口。Or, you can use a script for testing the interface. 本文对这两种方法都进行了介绍。Both approaches are shown in this article. 建议使用沙盒来预览接口。The sandbox is the recommended way to preview the interface.

必备条件Prerequisites

  • 一个 createUiDefinition.json 文件。A createUiDefinition.json file. 如果没有此文件,请复制示例文件If you don't have this file, copy the sample file.

  • Azure 订阅。An Azure subscription. 如果没有 Azure 订阅,请在开始前创建一个试用帐户If you don't have an Azure subscription, create a trial account before you begin.

使用沙盒Use sandbox

  1. 打开创建 UI 定义沙箱Open the Create UI Definition Sandbox.

    显示沙盒

  2. 将空定义替换为 createUiDefinition.json 文件的内容。Replace the empty definition with the contents of your createUiDefinition.json file. 选择“预览” 。Select Preview.

    选择“预览”

  3. 此时会显示已创建的窗体。The form you created is displayed. 可以单步执行用户体验,并填写值。You can step through the user experience and fill in the values.

    显示窗体

故障排除Troubleshooting

如果在选择“预览” 后窗体未显示,则可能存在语法错误。If your form doesn't display after selecting Preview, you may have a syntax error. 在右侧滚动条上查找红色指示器,然后导航到它。Look for the red indicator on the right scroll bar and navigate to it.

显示语法错误

如果窗体未显示,但看到一个带泪滴的云图标,则表明窗体出现错误,例如缺少属性。If your form doesn't display, and instead you see an icon of a cloud with tear drop, your form has an error, such as a missing property. 在浏览器中打开“Web 开发人员工具”。Open the Web Developer Tools in your browser. “控制台”显示有关界面的重要消息。 The Console displays important messages about your interface.

显示错误

使用测试脚本Use test script

若要在门户中测试界面,请将以下脚本之一复制到本地计算机:To test your interface in the portal, copy one of the following scripts to your local machine:

若要在门户中查看界面文件,请运行已下载的脚本。To see your interface file in the portal, run your downloaded script. 该脚本在 Azure 订阅中创建一个存储帐户,并将 createUiDefinition.json 文件上传到该存储帐户。The script creates a storage account in your Azure subscription, and uploads your createUiDefinition.json file to the storage account. 在你第一次运行脚本时会创建此存储帐户,如果此存储帐户已删除,运行该脚本也会创建此存储帐户。The storage account is created the first time you run the script or if the storage account has been deleted. 如果 Azure 订阅中已存在存储帐户,则该脚本会重复使用它。If the storage account already exists in your Azure subscription, the script reuses it. 该脚本将打开门户并从存储帐户加载文件。The script opens the portal and loads your file from the storage account.

提供存储帐户的位置,并指定包含 createUiDefinition.json 文件的文件夹。Provide a location for the storage account, and specify the folder that has your createUiDefinition.json file.

对于 PowerShell,请使用:For PowerShell, use:

.\SideLoad-AzCreateUIDefinition.ps1 `
  -StorageResourceGroupLocation chinaeast `
  -ArtifactsStagingDirectory .\100-Marketplace-Sample

对于 Azure CLI,请使用:For Azure CLI, use:

./sideload-createuidef.sh \
  -l chinaeast \
  -a .\100-Marketplace-Sample

如果 createUiDefinition.json 文件与该脚本位于同一文件夹中,并且你已创建了存储帐户,则无需提供这些参数。If your createUiDefinition.json file is in the same folder as the script, and you've already created the storage account, you don't need to provide those parameters.

对于 PowerShell,请使用:For PowerShell, use:

.\SideLoad-AzCreateUIDefinition.ps1

对于 Azure CLI,请使用:For Azure CLI, use:

./sideload-createuidef.sh

脚本会在浏览器中打开新选项卡。The script opens a new tab in your browser. 浏览器中会显示门户,其中包含用于创建托管应用程序的界面。It displays the portal with your interface for creating the managed application.

提供字段值。Provide values for the fields. 完成后,会看到这些值已传递到模板(可以在浏览器的开发人员工具控制台中找到)。When finished, you see the values that are passed to the template which can be found in your browser's developer tools console.

显示值

你可以使用这些值作为参数文件来测试部署模板。You can use these values as the parameter file for testing your deployment template.

如果门户在摘要屏幕上挂起,则输出部分可能存在 Bug。If the portal hangs at the summary screen, there might be a bug in the output section. 例如,你可能引用了不存在的控件。For example, you may have referenced a control that doesn't exist. 如果输出中的某个参数为空,则该参数可能引用了不存在的属性。If a parameter in the output is empty, the parameter might be referencing a property that doesn't exist. 例如,对控件的引用有效,但属性引用无效。For example, the reference to the control is valid, but the property reference isn't valid.

测试解决方案文件Test your solution files

确认门户界面按预期方式工作后,可以验证 createUiDefinition 文件是否能够正常地与 mainTemplate.json 文件相集成。Now that you've verified your portal interface is working as expected, it's time to validate that your createUiDefinition file is properly integrated with your mainTemplate.json file. 可以运行验证脚本测试来测试解决方案文件的内容,包括 createUiDefinition 文件。You can run a validation script test to test the content of your solution files, including the createUiDefinition file. 该脚本会验证 JSON 语法,检查文本字段中的正则表达式,并确保门户界面的输出值与模板参数相匹配。The script validates the JSON syntax, checks for regex expressions on text fields, and makes sure the output values of the portal interface match the parameters of your template. 有关运行此脚本的信息,请参阅对模板运行静态验证检查For information on running this script, see Run static validation checks for templates.

后续步骤Next steps

验证门户界面之后,请了解如何在市场中提供 Azure 托管应用程序After validating your portal interface, learn about making your Azure managed application available in the Marketplace.