apps

latest

false

Importante :

A tradução automática foi aplicada parcialmente neste conteúdo.

Guia do usuário do Apps

ENTREGA:

Automation Cloud Automation Cloud Public Sector Automation Suite

Last updated 15 de nov de 2024

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.

Demonstrações

HTML personalizado: criação de gráficos

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.

Baixar aplicativo de demonstração do GitHub

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.

HTML personalizado: criação de um gráfico de pizza interativo usando funções variáveis

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.

Baixar aplicativo de demonstração do GitHub

Visualizar aplicativo de demonstração na nuvem

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

Para ver como as entidades e variáveis são usadas no controle HTML personalizado, baixe os seguintes arquivos do aplicativo em sua máquina local:

Após o download, prossiga com os seguintes passos:

No UiPath^® Data Service, clique em Importar esquema:
1. Selecione o arquivo ticket_entities_schema.json baixado anteriormente.
2. Na guia Entidades , marque as caixas Tíquetes e Origem de tíquetes.
3. Alterne para a guia Conjuntos de escolhas e marque as caixas Continentes e Nível de atrito.
4. Clique em Importar.
No UiPath^® Data Service, selecione a entidade Origem de tickets:
1. Clique em Importar dados.
2. Selecione o arquivo ticketsource_entity_data.csv baixado anteriormente e clique em Abrir.
3. Alterne para a guia Dados para ver os registros carregados.
No UiPath^® Data Service, selecione a entidade Tickets:
1. Clique em Importar dados.
2. Selecione o arquivo tickets_entity_data.csv baixado anteriormente e clique em Abrir.
3. Os dados dos campos de tipo Relacionamento e Conjunto de Escolhas não são importados automaticamente. Você precisa preencher manualmente os dados para esses campos.
4. Mude para a guia Dados . Para cada registro de Tickets, atualize os valores para o campo Origem selecionando aleatoriamente Chat, Telefone ou E-mail.
5. Na aba Dados , para cada registro de Tíquetes, atualize os valores para o campo Atalho selecionando aleatoriamente 1, 2 ou 3.
Para importar o arquivo do aplicativo, siga esta etapa e depois vá para a etapa 14.
No UiPath^® Apps, crie um novo aplicativo VB:
1. Clique em Importar de arquivo.
2. Selecione o arquivo CustomHTMLPieChart_DemoApp.uiapp baixado anteriormente e clique em Abrir.
3. Para corrigir os erros, substitua a entidade no aplicativo importado por aquela que você criou anteriormente nas etapas 2 e 3.
4. No aplicativo importado, selecione o controle suspenso chamado "CustomFilterDropdown", abra o editor de expressão para a propriedade Origem da lista e salve-a.
Para criar o aplicativo do zero, siga as etapas 5 a 14.
No UiPath^® Apps, crie um novo aplicativo VB.
Em seu aplicativo, faça referência às entidades criadas nas etapas 1 a 3.

Crie as seguintes variáveis, com base em entidades do Data Service:

Nome da variável	Tipo	Entidade referenciada
`allTickets`	Origem da lista	Tíquetes
`filteredTicketListSource`	Origem da lista	Tíquetes
`selectedSourceType`	Texto	-
`ticketSourceTypes`	Origem da lista	Origem dos tickets

Adicione um controle de Lista suspensa ao aplicativo e o renomeie como "CustomerFilterDropdown":

No campo Rótulo , renomeie-o para "Filtrar tickets pelo nome do cliente".
No campo Origem da lista , abra o editor de expressão e escreva a seguinte expressão VB:
```
New ListSource(of String)With{.data = allTickets.data.Select(Function(x) x.CustomerName).Distinct.ToList}New ListSource(of String)With{.data = allTickets.data.Select(Function(x) x.CustomerName).Distinct.ToList}
```
Mude para a guia Eventos e, em seguida, clique em Criar regra.

Adicione a regra Definir valor , com a seguinte entrada:

Item a ser definido

filteredTicketListSourcefilteredTicketListSource

Valor

Fetch(of Tickets)(createFilterGroup(New QueryFilter(){addFilter(If((MainPage.CustomerFilterDropdown.SelectedItem Is Nothing),"","CustomerName"), "=", MainPage.CustomerFilterDropdown.SelectedItem)}, Nothing, 0), Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("Source", New String(){"Id","Source"}), addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})Fetch(of Tickets)(createFilterGroup(New QueryFilter(){addFilter(If((MainPage.CustomerFilterDropdown.SelectedItem Is Nothing),"","CustomerName"), "=", MainPage.CustomerFilterDropdown.SelectedItem)}, Nothing, 0), Nothing, Nothing, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("Source", New String(){"Id","Source"}), addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})

