Transferir imagens e assinaturas do Power Apps para o Power Automate

Nesta postagem, aprenderemos como transferir imagens e assinaturas do Power Apps para a plataforma Microsoft Power Automate. Isso é um pouco difícil de fazer porque o Power Apps não tem uma maneira padrão de editar e carregar imagens no SharePoint.

O exemplo em que trabalharemos é um aplicativo de despesas que usei antes. Basicamente, esta é uma galeria anexada a uma lista do SharePoint.

E se eu selecionar qualquer coisa nesta galeria, basicamente atualizará este formulário no lado direito.

Posso então entrar neste formulário à direita e editá-lo.

Iremos para nossa lista do SharePoint e adicionaremos uma coluna de imagem chamada Signature .

Vamos para o Power Apps e adicionar essa coluna de imagem a este formulário. Então, clicaremos em Editar campos e em Adicionar campo e selecionaremos Assinatura no campo suspenso.

Você notará que podemos adicioná-lo, mas não podemos fazer coisas como carregar imagens. Se clicarmos em Editar , por exemplo, podemos editar tudo, mas atualizar a imagem da assinatura. Se estivermos fazendo isso em um iPad, seria bom se pudéssemos usar a tela para digitar ou escrever uma assinatura antes de enviarmos este registro, mas infelizmente não temos permissão para fazer isso.

Índice

• Fazendo upload de imagens e criando assinaturas
• Criando um fluxo de plataforma Microsoft Power Automate
• Conectando Power Apps à plataforma Microsoft Power Automate
• Definindo argumentos na plataforma Microsoft Power Automate
• Criando uma variável para cada imagem
• Convertendo código URI em código binário
• Conclusão

Fazendo upload de imagens e criando assinaturas

O Power Apps não tem uma funcionalidade para isso, mas o Power Automate pode nos socorrer e nos ajudar. Então aqui está como podemos fazer isso.

Primeiro, precisamos de uma maneira de um usuário realmente enviar uma imagem e desenhar uma assinatura. Se clicarmos no sinal +, ele adiciona um novo relatório de despesas e, se clicarmos na marca de seleção, obtemos esta caixa pop-up.

Se voltarmos, nada acontece. Mas se clicarmos em Enviar , o relatório de despesas será processado. Vamos adicionar a capacidade de um usuário fazer upload de uma imagem e desenhar uma assinatura. Então, vamos para Mídia e depois para Adicionar imagem . Este controle nos permite basicamente adicionar fotos.

E então clique em Input e depois em Pen input . Isso nos permite desenhar nossa assinatura.

Vamos fazer este modelo um pouco maior para termos mais espaço para fazer isso.

E então adicionaremos alguns rótulos abaixo apenas para mostrar a todos o que estamos fazendo.

À esquerda, a etiqueta dirá Carregar recibos e, à direita, assine .

Criando um fluxo de plataforma Microsoft Power Automate

A próxima coisa que precisamos fazer é criar um fluxo do Power Automate que basicamente pegue o controle de recibo de upload e o controle de assinatura e os carregue em nossa biblioteca de documentos de despesas, recibos e assinaturas do SharePoint. Novamente, não há como fazer isso diretamente no Power Apps e teremos que usar o Power Automate.

Vamos clicar em New flow e selecionar Instant cloud flow .

Vamos selecionar Power Apps como a forma de acionar esse fluxo, chamar isso de UploadStuff e clicar em Criar .

Iremos ao nosso conector do SharePoint e selecionaremos Create file .

Precisamos de um endereço de site e um caminho de pasta, que neste caso é chamado /expensereceiptsandsignature.

Para o nome do arquivo, provavelmente queremos que o nome do recibo de despesas e a assinatura sejam idênticos ao nome do título real do recibo de despesas. Solicitaremos ao Power Apps o nome do arquivo e o conteúdo do arquivo .

Em seguida, clicaremos em Nova etapa e faremos a mesma coisa novamente, porque precisamos de um Criar arquivo para a foto real do recibo de despesa e outro para a assinatura que será carregada. Apenas o conteúdo do arquivo será diferente, o que precisamos solicitar no Power Apps.

Agora, finalmente, criamos nosso fluxo de trabalho.

Conectando Power Apps à plataforma Microsoft Power Automate

A última coisa que precisamos fazer é conectar o Power Apps ao Power Automate. Portanto, se adicionarmos uma nova despesa e marcarmos a marca de seleção, obteremos esse modelo novamente.

Se clicarmos no botão enviar, tudo o que esse modelo faz é enviar o formulário e definir a visibilidade de volta para false.

