- Introdução
- Aplicativos de demonstração
- Como fazer
- Acessar o URL de produção de um aplicativo
- Crie um aplicativo compatível com dispositivos móveis
- Incorporar mapas
- Definir contexto externo
- Use matrizes para preencher os controles Lista suspensa, Lista suspensa multiseleção e Botão de rádio
- Usar TabelaDeDados com controles de Tabela e de Editar Grade
- Usar máscara de entrada
- Notificações
- Uso de expressões VB
- Desenvolvimento de aplicativos
- Projetando seu aplicativo com o Autopilot
- Eventos e Regras
- Regra: If-Then-Else
- Regra: abrir uma página
- Regra: Abrir o URL
- Regra: fechar planilha pop-over/inferior
- Regra: mostrar mensagem
- Regra: exibir/ocultar o controle giratório
- Regra: definir valor
- Regra: iniciar o processo
- Regra: redefinir valores
- Regra: upload de arquivo no compartimento de armazenamento
- Regra: baixar arquivo do bucket de armazenamento
- Regra: criar registro de entidade
- Regra: atualizar registro de entidade
- Regra: excluir registro da entidade
- Regra: adicionar à fila
- Regra: fluxo de trabalho de gatilho
- Regra: enviar ação
- Aproveitamento do RPA no aplicativo
- Aproveitamento de entidades no aplicativo
- Aproveitando filas em seu aplicativo
- Aproveitamento da mídia no aplicativo
- Aproveitamento de ações no aplicativo
- Aproveitando conexões em seus aplicativos
- Aplicativos da Web no Studio Web
- Gerenciamento do ciclo de vida do aplicativo (ALM)
- Apps da UiPath®
- Guia básico de solução de problemas
Guia do usuário do Apps
HTML Personalizado
O Controle de HTML personalizado é direcionado a usuários avançados e oferece a flexibilidade das linguagens de programação HTML, CSS e JavaScript para criar controles interativos personalizados conforme exigido pelas suas necessidades de negócios. O controle inclui editores dedicados para códigos HTML, CSS e JavaScript, com a vantagem adicional de incorporar arquivos CSS e JavaScript hospedados externamente por meio de URLs.
Introdução
Este aplicativo mostra como criar diferentes tipos de gráficos usando bibliotecas JavaScript, como d3.js ou Chart.js.
Aplicativo de demonstração – experimente você
Para experimentar os gráficos interativos, use o aplicativo de demonstração.
Aplicativo de demonstração — instruções para usar
- No UiPath® Apps, crie um novo aplicativo e importe o aplicativo de demonstração baixado.
- Visualize seu aplicativo para interagir com todos os tipos de gráfico.
Introdução
Este aplicativo combina controles de entidades, HTML personalizado e Editar grade para exibir um gráfico de pizza interativo. A interatividade é ativada selecionando uma opção em um menu suspenso, que altera as seções do gráfico de pizza e os registros na grade de edição. Posteriormente, clicar em uma seção de gráfico atualiza os dados na grade de edição.
Aplicativo de demonstração – experimente você
Para experimentar o gráfico de pizza interativo, use o aplicativo de demonstração ou siga o procedimento.
Aplicativo de demonstração — instruções para usar
- Visualize o aplicativo de demonstração.
- No menu suspenso "Filtrar Tíquetes pelo Nome do Cliente", selecione uma opção. A contagem total de tickets, a representação do gráfico de pizza e os dados na grade de edição devem mudar.
- Passe o mouse sobre uma fatia do gráfico. A dica de ferramenta exibe o nome da categoria e a contagem de tickets.
- Clique em uma fatia do gráfico. A grade de edição exibe os registros para a categoria selecionada.
Procedimento
Após o download, prossiga com os seguintes passos:
Introdução
Este aplicativo mostra como criar um seletor de data e hora personalizado.
Aplicativo de demonstração – experimente você
Para experimentar o seletor de datas e horas, use o aplicativo de demonstração.
Aplicativo de demonstração — instruções para usar
- No UiPath® Apps, crie um novo aplicativo e importe o aplicativo de demonstração baixado.
- Visualize seu aplicativo para interagir com o seletor de data e hora.
Introdução
Este aplicativo mostra como criar campos de senha.
Aplicativo de demonstração – experimente você
Para experimentar o campo Senha, use o aplicativo de demonstração.
Aplicativo de demonstração — instruções para usar
- No UiPath® Apps, crie um novo aplicativo e importe o aplicativo de demonstração baixado.
- Visualize seu aplicativo para interagir com o campo de senha.
Introdução
Este aplicativo mostra como criar campos de entrada de assinatura.
Aplicativo de demonstração – experimente você
Para experimentar a entrada de assinatura por conta própria, use o aplicativo de demonstração.
Aplicativo de demonstração — instruções para usar
- No UiPath® Apps, crie um novo aplicativo e importe o aplicativo de demonstração baixado.
- Você pode notar alguns erros. Para corrigi-los, substitua o bucket de armazenamento referenciado "Aplicativo de demonstração" por um em seu tenant.
- Visualize o aplicativo para interagir com o campo de entrada de assinatura.
-
Editor de código aberto - Abre um editor de três painéis para adicionar o código HTML, CSS e JavaScript.
-
Rótulo acessível — a descrição do controle. Essa propriedade é usada por leitores de tela para acessibilidade aprimorada.
-
Oculto — se verdadeiro, oculta o controle no tempo de execução.
-
Desabilitado — se verdadeiro, torna o controle inativo no tempo de execução. O conteúdo HTML, CSS e JavaScript é carregado, mas não responde às ações do usuário, como clicar.
-
Alinhamento de controle — Por padrão, herda o alinhamento pai. É possível definir outro alinhamento que não o pai. Para voltar ao alinhamento padrão pai, desmarque as opções substituídas.
Observação: o alinhamento depende do layout selecionado para o pai (Vertical vs Horizontal). - Borda — define a borda do controle. A espessura e o raio da borda podem ser configurados.
-
Margem — a margem do controle. Por padrão, uma margem de 4px é definida. As propriedades de margem Top/Bottom (Superior/Inferior) e Left/Right (Esquerda/Direita) são combinadas. Essas propriedades podem ser desanexadas usando o botão Link no lado direito da seção Margem.
-
Tamanho — a largura e a altura do controle. Por padrão, o tamanho é definido como
auto. Para definir valores mínimos ou máximos, clique no ícone de três pontos (...).
O editor de código do controle HTML personalizado fornece três painéis para o código de entrada nas idiomas de programação HTML, CSS e JavaScript. Cada editor é compatível com o IntelliSense, ou a conclusão automática de código, e o destaque da sintaxe.
O código dos painéis é compilado em um projeto e renderizado no Apps Studio para visualização. Para observar a funcionalidade do controle, visualize o aplicativo.
-
Cada editor tem um tamanho máximo de conteúdo de 5 MB. Quando o conteúdo exceder esse tamanho, você não poderá mais salvar suas alterações.
-
O IntelliSense não funciona para códigos CSS e JavaScript escritos dentro do editor de HTML.
Se você já tiver definidos estilos ou scripts, poderá referenciá-los no controle, sem escrever o código nos painéis CSS ou JavaScript correspondentes.
.cssou .js existentes:
-
No Editor de código do controle HTML personalizado, mude para a guia Recursos externos .
-
Na seção CSS, adicione um arquivo CSS externo. O arquivo deve ser hospedado em uma URL acessível pela rede para garantir a compatibilidade e a disponibilidade no local em que o aplicativo estiver em execução.
-
Na seção JavaScript, adicione um arquivo de script externo. O arquivo deve ser hospedado em uma URL acessível pela rede para garantir a compatibilidade e a disponibilidade no local em que o aplicativo estiver em execução.
-
Quando você terminar de adicionar todos os recursos externos, clique em Salvar.
Por padrão, a tecla Tab adiciona um espaço de tabulação dentro do editor atual. Para personalizar o comportamento da tecla Tab, use os seguintes atalhos:
|
SO |
Atalho |
Comportamento |
|---|---|---|
|
Windows |
CTRL+M |
Instrui a tecla Tab a navegar entre os painéis e a alterar o foco nos botões visíveis do editor. Pressione CTRL+M novamente para retornar ao comportamento padrão da Guia. |
|
MacOS |
CTRL+Shift+M | Instrui a tecla Tab a navegar entre os painéis e a alterar o foco nos botões visíveis do editor. Pressione CTRL+Shift+M novamente para retornar ao comportamento padrão da Guia. |
<body></body> de um bloco de código HTML.
Por exemplo, para adicionar o elemento contêiner para um gráfico de pizza interativo em seu aplicativo, você usaria o seguinte fragmento de HTML:
<canvas id="myChart" class="chart-container" style="width:100%;max-width:600px"></canvas><canvas id="myChart" class="chart-container" style="width:100%;max-width:600px"></canvas>Onde:
-
id="myChart"refere-se ao elemento JavaScript "myChart" que gera o gráfico de pizza interativo dentro do elemento HTML. Para obter detalhes, consulte O editor de JavaScript. -
class="chart-container"se refere à classe CSS "chart-container", que adiciona o estilo do gráfico de pizza dentro do elemento HTML. Para detalhes, consulte O editor CSS.
Neste painel, você pode inserir o estilo do seu controle e os elementos dentro dele.
Por exemplo, para adicionar cores e uma borda ao gráfico de pizza, você usaria o seguinte fragmento CSS:
.chart-container {
background-color: #f3f7e9;
border: 1px solid #cccccc;
}.chart-container {
background-color: #f3f7e9;
border: 1px solid #cccccc;
}Neste painel, você pode criar a parte interativa do seu controle, como atualizações oportunas de conteúdo, mapas ou gráficos animados 2D/3D.
Por exemplo, para criar um gráfico de pizza para as vendas de produtos da Apple em todo o mundo e projetá-lo para exibir valores para a fatia selecionada, você terá:
-
Adicione o seguinte recurso JavaScript externo:
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.jshttps://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js -
Use o seguinte fragmento JavaScript:
const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'pie', data: { labels: ['iPhone', 'iPad', 'MacBook', 'Apple Watch', 'AirPods'], datasets: [{ label: 'Sales', data: [120000, 80000, 50000, 40000, 30000], backgroundColor: [ '#5CB85C', // Green '#F0AD4E', // Orange '#D9534F', // Red '#5BC0DE', // Light blue '#999', // Gray ], borderColor: '#fff', borderWidth: 2, }], }, options: { plugins: { legend: { position: 'top', }, title: { display: true, text: 'Apple Products Sales', }, }, }, });const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'pie', data: { labels: ['iPhone', 'iPad', 'MacBook', 'Apple Watch', 'AirPods'], datasets: [{ label: 'Sales', data: [120000, 80000, 50000, 40000, 30000], backgroundColor: [ '#5CB85C', // Green '#F0AD4E', // Orange '#D9534F', // Red '#5BC0DE', // Light blue '#999', // Gray ], borderColor: '#fff', borderWidth: 2, }], }, options: { plugins: { legend: { position: 'top', }, title: { display: true, text: 'Apple Products Sales', }, }, }, });
setVariable(), getVariable() e onVariableChange() .
getVariable()
No editor de JavaScript, use essa função para obter o valor de uma variável existente.
internalValue, você usaria o seguinte fragmento de JavaScript:
async function init() {
let internalValue = await App.getVariable('<app_variable_name>');
}
init();async function init() {
let internalValue = await App.getVariable('<app_variable_name>');
}
init();-
A função
getVariable()é assíncrona, o que requer que você useawait. -
Se você chamar
getVariable()dentro de uma função, faça essa funçãoasync. No exemplo fornecido, criamos a funçãoinit()e a invocamos imediatamente. -
Se você chamar
getVariable()em um nível superior, incorpore-o dentro de uma funçãoasync.
async function init() {
try {
const value = await App.getVariable("test");
} catch (e) {
console.log("Error in evaluating app variable:", e);
}
}
init();async function init() {
try {
const value = await App.getVariable("test");
} catch (e) {
console.log("Error in evaluating app variable:", e);
}
}
init();setVariable()
No editor de JavaScript, use essa função para definir um valor para uma variável existente. O primeiro argumento é o nome da variável, e o segundo argumento é o valor que você deseja definir.
async function setValue() {
await App.setVariable('<app_variable_name>', <app_variable_value>);
}
setValue();async function setValue() {
await App.setVariable('<app_variable_name>', <app_variable_value>);
}
setValue();await.
try {
App.setVariable('<app_variable_name>', <app_variable_value>);
} catch (e) {
console.log("Error in setting app variable:", e);
}try {
App.setVariable('<app_variable_name>', <app_variable_value>);
} catch (e) {
console.log("Error in setting app variable:", e);
}onVariableChange()
No editor de JavaScript, use essa função para ouvir as alterações de um valor de variável existente e acessar o valor da variável mais recente.
App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});onVariableChange() à variável deregister . Então, se você quiser parar de ouvir mudanças de variáveis, você pode invocar a função deregister() :
const deregister = App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});
// To stop listening for value changes, the deregister function can be invoked like below
deregister();const deregister = App.onVariableChange('<app_variable_name>', value => {
console.log("Latest value: ", value);
});
// To stop listening for value changes, the deregister function can be invoked like below
deregister();-
O ouvinte é iniciado após o controle de HTML personalizado ser completamente renderizado. Se o valor de uma variável for alterado antes do controle HTML personalizado ser inicializado, o valor atualizado não será capturado.
Para obter o valor da variável mais recente, chamegetVariable()antes de chamaronVariableChange(). -
O controle HTML e as funções dentro dele são inicializados após o controle ser exibido no tempo de execução.
Tipos de variáveis
|
Tipo de variável do aplicativo |
Exemplo de resposta de funções de variável |
|---|---|
|
Text (String) |
"Hello world" |
|
UInt64 (Int) |
100 |
|
Decimal number |
50.25 |
|
True/False (Boolean) |
True |
|
DateOnly |
2024-01-02 (Formato: AAAA-MM-DD) |
| DateTimeOffset |
2024-01-06T09:54:41.9170000Z (Formato JS equivalente: string ISO do objeto de data) |
| AppsFile — valor de um controle de Seletor de arquivos | Objeto do arquivo JS
|
| AppsFile — valor criado a partir da URL
Por exemplo: |
Objeto do arquivo: |
|
GUID |
"5637F7DB-391D-4C8B-805D-0A918531CA3E" |
| List(Of string) | ["Banana", "Kiwi", "Apple", "Lemon"] |
| ListSource(Of <Entity>) | |
| <Entity> (Single entity row) | |
| ListSource(Of <Choiceset>) | |
| Datatable | |
-
Não inclua dados confidenciais no controle HTML personalizado, devido ao seu acesso do lado do cliente.
-
Não utilize as tags
<html>e<head>dentro do editor de HTML, pois o código é acrescentado automaticamente dentro das tags<body>. -
Adicione URLs do CDN de recursos externos, como Inicialização, jQuery ou outros SDKs de JavaScript na guia Recursos externos .
-
Se você quiser parar de ouvir a mudança da variável, use a função
deregister(). -
Evite loops de dados grandes para evitar a lentidão do aplicativo e para manter o controle responsivo.
-
Minimize o uso de elementos DOM tanto quanto possível: crie elementos DOM apenas quando necessário e remova-os quando se tornarem obsoletos.
-
Use a rolagem infinita ou virtual para grandes conjuntos de dados em vez da rolagem padrão.
-
Criar e manter um código limpo, otimizado e sem redundância.
-
O HTML personalizado não permite disparar regras de controle.
-
Para conectar o controle ao Apps, você deve usar as funções de variáveis:
getVariable(),setVariable(),onVariableChange(). -
Para acessar os dados de Processo ou Fila, você deve atribuir uma variável para cada propriedade Processo ou Fila.
-
As dimensões do controle HTML não se ajustam dinamicamente para exibir pop-ups ou menus suspensos. É preciso definir manualmente o tamanho do controle HTML para que se ajuste a esses menus.
-
Não é possível interagir com o controle de HTML durante o tempo de design.
-
As funções
setVariable(),getVariable()eonVariableChange()operam apenas no runtime. -
As alterações ou exclusões de variáveis não refletem automaticamente nos editores de código. Você precisa atualizar manualmente o código com as variáveis atuais.
-
As variáveis que armazenam arquivos do controle de HTML não podem ser usadas na regra Carregar arquivo no bucket de armazenamento ou para preencher os campos Tipo de arquivo de entidades do Data Service.
-
O controle pode se comunicar com outros componentes da UiPath® , como processos, filas ou buckets de armazenamento, apenas por meio do uso de variáveis.
-
O código CSS pré-processado, usando LESS ou SCSS, é incompatível com o controle HTML.
-
As seguintes APIs falham de forma silenciosa quando usadas, devido a preocupações de segurança:
-
Baixando usando o atributo
download. -
Abertura de Modais usando
Window.alert(),Window.confirm(),Window.print(),Window.prompt(). -
Bloqueio de ponteiro e orientação.
-
Navegação no contexto do navegador de nível superior.
-
Entrada da tela cheia usando
requestFullscreen(). -
Captura de tela usando
MediaDevices.getDisplayMedia(). -
Acessando a câmera ou o microfone usando
MediaDevices.getUserMedia(). -
Solicitando pagamentos.
-
Acessando o local usando
navigator.geolocation(). -
Compartilhamento de dados usando
navigator.share().
-
- Adicione um
console.log()no editor de JavaScript. - Em sua sessão do Apps Studio, abra o console do navegador pressionando F12, depois selecione a guia Console .
- Nas configurações do console, marque a caixa Apenas contexto selecionado .
- No menu suspenso de contexto JavaScript na parte superior da página do console, selecione a opção
html-control-base.htmlpara o controle HTML desejado.
Os logs do controle selecionado são exibidos no console.
Assista o vídeo para obter mais detalhes:
- Adicione um
console.log()no editor de JavaScript. - Em sua sessão do Apps Studio, abra o console do navegador pressionando F12, depois selecione a guia Console .
- No lado direito do log, clique na mensagem da VM.
O depurador será aberto. Selecione seu ponto de interrupção clicando no número da linha desejado.
Assista o vídeo para obter mais detalhes:
|
Propriedade do VB |
Tipo de dados |
Description |
|---|---|---|
|
AccessibleLabel | String |
A descrição do controle, usado por tecnologias de acessibilidade, como os leitores de tela. |
| Oculto | Booleano | Determina a visibilidade do controle HTML personalizado . Se verdadeiro, oculta o controle no tempo de execução. |
| Desabilitado | Booleano | Determina se o controle HTML personalizado está desabilitado. Se verdadeiro, desabilita a interação com o controle no tempo de execução. O conteúdo HTML, CSS e JavaScript é carregado, mas não responde às ações do usuário. |
- Demonstrações
- HTML personalizado: criação de gráficos
- HTML personalizado: criação de um gráfico de pizza interativo usando funções variáveis
- HTML personalizado: criação de seletores de data e hora
- HTML personalizado: criação de campos de senha
- HTML personalizado: criando campos de entrada de assinatura
- Geral
- Events
- Estilo
- Editor de código para HTML personalizado
- Adição de recursos externos
- Atalhos de acessibilidade para a tecla Tab
- O editor de HTML
- O editor CSS
- O editor de JavaScript
- Como usar variáveis no HTML personalizado
- Práticas recomendadas para HTML personalizado
- Limitações funcionais
- Depurando o código de um controle HTML personalizado
- Adição e filtragem de logs do console de um controle HTML personalizado
- Adição de pontos de interrupção
- Propriedades VB
