Exibição de imagens em formulários

Aprenda a exibir uma imagem em um formulário incorporando a imagem ao formulário. Para imagens Base64, você as exibe usando JavaScript personalizado.

Incorporar imagens

Neste tutorial, você aprenderá a incorporar uma imagem a um formulário usando um componente HTML.

1. Adicione o arquivo de imagem na mesma pasta do formulário que você está usando.
   Neste exemplo, carregamos uma imagem chamada display_PDF_file_form.jpg.
2. Adicione um componente de Elemento HTML ao formulário.
3. Na aba Exibição , em Conteúdo, escreva o seguinte fragmento de código: <img id="myimage" src="display_PDF_file_form.jpg">. Substitua display_PDF_file_form.jpg pelo nome da imagem que você deseja exibir.
   Você pode ajustar ainda mais a largura e a altura da imagem dentro do formulário usando os atributos width e height .

Exibição de imagens Base64

Neste tutorial, você aprenderá como exibir dinamicamente imagens Base64 usando o UiPath Forms. A automação envolve a criação de um arquivo de formulário personalizado com um elemento HTML e dois botões para permitir que os usuários selecionem qual imagem desejam exibir. Além disso, um fluxo de trabalho separado é criado para converter imagens para o formato Base64. Esse fluxo de trabalho de conversão é invocado em outros fluxos de trabalho de gatilho para pré-processar as imagens antes de exibi-las dentro do formulário.

Pré-requisitos: adicione as imagens que você deseja exibir dentro da pasta do projeto do Studio.

1. Crie um novo formulário e adicione um Elemento HTML e dois componentes Botão a ele.
   1. Edite o Elemento HTML e adicione o código HTML fornecido no campo Conteúdo , usando myImage como um nome de espaço reservado para o JavaScript personalizado:

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

   2. Defina a Ação dos dois botões como Evento, tornando-os gatilhos para mostrar duas imagens diferentes.
2. No fluxo de trabalho Principal , adicione as atividades Show Form e Run Local Triggers para exibir o formulário e habilitar todos os gatilhos no projeto.
3. Crie um fluxo de trabalho separado chamado ConvertImageToBase64 para converter imagens do projeto para codificação Base64.
   1. Crie dois argumentos String no Data Manager:

      Name	Direction	Tipo de dados	Valor Padrão	Description
      in_Image	Em	String	"uipath.png" (a imagem padrão que você deseja mostrar, antes de um usuário clicar em um botão)	Esse argumento contém o caminho para a imagem que você deseja converter.
      Base64Image	Out	String	NA	Esse argumento contém o resultado da conversão, que é uma imagem base64.

   2. Adicione uma atividade Load Image para carregar a imagem e armazená-la em uma variável local. No campo NomeDoArquivo , insira o in_Image, criado no Data Manager. No campo Saída , crie uma variável local chamada loadedImage. Defina o tipo de variável como UiPath.Core.Image
   3. Adicione uma atividade Assign . No campo Salvar em , insira o argumento de saída Base64Image e, no campo Valor a salvar , insira a variável de imagem local e o método .Base64 para convertê-la.
      Neste exemplo, insira loadedImage.Base64.
4. Antes de criar os fluxos de trabalho de gatilho, crie uma variável global String chamada templateSRC com o Valor Padrão "data:image/png;base64,<base64>".
   A variável templateSRC atua como um modelo para o valor do atributo de origem (src) declarado no componente de Elemento HTML .
5. Crie um fluxo de trabalho de gatilho para o primeiro componente de Botão chamado showUiPathShortLogoTrigger.
   1. Adicione uma atividade Form Trigger e defina o Evento como um dos botões que você adicionou.
   2. Adicione uma atividade Invoke Workflow e invoque o fluxo de trabalho que converte imagens para codificação base64. Invoque o fluxo de trabalho usando os argumentos abaixo:

      Name	Direction	Tipo	Valor
      in_Image	Em	String	uipath.png (a imagem usada para converter e, em seguida, exibida no formulário)
      Base64Image	Out	String	base64str (variável String local)

6. Adicione uma atividade Run Form Script para exibir a imagem base64 usando JavaScript personalizado. No campo Origem , use o seguinte script:

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

   No script acima, o espaço reservado <base64> dentro do valor template_SRC é substituído pelos dados de imagem Base64 reais (base64str). O template_SRC modificado resultante é então atribuído como o valor de origem (src) do elemento de imagem HTML com o ID 'myImage'. Essa operação atualiza dinamicamente a origem da imagem para exibir a imagem codificada em Base64 desejada.
7. Crie outro fluxo de trabalho de gatilho para o outro botão.
   Neste exemplo, você pode nomear o fluxo de trabalho showUiPathLogoTrigger.
   1. Adicione uma atividade Form Trigger e defina o Evento como um dos botões que você adicionou.
   2. Adicione uma atividade Invoke Workflow File e invoque o fluxo de trabalho ConvertImageToBase64 usando os argumentos abaixo:

      Name	Direction	Tipo	Valor
      in_Image	Em	String	uipath2.png (a imagem usada para converter e, em seguida, exibida no formulário)
      Base64Image	Out	String	base64str (variável String local)

8. Adicione uma atividade Run Form Script para exibir a imagem Base64 usando JavaScript personalizado. No campo Origem , use o seguinte script:

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

   O script modifica o valor template_SRC substituindo o placeholder <base64> pelos dados de imagem de Base64 reais, atualizando dinamicamente a origem da imagem.

Exemplo de fluxo de trabalho

Para seguir as etapas e experimentar o tutorial, consulte este projeto de exemplo.