apps
2024.10
true
Importante :
Este contenido se ha localizado parcialmente a partir de un sistema de traducción automática. La localización de contenidos recién publicados puede tardar entre una y dos semanas en estar disponible.
UiPath logo, featuring letters U and I in white

Guía del usuario de Apps

Automation CloudAutomation Cloud Public SectorAutomation Suite
Última actualización 18 de dic. de 2024

HTML personalizado

El control HTML personalizado está dirigido a usuarios avanzados y ofrece la flexibilidad de los lenguajes de programación HTML, CSS y JavaScript para crear controles personalizados e interactivos según lo requieran sus necesidades empresariales. El control incluye editores dedicados para código HTML, CSS y JavaScript, con la ventaja añadida de incorporar archivos CSS y JavaScript alojados externamente a través de URL.

Demos

HTML personalizado: creación de gráficos

Introducción

Esta aplicación muestra cómo crear diferentes tipos de gráficos utilizando bibliotecas de JavaScript como d3.js o chart.js.

Aplicación de demostración: pruébela usted mismo

Para probar los gráficos interactivos, utiliza la aplicación de demostración.

Aplicación de demostración: instrucciones de uso

  1. En UiPath® Apps, crea una nueva aplicación e importa la aplicación de demostración descargada.
  2. Previsualiza tu aplicación para interactuar con todos los tipos de gráficos.

HTML personalizado: crear un gráfico circular interactivo utilizando funciones variables

Introducción

Esta aplicación combina los controles de entidades, HTML personalizado y Editar cuadrícula para mostrar un gráfico circular interactivo. La interactividad se activa seleccionando una opción de un menú desplegable, que cambia las secciones del gráfico circular y los registros en la cuadrícula de edición. Posteriormente, al hacer clic en una sección del gráfico se actualizan los datos en la cuadrícula de edición.

Aplicación de demostración: pruébela usted mismo

Para probar el gráfico circular interactivo, utiliza la aplicación de demostración o sigue el procedimiento.

Aplicación de demostración: instrucciones de uso

  1. Vista previa de la aplicación de demostración.
  2. En el menú desplegable "Filtrar tickets por nombre de cliente", selecciona una opción. El recuento total de tickets, la representación del gráfico circular y los datos en la cuadrícula de edición deberían cambiar.
  3. Mantén el puntero sobre un sector del gráfico. La información sobre herramientas muestra el nombre de la categoría y el recuento de tickets.
  4. Haz clic en un sector del gráfico. La cuadrícula de edición muestra los registros de la categoría seleccionada.

Procedimiento

Para ver cómo se utilizan las entidades y variables en el control HTML personalizado, descarga los siguientes archivos de la aplicación en tu máquina local:

