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 Elemento HTML al formulario.
3. En la pestaña Visualización , en Contenido, escriba el siguiente fragmento de código: <img id="myimage" src="display_PDF_file_form.jpg">. Reemplaza display_PDF_file_form.jpg con 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: agregue las imágenes que desea mostrar dentro de la carpeta de proyecto de Studio.

1. Crea un nuevo formulario y agrégale un Elemento HTML y dos componentes 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. Establezca 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 del proyecto.
3. Crea un flujo de trabajo independiente llamado ConvertImageToBase64 para convertir las imágenes del proyecto a la codificación Base64.
   1. Cree dos String argumentos en el Gestor de datos:

      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 FileName introduce el in_Image, creado en el Gestor de datos. En el campo Salida , crea una variable local llamada loadedImage. Establecer el tipo de variable en UiPath.Core.Image
   3. Agrega una actividad Asignar . En el campo Guardar en introduce el argumento de salida Base64Image y en el campo Valor a 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" denominada 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. Agrega una actividad de desencadenador de formulario y establece el Evento en uno de los botones que hayas agregado.
   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. Invoque 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. Agrega una actividad Ejecutar script de formulario para mostrar la imagen base64 usando JavaScript personalizado. En el campo Origen , utilice 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. Cree otro flujo de trabajo de desencadenador para el otro botón.
   En este ejemplo, puedes nombrar el flujo de trabajo showUiPathLogoTrigger.
   1. Agrega una actividad de desencadenador de formulario y establece el Evento en uno de los botones que hayas agregado.
   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 usando JavaScript personalizado. En el campo Origen , utilice 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 muestra.