Adicione um controle Cabeçalho ao seu aplicativo e o renomeie como "CabeçalhoDeContagemDeTickets":
1. No campo Texto , abra o editor de expressão e escreva a seguinte expressão VB:
```
(filteredTicketListSource.totalRecords).ToString +" Tickets"(filteredTicketListSource.totalRecords).ToString +" Tickets"
```

Adicione um controle HTML personalizado ao seu aplicativo e o renomeie como “Gráfica”:

Abra o Editor de código e substitua o conteúdo do espaço reservado pelos seguintes fragmentos de código:

Editor	Código	Uso
HTML	`<script src="https://cdn.jsdelivr.net/npm/chart.js"> </script> <div class="chartContainer"> <canvas class="pieChart" id="myChart"></canvas> </div>`<script src="https://cdn.jsdelivr.net/npm/chart.js"> </script> <div class="chartContainer"> <canvas class="pieChart" id="myChart"></canvas> </div>	Gera um modelo de gráfico JavaScript a partir de uma biblioteca de código aberto e aplica as classes de estilo nesse gráfico.
CSS	`.chartContainer { height: 100%; background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #526069; display: flex; align-items: center; justify-content: center; } .pieChart { width: 50%; max-width: 400px; max-height: 400px; }`.chartContainer { height: 100%; background-color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-weight: bold; color: #526069; display: flex; align-items: center; justify-content: center; } .pieChart { width: 50%; max-width: 400px; max-height: 400px; }	Define duas classes de estilos: `.chartContainer` e `.pieChart`.
JavaScript	// Create an object to store counts var counts = {"Email": 0, "Phone": 0, "Chat": 0}; // Mock data to see the chart in designer, You can assign it with empty array if you don't want to see chart in designer var Tickets = [ {Source: { Source: 'Phone' }}, ]; // Function to count the number of tickets per Source function countTickets(tickets) { counts = {"Email": 0, "Phone": 0, "Chat": 0}; // Reset counts to zero for (var i = 0; i < tickets.length; i++) { counts[tickets[i].Source.Source]++; } } countTickets(Tickets); // Count tickets in the initial data // Create a Chart var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ['Email', 'Phone', 'Chat'], datasets: [{ label: '# of Tickets', data: [counts["Email"], counts["Phone"], counts["Chat"]], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)' ], borderWidth: 1 }] }, options: { onClick: function(evt, elements) { if (elements.length) { var chartElement = elements[0]; var label = this.data.labels[chartElement.index]; OutputSource = label; console.log(OutputSource); // You can see the stored value in browser's console on each click App.setVariable('selectedSourceType', OutputSource); } } } }); // Function to update chart's data function updateChart(data) { NewTickets = data; // New data to update the chart countTickets(NewTickets); myChart.data.datasets[0].data = [counts["Email"], counts["Phone"], counts["Chat"]]; myChart.update(); let sourceWithData = Object.keys(counts).find(ticketSource => { return counts[ticketSource] > 0; }); if(sourceWithData) { App.setVariable('selectedSourceType', sourceWithData); } } //Listen for updates to the ticket data and update chart async function registerOnChangeEvent() { App.onVariableChange('filteredTicketListSource',(listSource) => { updateChart(listSource.data); }) const listSource = await App.getVariable('filteredTicketListSource'); if(listSource?.data?.length > 0) { updateChart(listSource.data); } } registerOnChangeEvent();// Create an object to store counts var counts = {"Email": 0, "Phone": 0, "Chat": 0}; // Mock data to see the chart in designer, You can assign it with empty array if you don't want to see chart in designer var Tickets = [ {Source: { Source: 'Phone' }}, ]; // Function to count the number of tickets per Source function countTickets(tickets) { counts = {"Email": 0, "Phone": 0, "Chat": 0}; // Reset counts to zero for (var i = 0; i < tickets.length; i++) { counts[tickets[i].Source.Source]++; } } countTickets(Tickets); // Count tickets in the initial data // Create a Chart var ctx = document.getElementById('myChart').getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ['Email', 'Phone', 'Chat'], datasets: [{ label: '# of Tickets', data: [counts["Email"], counts["Phone"], counts["Chat"]], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)' ], borderWidth: 1 }] }, options: { onClick: function(evt, elements) { if (elements.length) { var chartElement = elements[0]; var label = this.data.labels[chartElement.index]; OutputSource = label; console.log(OutputSource); // You can see the stored value in browser's console on each click App.setVariable('selectedSourceType', OutputSource); } } } }); // Function to update chart's data function updateChart(data) { NewTickets = data; // New data to update the chart countTickets(NewTickets); myChart.data.datasets[0].data = [counts["Email"], counts["Phone"], counts["Chat"]]; myChart.update(); let sourceWithData = Object.keys(counts).find(ticketSource => { return counts[ticketSource] > 0; }); if(sourceWithData) { App.setVariable('selectedSourceType', sourceWithData); } } //Listen for updates to the ticket data and update chart async function registerOnChangeEvent() { App.onVariableChange('filteredTicketListSource',(listSource) => { updateChart(listSource.data); }) const listSource = await App.getVariable('filteredTicketListSource'); if(listSource?.data?.length > 0) { updateChart(listSource.data); } } registerOnChangeEvent();	Define as funções variáveis e adiciona a interatividade ao gráfico.

Editor

Código

Uso

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js">
</script>
<div class="chartContainer">
  <canvas class="pieChart" id="myChart"></canvas>
</div><script src="https://cdn.jsdelivr.net/npm/chart.js">
</script>
<div class="chartContainer">
  <canvas class="pieChart" id="myChart"></canvas>
</div>

Gera um modelo de gráfico JavaScript a partir de uma biblioteca de código aberto e aplica as classes de estilo nesse gráfico.

CSS

.chartContainer {
  height: 100%;
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #526069;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pieChart {
  width: 50%;
  max-width: 400px;
  max-height: 400px;
}.chartContainer {
  height: 100%;
  background-color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  color: #526069;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pieChart {
  width: 50%;
  max-width: 400px;
  max-height: 400px;
}

Define duas classes de estilos: .chartContainer e .pieChart.

JavaScript

// Create an object to store counts
var counts = {"Email": 0, "Phone": 0, "Chat": 0};

// Mock data to see the chart in designer, You can assign it with empty array if you don't want to see chart in designer
var Tickets = [
  {Source: { Source: 'Phone' }},
];

// Function to count the number of tickets per Source
function countTickets(tickets) {
  counts = {"Email": 0, "Phone": 0, "Chat": 0};   // Reset counts to zero
  for (var i = 0; i < tickets.length; i++) {
    counts[tickets[i].Source.Source]++;
  }
}

countTickets(Tickets); // Count tickets in the initial data

// Create a Chart
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Email', 'Phone', 'Chat'],
    datasets: [{
      label: '# of Tickets',
      data: [counts["Email"], counts["Phone"], counts["Chat"]],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    onClick: function(evt, elements) {
      if (elements.length) {
        var chartElement = elements[0];
        var label  = this.data.labels[chartElement.index];
        OutputSource = label;
        console.log(OutputSource); // You can see the stored value in browser's console on each click
        App.setVariable('selectedSourceType', OutputSource);
      }
    }
  }
});