Después de la descarga, continúa con los siguientes pasos:

  1. En UiPath® Data Service, haz clic en Importar esquema:
    1. Selecciona el archivo ticket_entities_schema.json descargado anteriormente.
    2. En la pestaña Entidades , marca las casillas Tickets y Origen de tickets.
    3. Cambia a la pestaña Conjuntos de opciones y marca las casillas Continentes y Nivel de fricción.
    4. Haz clic en Importar.
  2. En UiPath® Data Service, selecciona la entidad Origen de tickets:
    1. Haz clic en Importar datos.
    2. Selecciona el archivo ticketsource_entity_data.csv previamente descargado y haz clic en Abrir.
    3. Cambia a la pestaña Datos para ver los registros cargados.
  3. En UiPath® Data Service, selecciona la entidad Tickets:
    1. Haz clic en Importar datos.
    2. Selecciona el archivo tickets_entity_data.csv previamente descargado y haz clic en Abrir.
    3. Los datos de los campos de tipo Relación y Conjunto de opciones no se importan automáticamente. Debe rellenar manualmente los datos de estos campos.
    4. Cambia a la pestaña Datos . Para cada registro de Tickets, actualiza los valores del campo Origen seleccionando aleatoriamente Chat, Teléfono o Correo electrónico.
    5. En la pestaña Datos , para cada registro de Tickets, actualiza los valores del campo Fricción seleccionando aleatoriamente 1, 2 o 3.
  4. Para importar el archivo de la aplicación, sigue este paso y luego ve al paso 14.
    En UiPath® Apps, crea una nueva aplicación VB:
    1. Haz clic en Importar desde archivo.
    2. Selecciona el archivo CustomHTMLPieChart_DemoApp.uiapp previamente descargado y haz clic en Abrir.
    3. Para corregir los errores, reemplaza la entidad en la aplicación importada con la que creaste previamente en los pasos 2 y 3.
    4. En la aplicación importada, selecciona el control desplegable llamado "CustomFilterDropdown", abre el editor de expresiones para la propiedad Origen de la lista y guárdalo.
  5. Para crear la aplicación desde cero, sigue los pasos 5 a 14.
    En UiPath® Apps, crea una nueva aplicación VB.
  6. En tu aplicación, haz referencia a las entidades creadas en los pasos 1 a 3.
  7. Crea las siguientes variables, basadas en entidades de Data Service:

    Nombre de la variable

    Tipo

    Entidad referenciada

    allTickets

    Mostrar código fuente

    Tickets

    filteredTicketListSource

    Mostrar código fuente

    Tickets

    selectedSourceType

    Texto

    -

    ticketSourceTypes

    Mostrar código fuente

    Origen de los tickets

  8. Añade un control desplegable a tu aplicación y cámbiale el nombre a "CustomerFilterDropdown":
    1. En el campo Etiqueta , cámbiale el nombre a "Filtrar tickets por nombre de cliente".
    2. En el campo Origen de la lista , abre el editor de expresiones y escribe la siguiente expresión 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}
    3. Cambia a la pestaña Eventos y haz clic en Crear regla.
    4. Añade la regla Establecer valor , con la siguiente entrada:
      Elementos para configurar
      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"})})
  9. Añade un control Encabezado a tu aplicación y cámbiale el nombre a "TicketCountHeader":
    1. En el campo Texto , abre el editor de expresiones y escribe la siguiente expresión VB: 
      (filteredTicketListSource.totalRecords).ToString +" Tickets"(filteredTicketListSource.totalRecords).ToString +" Tickets"
  10. Añade un control HTML personalizado a tu aplicación y cámbiale el nombre a "Gráfico":
    1. Abre el Editor de código y reemplaza el contenido del marcador de posición con los siguientes 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>

      Genera un gráfico JavaScript de plantilla a partir de una biblioteca de código abierto y aplica las clases de estilo en ese 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 dos clases de estilo: .chartContainer y .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 las funciones variables y añade la interactividad al gráfico.

    2. Haz clic en Guardar.
    3. Cambia a la pestaña Estilo y establece el siguiente Tamaño:
      Width1000 px
      Height400 px
  11. Añade un control de encabezado a tu aplicación y cámbiale el nombre a "sourceTypeHeader":
    1. En el campo Texto , abre el editor de expresiones y escribe la siguiente expresión VB: 
      "Tickets created through " & selectedSourceType"Tickets created through " & selectedSourceType
  12. Añade un control Editar cuadrícula a tu aplicación y cámbiale el nombre a "TicketsListByType".
    1. En el campo Fuente de datos , abre el editor de expresiones y escribe la siguiente expresión 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"})})
  13. Para la página principal, cambia a la pestaña Eventos y haz clic en Crear regla.
    1. Añade una regla Establecer valor , con la siguiente entrada:
      Elementos para configurar
      allTicketsallTickets
      ValorAbre el Generador de consultas, selecciona la entidad Tickets y haz clic en Guardar.
    2. Añade una segunda regla Establecer valor , con la siguiente entrada:
      Elementos para configurar
      filteredTicketListSourcefilteredTicketListSource
      ValorAbre el Generador de consultas, selecciona la entidad Tickets y haz clic en Guardar.
  14. Previsualiza la aplicación, selecciona una opción en el menú desplegable y observa cómo se actualiza el gráfico. Haz clic en una sección del gráfico y observa que la cuadrícula de edición se actualiza con los datos de la sección seleccionada.

HTML personalizado: creación de selectores de fecha y hora

Introducción

Esta aplicación muestra cómo crear un selector de fecha y hora personalizado.

Aplicación de demostración: pruébela usted mismo

Para probar el selector de fecha y hora, utiliza la aplicación de demostración.

Aplicación de demostración: instrucciones de uso

  1. En UiPath® Apps, crea una nueva aplicación e importa la aplicación de demostración descargada.
  2. Previsualiza tu aplicación para interactuar con el selector de fecha y hora.

HTML personalizado: creación de campos de contraseña

Introducción

