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

1. No UiPath Apps, crie um novo aplicativo e importe o aplicativo de demonstração baixado.
2. 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 entidades, HTML personalizado e os controles 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 por conta própria, 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

1. Visualize o aplicativo de demonstração.
2. 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.
3. Passe o mouse sobre uma fatia do gráfico. A dica de ferramenta exibe o nome da categoria e a contagem de tickets.
4. 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:

• Esquema de entidade
• Dados da entidade Tickets
• Dados para a entidade Origem de tickets
• Arquivo do aplicativo

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

1. 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 dos tíquetes.
   3. Mude para a guia Conjuntos de Escolhas e marque as caixas Continentes e Nível de Atalho.
   4. Clique em Importar.

2. No UiPath Data Service, selecione a entidade Origem dos tickets:

   1. Clique em Importar dados.
   2. Selecione o arquivo ticketsource_entity_data.csv baixado anteriormente e clique em Abrir.
   3. Mude para a guia Dados para ver os registros carregados.

3. 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 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 tíquetes, atualize os valores para o campo Origem selecionando aleatoriamente Chat, Telefone ou Email.
   5. Na guia Dados , para cada registro de Tíquetes, atualize os valores para o campo Atalho selecionando aleatoriamente 1, 2 ou 3.

4. Para importar o arquivo do aplicativo, siga esta etapa e, em seguida, acesse a etapa 14. No UiPath Apps, crie um novo aplicativo VB:

   1. Clique em Importar do 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.

5. Para criar o aplicativo do zero, siga as etapas 5 a 14. No UiPath Apps, crie um novo aplicativo VB.

6. Em seu aplicativo, faça referência às entidades criadas nas etapas 1 a 3.

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

8. Adicione um controle Lista suspensa ao seu aplicativo e renomeie-o para "CustomerFilterDropdown":

   1. No campo Rótulo , renomeie-o como "Filtrar tickets por nome do cliente".

   2. 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}
      

   3. Mude para a guia Eventos e clique em Criar regra.

   4. Adicione a regra Definir valor , com a seguinte entrada:

      Item a ser definido	filteredTicketListSource
      Valor	Fetch(of Tickets)

9. Adicione um controle Cabeçalho ao seu aplicativo e renomeie-o para "TicketCountHeader":

   1. No campo Texto , abra o editor de expressão e escreva a seguinte expressão VB:

      (filteredTicketListSource.totalRecords).ToString +" Tickets"
      

10. Adicione um controle HTML personalizado ao seu aplicativo e renomeie-o para "Gráfica":

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

    • HTML: gera um modelo de gráfico JavaScript de uma biblioteca de código aberto e aplica as classes de estilo nesse gráfico.

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

    • CSS: define duas classes de estilo: .chartContainer e .pieChart.

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

    • JavaScript: define as funções de variáveis e adiciona a interatividade ao gráfico.

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

    2. Clique em Salvar.

    3. Mude para a guia Estilo e defina o seguinte tamanho:

       Width	1000 px
       Height	400 px

11. Adicione um controle Cabeçalho ao seu aplicativo e renomeie-o para "sourceTypeHeader":

    1. No campo Texto , abra o editor de expressão e escreva a seguinte expressão VB:

       "Tickets created through " & selectedSourceType
       

12. Adicione um controle Editar grade ao seu aplicativo e renomeie-o para "TicketsListaPorTipo".

    1. 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"})})
       

13. Para a PáginaPrincipal, alterne para a guia Eventos e, em seguida, clique em Criar regra.

    1. Adicione uma regra Definir valor , com a seguinte entrada:

       Item a ser definido	allTickets
       Valor	Abra o Construtor de consultas, selecione a entidade Tíquetes e, em seguida, clique em Salvar.

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

       Item a ser definido	filteredTicketListSource
       Valor	Abra o Construtor de consultas, selecione a entidade Tíquetes e, em seguida, clique em Salvar.

14. 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

1. No UiPath Apps, crie um novo aplicativo e importe o aplicativo de demonstração baixado.
2. 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

1. No UiPath Apps, crie um novo aplicativo e importe o aplicativo de demonstração baixado.
2. 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

1. No UiPath Apps, crie um novo aplicativo e importe o aplicativo de demonstração baixado.
2. Você pode notar alguns erros. Para corrigi-los, substitua o bucket de armazenamento referenciado "Aplicativo de demonstração" por um em seu tenant.
3. Visualize o aplicativo para interagir com o campo de entrada de assinatura.

Geral

• Abrir editor de código - 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 a ações do usuário, como clicar.

Events

Não há eventos.

Estilo

• Alinhamento de controle — Por padrão, herda o alinhamento parent. É 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 Top/Bottom e Left/Right 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:

1. No editor de código do controle HTML personalizado, mude para a guia Recursos externos .
2. 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.
3. 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.
4. 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>

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

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á:

1. Adicione o seguinte recurso JavaScript externo:

   https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js
   

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

Usando variáveis em 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();

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

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

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

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

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

Observação:

• O ouvinte é iniciado depois que o controle HTML personalizado é renderizado completamente. 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
ArquivoDoApps - valor criado a partir do URL Por exemplo: new AppsFile("https://image.jpg")	Objeto do arquivo: {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 }
<Entity> (Single entity row)	{ 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 }
Datatable	[{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 de 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

• No editor de JavaScript, a adição de loops infinitos ou de longa duração causa um bloqueio no thread principal, tornando a guia do navegador sem resposta. Para evitar isso, certifique-se de que as condições dentro de loops não sejam executadas indefinidamente. No entanto, se você perder um loop infinito que resulta em um estado sem resposta, force o fechamento da guia do navegador e reabra-o.
• Para conectar o controle ao Apps, você deve usar as funções de variáveis: getVariable(), setVariable(), onVariableChange().
• 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() 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 transferências de dados de imagem do controle HTML para um bucket de armazenamento ou para uma entidade usando um URL de dados não devem exceder 1 MB de tamanho de arquivo. Arquivos que excedem esse tamanho podem causar problemas de desempenho.
• 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().

Depurando o código de um controle HTML personalizado

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

1. Adicione um console.log() no editor de JavaScript.
2. Abra o console do navegador pressionando F12 e, em seguida, selecione a guia Console .
3. Nas configurações do console, marque a caixa Apenas contexto selecionado .
4. No menu suspenso do contexto do 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

1. Adicione um console.log() no editor de JavaScript.
2. Abra o console do navegador pressionando F12 e, em seguida, selecione a guia Console .
3. 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.
Hidden	Booleano	Determina a visibilidade do controle HTML personalizado . Se verdadeiro, oculta o controle no tempo de execução.
Disabled	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.