// Function to update chart's data
function updateChart(data) {
  NewTickets = data;
    // New data to update the chart
    countTickets(NewTickets);
    myChart.data.datasets[0].data = [counts["Email"], counts["Phone"], counts["Chat"]];
    myChart.update();

let sourceWithData = Object.keys(counts).find(ticketSource => {
  return counts[ticketSource] > 0;
});
if(sourceWithData) {
  App.setVariable('selectedSourceType', sourceWithData);
}
}

//Listen for updates to the ticket data and update chart
async function registerOnChangeEvent() {
  App.onVariableChange('filteredTicketListSource',(listSource) => {
    updateChart(listSource.data);
  })
  const listSource = await App.getVariable('filteredTicketListSource');
  if(listSource?.data?.length > 0) {
    updateChart(listSource.data);
  }
}

registerOnChangeEvent();// Create an object to store counts
var counts = {"Email": 0, "Phone": 0, "Chat": 0};

// Mock data to see the chart in designer, You can assign it with empty array if you don't want to see chart in designer
var Tickets = [
  {Source: { Source: 'Phone' }},
];

// Function to count the number of tickets per Source
function countTickets(tickets) {
  counts = {"Email": 0, "Phone": 0, "Chat": 0};   // Reset counts to zero
  for (var i = 0; i < tickets.length; i++) {
    counts[tickets[i].Source.Source]++;
  }
}

countTickets(Tickets); // Count tickets in the initial data

// Create a Chart
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ['Email', 'Phone', 'Chat'],
    datasets: [{
      label: '# of Tickets',
      data: [counts["Email"], counts["Phone"], counts["Chat"]],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)'
      ],
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    onClick: function(evt, elements) {
      if (elements.length) {
        var chartElement = elements[0];
        var label  = this.data.labels[chartElement.index];
        OutputSource = label;
        console.log(OutputSource); // You can see the stored value in browser's console on each click
        App.setVariable('selectedSourceType', OutputSource);
      }
    }
  }
});