Esta aplicación muestra cómo crear campos de contraseña.

Aplicación de demostración: pruébela usted mismo

Para probar el campo de contraseña, utiliza la aplicación de demostración.

Aplicación de demostración: instrucciones de uso

  1. En UiPath® Apps, crea una nueva aplicación e importa la aplicación de demostración descargada.
  2. Previsualiza tu aplicación para interactuar con el campo de contraseña.

HTML personalizado: creación de campos de entrada de firma

Introducción

Esta aplicación muestra cómo crear campos de entrada de firma.

Aplicación de demostración: pruébela usted mismo

Para probar la entrada de la firma, utiliza la aplicación de demostración.

Aplicación de demostración: instrucciones de uso

  1. En UiPath® Apps, crea una nueva aplicación e importa la aplicación de demostración descargada.
  2. Es posible que observe algunos errores. Para solucionarlos, sustituye el depósito de almacenamiento al que se hace referencia "Aplicación de demostración" por uno en tu tenant.
  3. Previsualiza la aplicación para interactuar con el campo de entrada de la firma.

General

  • Abrir editor de código : abre un editor de tres paneles para añadir el código HTML, CSS y JavaScript.

  • Etiqueta accesible : la descripción del control. Los lectores de pantalla utilizan esta propiedad para mejorar la accesibilidad.

  • Oculto: si es verdadero, oculta el control en tiempo de ejecución.

  • Deshabilitado : si es verdadero, hace que el control esté inactivo en tiempo de ejecución. El contenido HTML, CSS y JavaScript se carga, pero no responde a las acciones del usuario, como hacer clic.

Events

No hay eventos.

Estilo

  • Alineación de control: por defecto, hereda la alineación principal. Se puede establecer una alineación diferente a la principal. Para volver a la alineación principal, anula la selección de las opciones anuladas.

    Nota: la alineación depende del diseño seleccionado para el elemento principal (Vertical vs Horizontal).
  • Borde : el borde del control. Se puede configurar el grosor del borde y el radio .

  • Margen: el margen del control. De forma predeterminada, se establece un margen de 4px. Se combinan las propiedades de los márgenes superiores/inferiores e izquierdos/derechos. Estas propiedades se pueden separar utilizando el botón Enlace situado a la derecha de la sección Margen.

  • Tamaño: el ancho y la altura del control. El tamaño está establecido como auto de forma predeterminada. Para establecer valores mínimos o máximos, haz clic en el icono de tres puntos (...).

Editor de código para HTML personalizado

El editor de código del control HTML personalizado proporciona tres paneles para introducir código en los lenguajes de programación HTML, CSS y JavaScript. Cada editor es compatible con IntelliSense, o la finalización automática de código, y el resaltado de sintaxis.

El código de los paneles se compila en un proyecto y se renderiza en Apps Studio para su vista previa. Para observar la funcionalidad del control, previsualiza la aplicación.

docs image
Importante:

  • Cada editor tiene un tamaño máximo de contenido de 5 MB. Cuando el contenido supera este tamaño, ya no se pueden guardar los cambios.

  • IntelliSense no funciona para los códigos CSS y JavaScript escritos en el editor HTML.

Añadir recursos externos

Si ya tienes estilos o scripts definidos, puedes hacer referencia a ellos en el control, sin necesidad de escribir el código en los paneles CSS o JavaScript correspondientes.

Para hacer referencia a archivos .csso .js existentes:

  1. En el Editor de código del control HTML personalizado, cambia a la pestaña Recursos externos .

  2. En la sección CSS, añade un archivo CSS externo. El archivo debe estar alojado en una URL accesible por red para garantizar la compatibilidad y la disponibilidad donde se ejecuta la aplicación.

  3. En la sección JavaScript, añade un archivo de script externo. El archivo debe estar alojado en una URL accesible por red para garantizar la compatibilidad y la disponibilidad donde se ejecuta la aplicación.

  4. Cuando hayas terminado de añadir todos los recursos externos, haz clic en Guardar.

docs image

Atajos de accesibilidad para la tecla Tabulador

De forma predeterminada, la tecla Tab añade un espacio de tabulación dentro del editor actual. Para personalizar el comportamiento de la tecla Tab, utiliza los siguientes atajos:

SO

Atajo

Comportamiento

Ventanas

CTRL+M

