apps

latest

false

Importante :

Para obter documentação sobre projetos de aplicativos no Studio Web, consulte o capítulo Projetos de aplicativos na documentação do Studio Web: https://docs.uipath.com/pt-BR/studio-web/automation-cloud/latest/user-guide/apps-in-studio-web. A tradução automática foi aplicada parcialmente neste conteúdo. A localização de um conteúdo recém-publicado pode levar de 1 a 2 semanas para ficar disponível.

Guia do usuário do Apps

ENTREGA:

Última atualização 30 de out de 2025

Aplicativos incorporados responsivos e compatíveis com dispositivos móveis

Você pode adicionar lógica à sua página da web externa, fazendo com que seu aplicativo incorporado responda às alterações de tamanho da tela. Isso pode ser útil se você usar dispositivos de tela pequena, como celulares, porque mitiga a necessidade de rolar várias vezes para ver o conteúdo do aplicativo incorporado.

Se você não adicionar essa lógica à sua página da web, a incorporação manterá uma altura estática e exibirá uma barra de rolagem.

Projetando aplicativos incorporados responsivos e compatíveis com dispositivos móveis

Lista de permissões das comunicações com seu domínio externo, adicionando um parâmetro adicional à sua incorporação existente ou iFrame: &target=https://mywebsite.com. O seguinte código mostra um exemplo:
```
<embed title="Embedded app" src="<PUBLIC-APP-URL>?el=VB&target=https://mywebsite.com"><embed title="Embedded app" src="<PUBLIC-APP-URL>?el=VB&target=https://mywebsite.com">
```
Para tornar sua incorporação ciente das atualizações de tamanho, adicione a seguinte lógica JavaScript à página da web que hospeda o aplicativo incorporado:
Observação:
Os valores específicos variam de acordo com o design do seu aplicativo.
```
<script>  
const MIN_HEIGHT = 800; // Minimum height of the app  
var embed = document.querySelector('embed');  window.addEventListener('message', function(event) {  
if (event.data.event === "APP_CONTENT_HEIGHT_UPDATED" && event.data.height) {  embed.style.height = Math.max(event.data.height, 800);  
}  
if (event.data.event === "APP_CONTENT_RESIZED" && event.data.height !== MIN_HEIGHT) {  
if(event.data.height > 0) {  embed.style.height = Math.max(parseInt(event.data.height) - 10, 850);  
}  
}  
}); 
</script><script>  
const MIN_HEIGHT = 800; // Minimum height of the app  
var embed = document.querySelector('embed');  window.addEventListener('message', function(event) {  
if (event.data.event === "APP_CONTENT_HEIGHT_UPDATED" && event.data.height) {  embed.style.height = Math.max(event.data.height, 800);  
}  
if (event.data.event === "APP_CONTENT_RESIZED" && event.data.height !== MIN_HEIGHT) {  
if(event.data.height > 0) {  embed.style.height = Math.max(parseInt(event.data.height) - 10, 850);  
}  
}  
}); 
</script>
```

O script executa as seguintes operações:

Quando um controle é adicionado ou removido do aplicativo, o script aciona o evento APP_CONTENT_HEIGHT_UPDATED e atualiza a altura da variável embed.
- Os gatilhos de evento APP_CONTENT_HEIGHT_UPDATED APP_CONTENT_RESIZED, o que reduz a altura da variável embed em 10 pixels.
  - O evento APP_CONTENT_RESIZED aciona outro evento APP_CONTENT_RESIZED, o que novamente reduz a altura da variável embed em 10 pixels.

O script repete essas operações, até que:

A variável embed está na altura mínima em que uma barra de rolagem não é necessária para visualizar o aplicativo.
A variável embed é reduzida para o valor inicial, que é especificado por MIN_HEIGHT.

Demonstração

Aplicativo incorporado responsivo e compatível com dispositivos móveis

Introdução

Esta página da web incorpora um aplicativo móvel em um quadro de dispositivo. O aplicativo exibe conteúdo responsivamente para uso móvel. Um iFrame carrega o conteúdo dinamicamente e o exibe dentro do quadro do dispositivo. O conteúdo do aplicativo ajusta sua altura com base no conteúdo para evitar barras de rolagem.