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

埋め込みによりフォーム内に画像を表示する方法は以下のとおりです。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 の値を変更します。

ワークフローの例

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