Mostrar imágenes en formularios

Así es como se muestra una imagen dentro de un formulario incrustando la imagen dentro del formulario. Para las imágenes Base64, se muestran con JavaScript personalizado.

Insertar imágenes

En este tutorial aprenderá a insertar una imagen dentro de un formulario utilizando un componente HTML.

1. Agrega el archivo de imagen en la misma carpeta que el formulario que estás usando.

   En este ejemplo, cargamos una imagen llamada display_PDF_file_form.jpg.

2. Añade un componente de elemento HTML al formulario.

3. En la pestaña Visualización , en Contenido, escribe el siguiente fragmento de código: <img id="myimage" src="display_PDF_file_form.jpg">. Sustituye display_PDF_file_form.jpg por el nombre de la imagen que quieres mostrar.

   Puedes ajustar aún más la anchura y la altura de la imagen dentro del formulario utilizando los atributos width y height .

Visualización de imágenes Base64

En este tutorial, aprenderá a mostrar imágenes Base64 dinámicamente mediante UiPath Forms. La automatización implica la creación de un archivo de formulario personalizado con un elemento HTML y dos botones para permitir a los usuarios seleccionar qué imagen quieren mostrar. Además, se crea un flujo de trabajo independiente para convertir imágenes al formato Base64. Este flujo de trabajo de conversión se invoca en otros flujos de trabajo de desencadenador para preprocesar las imágenes antes de mostrarlas dentro del formulario.

Requisitos previos: añade las imágenes que deseas mostrar dentro de la carpeta del proyecto de Studio.

1. Crea un nuevo formulario y añádele un elemento HTML y dos componentes de botón .

   1. Edita el elemento HTML y añade el código HTML proporcionado en el campo Contenido , utilizando myImage como nombre de marcador de posición para el JavaScript personalizado:

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

   2. Establece la Acción de los dos botones en Evento, convirtiéndolos en desencadenadores para mostrar dos imágenes diferentes.

2. En el flujo de trabajo principal , añade las actividades Mostrar formulario y Ejecutar desencadenadores locales para mostrar el formulario y habilitar todos los desencadenadores en el proyecto.

3. Crea un flujo de trabajo independiente llamado ConvertImageToBase64 para convertir las imágenes del proyecto a la codificación Base64.

   1. Crea dos argumentos String en Data Manager:

      Nombre	Dirección	Tipo de datos	Valor predeterminado	Descripción
      in_Image	En	String	"uipath.png" (la imagen predeterminada que desea mostrar antes de que el usuario haga clic en un botón)	Este argumento contiene la ruta de la imagen que desea convertir.
      Base64Image	Salida	String	N/A	Este argumento contiene el resultado de la conversión, que es una imagen en base64.

   2. Añade una actividad Cargar imagen para cargar la imagen y almacenarla en una variable local. En el campo NombreDelArchivo introduce el in_Image, creado en Data Manager. En el campo Salida , crea una variable local llamada loadedImage. Establezca el tipo de variable en UiPath.Core.Image

   3. Añade una actividad Asignar . En el campo Guardar en introduce el argumento de salida Base64Image y en el campo Valor para guardar introduce la variable de imagen local y el método .Base64 para convertirla.

      En este ejemplo, introduce loadedImage.Base64.

4. Antes de crear los flujos de trabajo del desencadenador, crea una variable global String llamada templateSRC con el valor predeterminado "data:image/png;base64,<base64>".

   La variable templateSRC actúa como plantilla para el valor del atributo de origen (src) declarado en el componente Elemento HTML .

5. Crea un flujo de trabajo de desencadenador para el primer componente de botón llamado showUiPathShortLogoTrigger.

   1. Añade una actividad Desencadenador de formulario y establece el Evento en uno de los botones que has añadido.

   2. Añade una actividad Invocar flujo de trabajo e invoca el flujo de trabajo que convierte las imágenes a la codificación base64. Invoca el flujo de trabajo utilizando los siguientes argumentos:

      Nombre	Dirección	Tipo	Valor
      in_Image	En	String	uipath.png (la imagen utilizada para convertir y mostrar en el formulario)
      Base64Image	Salida	String	base64str (variable String local)

6. Añade una actividad Ejecutar script de formulario para mostrar la imagen base64 utilizando JavaScript personalizado. En el campo Origen , utiliza el siguiente script:

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

   En el script anterior, el marcador de posición <base64> dentro del valor template_SRC se reemplaza por los datos reales de la imagen Base64 (base64str). El template_SRC modificado resultante se asigna entonces como valor de origen (src) del elemento de imagen HTML con el ID 'myImage'. Esta operación actualiza dinámicamente el origen de la imagen para mostrar la imagen codificada en Base64 deseada.

7. Crea otro flujo de trabajo de desencadenador para el otro botón. En este ejemplo, puedes nombrar el flujo de trabajo showUiPathLogoTrigger.

   1. Añade una actividad Desencadenador de formulario y establece el Evento en uno de los botones que has añadido.

   2. Añade una actividad Invocar archivo de flujo de trabajo e invoca el flujo de trabajo ConvertImageToBase64 utilizando los siguientes argumentos:

      Nombre	Dirección	Tipo	Valor
      in_Image	En	String	uipath2.png (la imagen utilizada para convertir y mostrar en el formulario)
      Base64Image	Salida	String	base64str (variable String local)

8. Añade una actividad Ejecutar script de formulario para mostrar la imagen Base64 utilizando JavaScript personalizado. En el campo Origen , utiliza el siguiente script:

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

El script modifica el valor template_SRC reemplazando el marcador de posición <base64> con los datos reales de la imagen Base64, actualizando dinámicamente el origen de la imagen.

Ejemplo de flujo de trabajo

Para seguir los pasos y probar el tutorial tú mismo, consulta este proyecto de ejemplo.