フォーム アクションにオブジェクトを埋め込む

フォーム アクションを設計して、画像や PDF ファイルを表示させられます。ロゴやアイコンを使用して単に外観をカスタマイズしたり、Action Center のユーザーがアクションを完了するために役立つ資料を提供したりすることができます。

この機能は、[フォーム タスクを作成] アクティビティのみで使用できます。

オブジェクトを埋め込むには、[フォーム タスクを作成] アクティビティの [ストレージ] セクションのプロパティを使用してストレージ バケットへのリンクを設定し、[ストレージ ファイルをアップロード] アクティビティを使用してファイルを追加します。

ストレージ バケットがサポートするオブジェクトであれば、どのような種類のものでも埋め込むことができます。

以下のビデオで、Action Center での埋め込み PDF ファイルの動作をご覧ください。

前提条件

フォーム アクションにオブジェクトを埋め込む機能を使用するには、ユーザーに次の権限が必要です。

ユーザーの種類	権限
Action Center ユーザー	このユーザーには、フォルダー レベルで、ストレージ バケットの [表示] アクセス許可とストレージ ファイルの [表示] アクセス許可が必要です。
ロボット ユーザー	このユーザーには、フォルダー レベルで、ストレージ バケットの [表示] および [編集] アクセス許可と、ストレージ ファイルの [表示] および [作成] アクセス許可が必要です。

ストレージ バケットから画像を埋め込む

Action Center のユーザーがより優れたパフォーマンスを体験できるようにするため、ストレージ バケットにあらかじめアップロードされた画像を埋め込んでおくことをお勧めします。

フォーム アクションに画像を埋め込むには、以下の手順を実行します。

1. [ストレージ ファイルをアップロード] などのアクティビティを使用して、[フォーム タスクを作成] アクティビティで使用するストレージ バケットに画像をアップロードします。この手順の一部として、ファイルをアップロードするパスを格納する String 型変数を作成します (例: imagePath)。
   重要: ストレージ バケットへのアップロードでは + 符号が空白に変換されるため、フォームのレンダリング中にエラーが発生する場合があります。
2. [フォーム タスクを作成] アクティビティの [フォーム データ] の右にある三点リーダー (...) をクリックし、キーワード _storage がサフィックスとして付加された引数を追加します。
   • 名前: image_storage
   • 方向: 入力
   • 型: String
   • 値: imagePath
   注: キーワード _storage は、これがアクティビティのストレージ バケットで使用可能なオブジェクトであることを示すために使用します。値には、アップロードした画像へのパスを格納した変数を追加しました。
   ヒント: ロゴやアイコンなどの 2 KB より小さい画像については、この手順を省略できます。以降の手順の image_storage 引数を使用している部分で、代わりに imagePath 変数を使用します。
3. HTML 要素コンポーネントを追加し、次のように設定します。
   • HTML タグ: div。
   • コンテンツ: <img src="{{ data.image_storage }}" />これによって、ストレージ ファイルの引数が、フォーム コンポーネントにマッピングされます。<img> タグを使用すると、フォームに画像が表示されます。<a src="{{ data.image_storage }}" target=_blank> を使用して、新しいウィンドウで画像を開くためのリンクを追加することもできます。
   • 変更時に更新: 選択
   注: <a href="https://link-to-file"></a> タグで参照することで、特定のファイルへのリンクを追加できます。[コンテンツ] フィールドに何らかの検証エラーが表示されても無視して構いません。実行時のフォームのレンダリングには影響しません。

重要: TIFF ファイルはフォーム アクション内でサポートされません。これに代わる方法として、以下を試してください。

• 作業中のワークフロー内でカスタム アクティビティを使用して、TIFF ファイルを JPEG または PNG に変換してからストレージ バケットにアップロードする。
• ストレージ バケット内のファイルを、<href> タグを使用して参照します。

サンプル ワークフロー

このチュートリアルの手順に従ってご自身で試してみるには、こちらからサンプル ワークフローをダウンロードしてください。

ストレージ バケットから PDF ファイルを埋め込む

ストレージ バケットから PDF ファイルを埋め込む方法は、通常のフォームと高度なフォームで異なります。高度なフォームでは、レンダリングのパフォーマンスが向上し、コンポーネントとそのロジックの高度な使用が可能です。高度なフォームを作成するには、[フォーム タスクを作成] アクティビティで [高度なフォームを有効化] を選択します。

通常のフォーム

また、ストレージ バケットにアップロードされた PDF ファイルをフォーム アクションに追加して、Action Center のユーザーが参照できるようにすることもできます。

通常のフォーム タスクに PDF を埋め込むには、以下の手順を実行します。

1. [ストレージ ファイルをアップロード] などのアクティビティを使用して、[フォーム タスクを作成] アクティビティで使用するストレージ バケットに PDF ファイルをアップロードします。この手順の一部として、ファイルをアップロードするパスを格納する String 型変数を作成します (例: docPath)。
2. [フォーム タスクを作成] アクティビティの [フォーム データ] の右にある三点リーダー (...) をクリックし、キーワード _storage がサフィックスとして付加された引数を追加します。
   • 名前: doc_storage
   • 方向: 入力
   • 型: String
   • 値: docPath
     重要: キーワード _storage は、これがアクティビティのストレージ バケット内で使用可能なオブジェクトであることを示すために使用します。値には、アップロードした PDF ファイルへのパスを格納した変数を追加しました。

3. フォームに HTML 要素コンポーネントを追加して、次のように設定します。

   • HTML タグ: div。
   • 内容: <embed src={{ data.doc_storage }} width="600px" height="500px"></embed>
   • 変更時に更新: 非選択
4. 変更を保存してコンポーネント ウィンドウを閉じ、フォーム デザイナー ウィンドウに戻ります。
5. HTML 要素の [JSON を編集] アイコンをクリックします。
6. [コンポーネント JSON] で "refreshOn" を検索し、その値をフォーム データ属性に設定して "refreshOn": "doc_storage" となるようにします。
7. _storage フィールドに自動生成されるテキストが、フォームで使用できることを確認します。非表示フィールドとしてマークできます。
   重要: UiPath.FormActivitiyLibrary v1.1.10 を使用している場合は、コンポーネント JSON に "refreshOn" オプションが含まれません。ただし、"refreshOn" キーを手動で追加することで、上述のように値を設定できます。

サンプルはこちらからダウンロードできます。

高度なフォーム

高度なフォーム タスクに PDF を埋め込むには、以下の手順を実行します。

1. [ストレージ ファイルをアップロード] などのアクティビティを使用して、[フォーム タスクを作成] アクティビティで使用するストレージ バケットに PDF ファイルをアップロードします。[ストレージ ファイルをアップロード] アクティビティの [パス] フィールドでファイルのパスを指定します。この例では、「sample.pdf」と入力します。
2. [フォーム タスクを作成] アクティビティの [フォーム データ] の右にある三点リーダー (...) をクリックし、次の設定の引数を追加します。
   • キー: pdf
   • 方向: 入力
   • 型: String
   • 値: "sample.pdf"
3. フォームに PDF コンポーネントを追加し、先ほど追加した引数の名前をプロパティ名として指定します。この例では pdf を指定します。
4. 変更を保存してコンポーネント ウィンドウを閉じ、フォーム デザイナー ウィンドウに戻ります。

サンプルはこちらからダウンロードできます。