フォーム内で画像を表示する

埋め込みによりフォーム内に画像を表示する方法は以下のとおりです。Base64 の画像の場合は、カスタム JavaScript を使用して表示します。

画像を埋め込む

このチュートリアルでは、HTML コンポーネントを使用して、フォーム内に画像を埋め込む方法を説明します。

1. 画像ファイルを、使用しているフォームと同じフォルダーに追加します。
   この例では、display_PDF_file_form.jpg という名前の画像をアップロードしました。
2. フォームに [HTML 要素] コンポーネントを追加します。
3. [表示] タブの [コンテンツ] に、コード スニペット「<img id="myimage" src="display_PDF_file_form.jpg">」を入力します。「display_PDF_file_form.jpg」を、表示する画像の名前で置き換えます。
   width および height 属性を使用して、フォーム内の画像の幅と高さをさらに調整できます。

Base64 の画像を表示する

このチュートリアルでは、UiPath フォームを使用して Base64 の画像を動的に表示する方法について説明します。このオートメーションでは、HTML 要素と 2 つのボタンを含むカスタムのフォーム ファイルを作成し、表示する画像をユーザーが選択できるようにします。さらに、別のワークフローを作成して画像を Base64 形式に変換します。この変換用ワークフローは他のトリガー ワークフローで呼び出され、フォーム内に表示する前に画像の前処理を行います。

前提条件: Studio プロジェクトのフォルダーに表示する画像を追加します。

1. 新しいフォームを作成し、[HTML 要素] を 1 つと [ボタン] コンポーネントを 2 つ追加します。
   1. [HTML 要素] を編集し、指定の HTML コードを [コンテンツ] フィールドに追加します。カスタム JavaScript のプレースホルダー名として myImage を使用します。

      <img id='myImage'  width='100' height='100' />

   2. 2 つのボタンの [アクション] を [イベント] に設定し、2 つの異なる画像を表示するためのトリガーにします。
2. Main ワークフローに [フォームを表示] アクティビティと [ローカル トリガーを実行] アクティビティを追加し、フォームを表示してプロジェクト内のすべてのトリガーを有効化するようにします。
3. 「ConvertImageToBase64」という名前の別のワークフローを作成して、プロジェクトの画像を Base64 エンコードに変換します。
   1. データ マネージャーで次の 2 つの String 引数を作成します。

      名前	方向	データ型	既定値	説明
      in_Image	In	String	"uipath.png" (ユーザーがボタンをクリックする前に表示する既定の画像)	この引数は、変換する画像へのパスを保持します。
      Base64Image	Out	String	NA	この引数は、変換結果の Base64 の画像を保持します。

   2. [画像を読み込み] アクティビティを追加し、画像を読み込んでローカル変数に格納するようにします。[ファイル名] フィールドに、データ マネージャーで作成した in_Image を入力します。[出力] フィールドで、「loadedImage」という名前のローカル変数を作成します。この変数の型を UiPath.Core.Image に設定します。
   3. [代入] アクティビティを追加します。[保存先] フィールドに出力引数 Base64Image を入力し、[保存する値] フィールドにローカル画像変数と画像変換メソッド .Base64 を入力します。
      この例では、「loadedImage.Base64」と入力します。
4. トリガー ワークフローを作成する前に、「templateSRC」という名前の String 型グローバル変数を作成し、既定値を "data:image/png;base64,<base64>" に設定します。
   templateSRC 変数は、 [HTML 要素] コンポーネントで宣言されたソース属性 (src) の値のテンプレートとして機能します。
5. 1 つ目の [ボタン] コンポーネント用に「showUiPathShortLogoTrigger」という名前のトリガー ワークフローを作成します。
   1. [フォーム トリガー アクティビティ] を追加し、追加したボタンの 1 つに [イベント] を設定します。
   2. [ワークフローを呼び出し] アクティビティを追加し、画像を Base64 エンコードに変換するワークフローを呼び出します。呼び出しには以下の引数を使用します。

      名前	方向	入力	値 (Value)
      in_Image	In	String	uipath.png (変換してフォームに表示するために使用する画像)
      Base64Image	Out	String	base64str (ローカル String 変数)

6. [フォームのスクリプトを実行] アクティビティを追加し、カスタム JavaScript を使用して Base64 の画像を表示します。[ソース] フィールドで、次のスクリプトを使用します。

   "document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'"

   上記のスクリプトでは、template_SRC 値内のプレースホルダー <base64> が実際の Base64 の画像データ (base64str) で置換されます。その後、結果として生成される変更後の template_SRC は、ID が 'myImage' の HTML 画像要素のソース (src) 値として割り当てられます。この操作では、画像のソースを動的に更新して、Base64 でエンコードされた画像を表示します。
7. もう 1 つのボタン用に別のトリガー ワークフローを作成します。
   この例では、ワークフローに「showUiPathLogoTrigger」という名前を付けます。
   1. [フォーム トリガー アクティビティ] を追加し、追加したボタンの 1 つに [イベント] を設定します。
   2. [ワークフロー ファイルを呼び出し] アクティビティを追加し、以下の引数を使用して ConvertImageToBase64 ワークフローを呼び出します。

      名前	方向	入力	値 (Value)
      in_Image	In	String	uipath2.png (変換してフォームに表示するために使用する画像)
      Base64Image	Out	String	base64str (ローカル String 変数)

8. [フォームのスクリプトを実行] アクティビティを追加し、カスタム JavaScript を使用して Base64 の画像を表示します。[ソース] フィールドで、次のスクリプトを使用します。

   "document.getElementById('myImage').src='"+templateSRC.Replace("<base64>",base64str)+"'"

   このスクリプトは、プレースホルダー <base64> を実際の Base64 の画像データで置換し、画像のソースを動的に更新することにより、 template_SRC の値を変更します。

ワークフローの例

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