Indica a la tecla Tabulador que navegue entre los paneles y cambie el enfoque en los botones visibles del editor. Presiona CTRL+M de nuevo para volver al comportamiento predeterminado de la pestaña.

MacOS

CTRL+Mayús+M

Indica a la tecla Tabulador que navegue entre los paneles y cambie el enfoque en los botones visibles del editor. Presiona CTRL+Shift+M de nuevo para volver al comportamiento de pestaña predeterminado.

El editor HTML

En este panel puedes introducir la estructura de tu control, que suele estar contenida dentro de las etiquetas <body></body> de un bloque de código HTML.

Por ejemplo, para añadir el elemento contenedor para un gráfico circular interactivo en tu aplicación, utilizarías el siguiente fragmento de código 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>

Donde:

  • id="myChart" hace referencia al elemento JavaScript "myChart" que genera el gráfico circular interactivo dentro del elemento HTML. Para obtener más información, consulta El editor de JavaScript.
  • class="chart-container" se refiere a la clase CSS "chart-container" que añade el estilo para el gráfico circular dentro del elemento HTML. Para obtener más información, consulta El editor de CSS.

El editor de CSS

En este panel puedes introducir el estilo de tu control y los elementos que contiene.

Por ejemplo, para añadir colores y un borde al gráfico circular, utilizarías el siguiente fragmento de CSS:

.chart-container {
    background-color: #f3f7e9;
    border: 1px solid #cccccc;
}.chart-container {
    background-color: #f3f7e9;
    border: 1px solid #cccccc;
}

El editor JavaScript

En este panel puedes crear la parte interactiva de tu control, como actualizaciones de contenido oportunas, mapas o gráficos animados en 2D/3D.

Por ejemplo, para crear un gráfico circular para las ventas de productos Apple en todo el mundo, y diseñarlo para que muestre los valores del sector seleccionado, harías lo siguiente:

  1. Añade el siguiente recurso externo de JavaScript:

    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

  2. Utiliza el siguiente fragmento de 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',
      },
    },
  },
});

Uso de variables en HTML personalizado

Para establecer la comunicación entre el control HTML personalizado y otros controles o integraciones, recomendamos crear variables y utilizar las funciones integradas setVariable(), getVariable() y onVariableChange() .

getVariable()

En el editor de JavaScript, utiliza esta función para obtener el valor de una variable existente.

Por ejemplo, para pasar el valor de una variable a un internalValue, usarías el siguiente 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();
Nota:
  • La funcióngetVariable() es asíncrona, lo que requiere que utilices await.
  • Si llamas a getVariable() dentro de una función, haz que esa función sea async. En el ejemplo proporcionado, creamos la función init() y la invocamos inmediatamente.
  • Si llamas a getVariable() en un nivel superior, insértalo dentro de una función async .
Para gestionar errores como nombres de variables no válidos, utiliza la instrucción try-catch. Por ejemplo: 
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()

En el editor de JavaScript, utiliza esta función para establecer un valor en una variable existente. El primer argumento es el nombre de la variable, y el segundo argumento es el valor que quieres establecer. 

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();
Nota:
Para esperar a que se complete la operación de configuración antes de ejecutar otro código, utiliza await.
Para manejar errores como nombres de variables no válidos o falta de coincidencia de tipos entre la variable y el valor establecido, utiliza la declaración try-catch. Por ejemplo: 
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()

En el editor de JavaScript, utiliza esta función para escuchar los cambios de un valor de variable existente y acceder al último valor de variable. 

App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});
En el siguiente ejemplo, asignamos la función devuelta por onVariableChange() a la variable deregister . A continuación, si quieres dejar de escuchar los cambios de variables, puedes invocar la función 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();
Nota:

  • El listener se inicia después de que el control HTML personalizado se represente por completo. Si el valor de una variable cambia antes de que se inicialice el control HTML personalizado, el valor actualizado no se captura.

    Para obtener el último valor de la variable, llama a getVariable() antes de llamar a onVariableChange().

  • El control HTML y las funciones que contiene se inicializan después de que el control se muestre en tiempo de ejecución.

Tipos de variables

Tipo de variable de aplicación

Ejemplo de respuesta de funciones variables

Text (String)

"Hello world"

UInt64 (Int)

100

Decimal number

50.25

True/False (Boolean)

Verdadero

DateOnly

2024-01-02

(Formato: AAAA-MM-DD)

DateTimeOffset