Temos que voltar para a tela principal e ativar este fluxo. Mas primeiro, vamos copiar o que está na barra fx e cortá-lo para que fique salvo em nossa área de transferência. Em seguida, iremos para Action , clique em Power Automate e selecione UploadStuff , que é novamente o fluxo de trabalho do Power Automate que acabamos de criar. Isso importará o fluxo de trabalho para o nosso Power Apps.

Definindo argumentos na plataforma Microsoft Power Automate

Precisamos definir vários argumentos que especificamos no Power Automate. O primeiro argumento que precisamos especificar é o nome real do arquivo que queremos chamá-lo, que no nosso caso será igual ao título do relatório de despesas que estamos enviando, que está armazenado em DataCardValue1.

Também precisamos da imagem real do recibo que estamos carregando e colamos todos os outros comandos que tínhamos antes.

Agora é aqui que as coisas ficam complicadas e, infelizmente, quero dizer muito complicadas. Se enviarmos isso, o que deve acontecer é que o UploadedImage1.Image e o Pen.Input2.Image devem passar pelo fluxo de trabalho e eles serão o conteúdo do arquivo que seria criado.

No entanto, observe que UploadedImage1.Image na verdade não se refere à própria imagem. Refere-se a um caminho que a Microsoft fez para saber onde fazer o upload da imagem. Portanto, não é realmente o próprio código da imagem; é um caminho aleatório ao qual apenas a Microsoft tem acesso. A imagem será salva, mas será algum arquivo de texto aleatório que você não conseguirá entender.

Portanto, precisamos fazer alguns ajustes usando este código:

Criando uma variável para cada imagem

A primeira coisa que precisamos fazer é criar uma variável para cada imagem. Criaremos uma variável chamada varImage1 que será igual à representação JSON da imagem carregada. Também queremos incluir os dados binários no JSON.

Em seguida, pegaremos a saída dessa função que está armazenada em varImage1 e criaremos outra variável chamada varImageTrimmed , que basicamente pega a varImage1 e corta as pontas dela usando a função Mid.

Estamos pegando a imagem carregada e convertendo-a em um URI – um trecho de código armazenado em forma de texto que representa o que a imagem realmente é. Em seguida, pegamos isso e removemos os dois primeiros caracteres e os dois últimos caracteres desse texto, porque esses são identificadores de formato de que não precisamos.

Em seguida, faremos o mesmo processo para a assinatura e substituiremos a imagem por PenInput2 e a chamaremos de varSig1 .

Convertendo código URI em código binário

Já dissemos que o Power Automate não é um caminho aleatório para uma imagem; em vez disso, é o código URI da própria imagem, que é basicamente a representação textual dessa imagem. Não podemos simplesmente passar essa imagem textual, então precisamos converter o código que recebemos em código binário que o SharePoint pode ler.

Todos os arquivos estão em código binário, então precisamos ir para Expression e usar uma função que converta URI em binário. Colocaremos essa expressão no elemento de conteúdo do arquivo dessa ação e, em seguida, clicaremos em Salvar .

A única coisa que resta a fazer é garantir que os arquivos não tenham o mesmo nome. Queremos que o primeiro arquivo seja a imagem e o segundo arquivo a assinatura. Assim podemos editar o primeiro com _receipt.jpg e o segundo com _signature.jpg.

Vamos experimentar para ver se funciona. Começaremos com um novo relatório de despesas para um novo iPad que custa US$ 400.

Depois de clicar na marca de seleção, podemos adicionar a foto e a assinatura.

Podemos carregar nosso recibo e adicionar nossa assinatura.

Podemos então clicar em Enviar . Para confirmar, vamos à nossa lista SharePoint de envio de despesas para ver se esse item de linha foi criado.

Além disso, se formos a Recibos e assinaturas de despesas, vemos o novo recibo do iPad e a nova assinatura do iPad, ambos correspondentes ao título do relatório de despesas que acabamos de criar.

Essas são imagens reais e podemos realmente vê-las, enquanto que, se quisermos fazer isso da maneira antiga, elas seriam apenas arquivos de texto.

Conclusão

Pense por um momento como isso é poderoso. Agora temos uma maneira de criar um aplicativo para as pessoas tirarem fotos e assinaturas e colocá-las em um fluxo de trabalho da plataforma Microsoft Power Automate. Neste caso, estamos usando-os para armazenar arquivos em bibliotecas de documentos. A principal coisa que aprendemos hoje é como mover dados relacionados a imagens e assinaturas do Power Apps para o Power Automate.

Se você gostou do conteúdo abordado neste tutorial específico, não se esqueça de se inscrever no canal de TV LuckyTemplates. Temos uma grande quantidade de conteúdo sendo publicado o tempo todo, meu e de vários criadores de conteúdo – todos dedicados a melhorar a maneira como você usa o LuckyTemplates e a Power Platform.

henrique