// Function to update chart's data
function updateChart(data) {
  NewTickets = data;
    // New data to update the chart
    countTickets(NewTickets);
    myChart.data.datasets[0].data = [counts["Email"], counts["Phone"], counts["Chat"]];
    myChart.update();

let sourceWithData = Object.keys(counts).find(ticketSource => {
  return counts[ticketSource] > 0;
});
if(sourceWithData) {
  App.setVariable('selectedSourceType', sourceWithData);
}
}

//Listen for updates to the ticket data and update chart
async function registerOnChangeEvent() {
  App.onVariableChange('filteredTicketListSource',(listSource) => {
    updateChart(listSource.data);
  })
  const listSource = await App.getVariable('filteredTicketListSource');
  if(listSource?.data?.length > 0) {
    updateChart(listSource.data);
  }
}

registerOnChangeEvent();

Define as funções variáveis e adiciona a interatividade ao gráfico.

Clique em Salvar.
Mude para a guia Estilo e defina o seguinte Tamanho:

Width 1000 px
Height 400 px

Adicione um controle Cabeçalho ao seu aplicativo e o renomeie como "sourceTypeHeader":
1. No campo Texto , abra o editor de expressão e escreva a seguinte expressão VB:
```
"Tickets created through " & selectedSourceType"Tickets created through " & selectedSourceType
```

Adicione um controle Editar grade ao seu aplicativo e o renomeie como "TicketsListByType".

No campo Origem de dados , abra o editor de expressão e escreva a seguinte expressão VB:

Fetch(of Tickets)(createFilterGroup(Nothing, New FilterGroup(){createFilterGroup(New QueryFilter(){addFilter(MainPage.TicketsListByType.SearchColumn, "contains", MainPage.TicketsListByType.SearchTerm)}, Nothing, 0), createFilterGroup(New QueryFilter(){addFilter("Source.Source", "=", selectedSourceType), addFilter("CustomerName", "contains", MainPage.CustomerFilterDropdown.SelectedItem)}, Nothing, 0)}, 0), New PaginationProps(MainPage.TicketsListByType.PageStart, MainPage.TicketsListByType.PageLimit), New SortOption(){addSortOption(MainPage.TicketsListByType.SortColumn, Not(Not(MainPage.TicketsListByType.isDescending)))}, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("Source", New String(){"Id","Source"}), addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})Fetch(of Tickets)(createFilterGroup(Nothing, New FilterGroup(){createFilterGroup(New QueryFilter(){addFilter(MainPage.TicketsListByType.SearchColumn, "contains", MainPage.TicketsListByType.SearchTerm)}, Nothing, 0), createFilterGroup(New QueryFilter(){addFilter("Source.Source", "=", selectedSourceType), addFilter("CustomerName", "contains", MainPage.CustomerFilterDropdown.SelectedItem)}, Nothing, 0)}, 0), New PaginationProps(MainPage.TicketsListByType.PageStart, MainPage.TicketsListByType.PageLimit), New SortOption(){addSortOption(MainPage.TicketsListByType.SortColumn, Not(Not(MainPage.TicketsListByType.isDescending)))}, Nothing, New ExpansionFieldOption(){addExpansionFieldOption("Source", New String(){"Id","Source"}), addExpansionFieldOption("CreatedBy", New String(){"Id","Name"}), addExpansionFieldOption("UpdatedBy", New String(){"Id","Name"})})

Para a PáginaPrincipal, mude para a guia Eventos e clique em Criar regra.

Adicione uma regra Definir valor , com a seguinte entrada:
Item a ser definido
allTicketsallTickets
Valor Abra o Construtor de consultas, selecione a entidade Tickets e clique em Salvar.

Adicione uma segunda regra Definir valor , com a seguinte entrada:

Item a ser definido	`filteredTicketListSource`filteredTicketListSource
Valor	Abra o Construtor de consultas, selecione a entidade Tickets e clique em Salvar.

Visualize o aplicativo, selecione uma opção no menu suspenso e observe a atualização do gráfico. Clique em uma seção do gráfico e observe a grade de edição se atualizando com os dados da seção selecionada.

HTML personalizado: criação de seletores de data e hora

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.

Baixar aplicativo de demonstração do GitHub

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.

HTML personalizado: criação de campos de senha

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.

Baixar aplicativo de demonstração do GitHub

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.

HTML personalizado: criando campos de entrada de assinatura

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.