2024-01-06T09:54:41.9170000Z

(Formato JS equivalente: cadena ISO de objeto de fecha)

AppsFile: valor de un control de selector de archivos Objeto de archivo JS
docs image
AppsFile: valor creado a partir de la URL

Por ejemplo: 

new AppsFile("https://image.jpg")new AppsFile("https://image.jpg")

                                          

                                       
                                    		
                                       
Objeto de archivo:
                                       

                                       
{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',...},...]

                           
                        

                        
                     

                     
                     
                  

                  
                  
               

               
            

            
         

         
         

            
Mejores prácticas para HTML personalizado

            
            

               
    
                  
  • 
                     
    No incluyas datos confidenciales en el control HTML personalizado debido a su acceso del lado del cliente.
    
                     
                  
    • 
                  
                  
  • 
                     
    No utilices las etiquetas <html> y <head> dentro del editor HTML, ya que el código se añade automáticamente dentro de las etiquetas <body> .
                     
    
                     
                  
    • 
                  
                  
  • 
                     
    Añade las URL de CDN de recursos externos como Bootstrap, jQuery u otros SDK de JavaScript en la pestaña Recursos externos .
                     
    
                     
                  
    • 
                  
                  
  • 
                     
    Si quieres dejar de escuchar el cambio de variable, utiliza la función deregister() .
                     
    
                     
                  
    • 
                  
                  
  • 
                     
    Evita grandes bucles de datos para evitar ralentizar la aplicación y mantener el control receptivo.
    
                     
                  
    • 
                  
                  
  • 
                     
    Minimiza el uso de elementos DOM tanto como sea posible: crea elementos DOM solo cuando sea necesario y elimínalos cuando se vuelvan obsoletos.
                     
    
                     
                  
    • 
                  
                  
  • 
                     
    Utiliza el desplazamiento infinito o virtual para grandes conjuntos de datos en lugar del desplazamiento estándar.
    
                     
                  
    • 
                  
                  
  • 
                     
    Cree y mantenga un código limpio, optimizado y sin redundancia.
    
                     
                  
    • 
                  
               

               
            

            
         

         
         

            
Limitaciones funcionales

            
            

               
    
                  
  • 
                     
    In the JavaScript editor, adding infinite or long-running loops causes a block in the main thread, making the browser tab unresponsive. To prevent this, ensure that conditions inside of loops do not run indefinitely. However, if you miss an infinite loop which results in an unresponsive state, force close the browser tab and reopen it.
                     
    
                     
                  
    • 
                  
                  
  • 
                     
    El HTML personalizado no ofrece la posibilidad de desencadenar reglas de control.
    
                     
                  
    • 
                  
                  
  • 
                     
    Para conectar el control a Apps, debes utilizar las funciones variables: getVariable(), setVariable(), onVariableChange().
                     
    
                     
                  
    • 
                  
                  
  • 
                     
    Para acceder a los datos de Proceso o Cola, debes asignar una variable para cada propiedad de Proceso o Cola.
    
                     
                  
    • 
                  
                  
  • 
                     
    Las dimensiones del control HTML no se ajustan dinámicamente para mostrar ventanas emergentes o menús desplegables. Debes establecer manualmente el tamaño del control HTML para que se ajuste a estos menús.
                     
    
                     
                  
    • 
                  
                  
  • 
                     
    No se puede interactuar con el control HTML durante el tiempo de diseño.
    
                     
                  
    • 
                  
                  
  • 
                     
    Las funciones setVariable(), getVariable() y onVariableChange() solo funcionan en tiempo de ejecución.
                     
    
                     
                  
    • 
                  
                  
  • 
                     
    Los cambios en los nombres de las variables o las eliminaciones de variables no se reflejan automáticamente en los editores de código. Debes actualizar manualmente el código con las variables actuales.
                     
    
                     
                  
    • 
                  
                  
  • 
                     
    Las variables que almacenan archivos desde el control HTML no se pueden utilizar en la regla Cargar archivo en el depósito de almacenamiento o para rellenar los campos Tipo de archivo de las entidades de Data Service.
                     
    
                     
                  
    • 
                  
                  
  • 
                     
    El control puede comunicarse con otros componentes de UiPath® , como Procesos, Colas o Depósitos de almacenamiento, solo mediante el uso de variables.
                     
    
                     
                  
    • 
                  
                  
  • 
                     
    El código CSS preprocesado, que utiliza LESS o SCSS, es incompatible con el control HTML.
    
                     
                  
    • 
                  
                  
  • 
                     
    Las siguientes API fallan silenciosamente cuando se utilizan, debido a problemas de seguridad:
    
                     
                     
      
                        
    • 
                           
      Descargando utilizando el atributo download .
                           
      
                           
                        
      • 
                        
                        
    • 
                           
      Abrir modales usando Window.alert(), Window.confirm(), Window.print(), Window.prompt().
                           
      
                           
                        
      • 
                        
                        
    • 
                           
      Puntero y bloqueo de orientación.
      
                           
                        
      • 
                        
                        
    • 
                           
      Navegar por el contexto del navegador de nivel superior.
      
                           
                        
      • 
                        
                        
    • 
                           
      Entrar en pantalla completa usando requestFullscreen().
                           
      
                           
                        
      • 
                        
                        
    • 
                           
      Captura de pantalla usando MediaDevices.getDisplayMedia().
                           
      
                           
                        
      • 
                        
                        
    • 
                           
      Acceder a la cámara o al micrófono mediante MediaDevices.getUserMedia().
                           
      
                           
                        
      • 
                        
                        
    • 
                           
      Solicitar pagos.
      
                           
                        
      • 
                        
                        
    • 
                           
      Acceder a la ubicación mediante navigator.geolocation().
                           
      
                           
                        
      • 
                        
                        
    • 
                           
      Compartir datos mediante navigator.share().
                           
      
                           
                        
      • 
                        
                     
    
                     
                  
    • 
                  
               

               
            

            
         

         
         

            
Depurar el código de un control HTML personalizado

            
            

            
            

               
Añadir y filtrar registros de consola de un control HTML personalizado

               
               

                  
    
                     
  1. Añade un console.log() en el editor de JavaScript.
    2. 
                     
                     
  2. En tu sesión de Apps Studio, abre la consola del navegador pulsando F12 y, a continuación, selecciona la pestaña Consola .
    3. 
                     
                     
  3. En la configuración de la consola, marca la casilla Solo contexto seleccionado .
    4. 
                     
                     
  4. Desde el menú desplegable de contexto de JavaScript en la parte superior de la página de la consola, selecciona la opción html-control-base.html para el control HTML deseado.
    5. 
                     
                  

                  
                  

                     
Los registros del control seleccionado se muestran en la consola.

                     
                     
Consulta el vídeo para obtener más información:

                     

                  
               

               
            

            
            

               
Añadir puntos de interrupción

               
               

                  
    
                     
  1. Añade un console.log() en el editor de JavaScript.
    2. 
                     
                     
  2. En tu sesión de Apps Studio, abre la consola del navegador pulsando F12 y, a continuación, selecciona la pestaña Consola .
    3. 
                     
                     
  3. En la parte derecha del registro, haz clic en el mensaje de la VM.
    4. 
                     
                  

                  
                  

                     
Se abre el depurador. Selecciona tu punto de interrupción haciendo clic en el número de línea deseado.

                     
                     
Consulta el vídeo para obtener más información:

                     

                  
               

               
            

            
         

         
         

            
Propiedades VB

            
            

               
               

                  

                              
Propiedad VB

                              
                           		
                              
Tipo de datos

                              
                           		
                              
Descripción

                              
                           

                              
AccessibleLabel

                              
                           		Cadena
                              
La descripción del control, utilizada por las tecnologías de accesibilidad como los lectores de pantalla.

                              
                           
OcultoBooleanoDetermina la visibilidad del control HTML personalizado . Si es verdadero, oculta el control en tiempo de ejecución.
                           
DeshabilitadaBooleanoDetermina si el control HTML personalizado está deshabilitado. Si es verdadero, deshabilita la interacción con el control en tiempo de ejecución. El contenido HTML, CSS y JavaScript se carga, pero no responde a las acciones del usuario.
                           

                  
               

               
            

            
         

         
      
¿Te ha resultado útil esta página?
Soporte y servicios 
Obtén la ayuda que necesitas 
UiPath Academy
RPA para el aprendizaje - Cursos de automatización 
Foro de UiPath
Foro de la comunidad UiPath 
Uipath Logo White
Confianza y seguridad 
Términos de uso
Política de privacidad
Política de cookies
© 2005-2024 UiPath. Todos los derechos reservados.