在表单操作中嵌入对象

您可以将表单操作设计为显示图像或 PDF 文件，使用徽标和图标简单地自定义外观，或者提供可帮助 Action Center 用户完成操作的材料。

This feature is available with the Create Form Task activity only.

要嵌入对象，您可以使用“创建表单任务”活动的“存储”部分下的属性链接到存储桶，并使用“上传存储文件”活动添加文件。

您可以嵌入存储桶支持的任何类型的对象。

下面的视频显示了嵌入的 PDF 文件在 Action Center 中的行为方式：

先决条件

要使用在表单操作中嵌入对象的功能，用户需要以下权限：

用户类型	权限
Action Center user	This user needs the following permissions at folder level: View for Storage Bucket and View for Storage File.
Robot user	This user needs the following permissions at folder level: View and Edit for Storage Bucket, and View and Create for Storage File.

嵌入存储桶中的图像

为了让您的 Action Center 用户体验到更好的性能，我们建议您嵌入先前已上传到存储桶的图像 。

要在表单操作中嵌入图像，请执行以下操作：

1. Use activities, such as the Upload Storage File activity, to upload the image to the storage bucket that is used by the Create Form Task activity. As part of this step, create a String variable to store the path where the file is uploaded, for example imagePath.
   重要提示：

   上传的存储桶会将+符号转换为空格，这可能会导致表单呈现期间出现错误。

2. In the Create Form Task activity, click the ellipsis (...) to the right of FormData and add an argument with the _storage keyword as a suffix:
   • 名称: image_storage。
   • Direction: In.
   • Type: String.
   • 值: imagePath。
   备注：

   The _storage keyword is used to indicate that this is an object that is available in the activity's storage bucket. For the value, we added the variable where we stored the path to the uploaded image.

   提示：

   For images smaller than 2 KB, such as logos or icons, you can skip this step. In the following step where the image_storage argument is used, use the imagePath variable instead.

3. Add an HTML Element component and configure it as follows:
   • HTML Tag: div.
   • Content: <img src="{{ data.image_storage }}" />. This maps the storage file argument to the form component. Using the <img> tag displays the image in the form. Alternatively, you can use <a src="{{ data.image_storage }}" target=_blank> to add a link that opens the image in a new window.
   • Refresh On Change: selected.
   备注：

   可以通过在<a href="https://link-to-file"></a>标签中引用特定文件来添加指向特定文件的链接。您可以忽略“内容”字段中出现的任何验证错误，它们不会影响表单在运行时呈现。

重要提示：

TIFF files are not supported inside Form Actions. As an alternative, try the following:

• 在您正在使用的工作流中使用自定义活动，将 TIFF 文件转换为 JPEG 或 PNG ，然后再将其上传到存储桶。
• 使用 <href> 标签引用存储桶中的文件。

示例工作流

要按照本教程的步骤操作并自行尝试，请下载示例工作流。

从存储桶嵌入 PDF 文件

常规表单与高级表单嵌入存储桶中的 PDF 文件的方式不同。高级表单提供了改进的呈现性能和组件及其逻辑的高级用法。您可以通过在“创建表单任务”活动中选择“启用高级表单”来创建高级表单。

常规表单

您还可以将已上传到存储桶的 PDF 文件添加到表单操作中，以便 Action Center 用户可以对其进行审核。

要在常规表单任务中嵌入 PDF，请执行以下操作：

1. Use activities, such as the Upload Storage File activity, to upload the PDF file to the storage bucket that is used by the Create Form Task activity. As part of this step, create a String variable to store the path where the file is uploaded, for example docPath.
2. In the Create Form Task activity, click the ellipsis (...) to the right of FormData and add an argument with the _storage keyword as a suffix:
   • 名称: doc_storage。
   • Direction: In.
   • Type: String.
   • 值: docPath。
     重要提示：

     _storage关键字用于表明这是活动存储桶中可用的对象。对于值，我们添加了变量，用于存储已上传 PDF 文件的路径。

3. Add an HTML Element component to the form and specify the following:
   • HTML Tag: div.
   • Content: <embed src={{ data.doc_storage }} width="600px" height="500px"></embed>.
   • Refresh On Change: cleared.
4. Save your changes and close the component window, to return to the Form Designer window.
5. 单击“编辑 JSON” “HTML 元素”图标 。
6. Under the Component JSON, search for "refreshOn" and set its value to the form data attribute, so that you have "refreshOn": "doc_storage".
7. 确保为 _storage 字段自动生成的文本在表单中可用。 可以将其标记为隐藏字段。
   重要提示：

   如果您使用UiPath.FormActivitiyLibrary v1.1.10请注意， “组件 JSON”没有列出"refreshOn"选项。但是，您可以按照上述手动添加"refreshOn"键并设置其值。

单击此处下载此示例。

高级表单

要在高级表单任务中嵌入 PDF，请执行以下操作：

1. 使用活动（例如“上传存储文件”活动），将 PDF 文件上传到“创建表单任务”活动使用的存储桶。在“上传存储文件”活动的“路径”字段中指定文件的路径。在此示例中，输入sample.pdf 。
2. 在“创建表单任务”活动中，单击“表单数据”右侧的省略号 ( ... )，然后添加具有以下配置的参数：
   • 键： pdf 。
   • Direction: In.
   • Type: String.
   • 值: "sample.pdf"。
3. 在表单中添加一个PDF组件，并指定先前添加的参数的名称作为 “属性名称” 。在此示例中，请指定pdf 。
4. Save your changes and close the component window, to return to the Form Designer window.

单击此处下载此示例。