Baixar aplicativo de demonstração do GitHub

Visualizar aplicativo de demonstração na nuvem

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.

Geral

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.

Events

Não há eventos.

Estilo

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 (...).

Editor de código para HTML personalizado

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.

Importante:

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.

Adição de recursos externos

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.

Para fazer referência a arquivos .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.

Atalhos de acessibilidade para a tecla Tab

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.

O editor de HTML

Neste painel, você pode inserir a estrutura do seu controle, que geralmente está contida dentro das tags <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.

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;
}

O editor de JavaScript

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',
      },
    },
  },
});

Como usar variáveis no HTML personalizado

Para estabelecer a comunicação entre o controle HTML personalizado e outros controles ou integrações, recomendamos a criação de variáveis e o uso das funções integradas setVariable(), getVariable() e onVariableChange() .

getVariable()

No editor de JavaScript, use essa função para obter o valor de uma variável existente.

Por exemplo, para passar o valor de uma variável para um 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();

Observação:

A funçãogetVariable() é assíncrona, o que requer que você use await.
Se você chamar getVariable() dentro de uma função, faça essa função async. No exemplo fornecido, criamos a função init() e a invocamos imediatamente.
Se você chamar getVariable() em um nível superior, incorpore-o dentro de uma função async .

Para lidar com erros, como nomes de variáveis inválidos, use a instrução try-catch. Por exemplo:

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();

Observação:

Para aguardar a conclusão da operação de definição antes de executar outro código, use await.

Para lidar com erros, como nomes de variáveis inválidos ou incompatibilidade de tipo entre a variável e o valor definido, use a instrução try-catch. Por exemplo:

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);
});

No exemplo a seguir, atribuímos a função retornada pelo 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();

Observação:

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, chame getVariable() antes de chamar onVariableChange().
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: `new AppsFile("https://image.jpg")`new AppsFile("https://image.jpg")	Objeto do arquivo: `{FileSize: 0, Name: "", URL: "https://image.jpg", __infoType: "$metadata"}`{FileSize: 0, Name: "", URL: "https://image.jpg", __infoType: "$metadata"}
GUID	"5637F7DB-391D-4C8B-805D-0A918531CA3E"
List(Of string)	["Banana", "Kiwi", "Apple", "Lemon"]
ListSource(Of <Entity>)	`{ data: [{Name: "John", Age: "28", ...},{Name: "Kane", Age: "48", ...}], totalRecords: 2 }`{ data: [{Name: "John", Age: "28", ...},{Name: "Kane", Age: "48", ...}], totalRecords: 2 }
<Entity> (Single entity row)	`{ Name: "John", Age: "28", ... }`{ Name: "John", Age: "28", ... }
ListSource(Of <Choiceset>)	`{ data: [{DisplayName: "Male", Id: "00F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Male", ...}, {DisplayName: "Female", Id: "01F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Female", ...}], totalRecords: 2 }`{ data: [{DisplayName: "Male", Id: "00F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Male", ...}, {DisplayName: "Female", Id: "01F3372D-3920-EC11-AE72-0003FFBA1E91", Name: "Female", ...}], totalRecords: 2 }
Datatable	`[{From: 'Ahmedabad', To: 'Azua', ...},{From: 'banglore', To: 'Dominican Republic',...},...]`[{From: 'Ahmedabad', To: 'Azua', ...},{From: 'banglore', To: 'Dominican Republic',...},...]

Práticas recomendadas para HTML personalizado

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.

Limitações funcionais

O HTML personalizado não permite disparar regras de controle.
A conexão do controle ao Apps é feita apenas usando as funções variáveis: getVariable(), setVariable(), onVariableChange().
Para acessar dados de Processo ou Fila, você precisa atribuir uma variável para cada propriedade de Processo ou Fila.
As dimensões do controle HTML não se ajustam dinamicamente para exibir pop-ups ou menus suspensos; portanto, é necessário definir 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() e onVariableChange() 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
- Como navegar no contexto de navegador de nível superior
- Entrada em tela cheia usando requestFullscreen()
- Captura de tela usando MediaDevices.getDisplayMedia()
- Acessando câmera ou gatilho usando MediaDevices.getUserMedia()
- Solicitação de pagamentos
- Acessando o local usando navigator.geolocation()
- Compartilhando dados usando navigator.share()

Depurando o código de um controle HTML personalizado

Adição e filtragem de logs do console de um controle HTML personalizado

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.html para o controle HTML desejado.

Os logs do controle selecionado são exibidos no console.

Assista o vídeo para obter mais detalhes:

Adição de pontos de interrupção

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:

Propriedades VB

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.