apps

2024.10

true

Wichtig :

Bitte beachten Sie, dass dieser Inhalt teilweise mithilfe von maschineller Übersetzung lokalisiert wurde. Es kann 1–2 Wochen dauern, bis die Lokalisierung neu veröffentlichter Inhalte verfügbar ist.

Apps-Benutzerhandbuch

BEREITSTELLUNG:

Automation Cloud Automation Cloud Public Sector Automation Suite

Letzte Aktualisierung 18. Dez. 2024

Benutzerdefinierter HTML-Code

Das benutzerdefinierte HTML-Steuerelement richtet sich an fortgeschrittene Benutzer und bietet die Flexibilität von HTML-, CSS- und JavaScript-Programmiersprachen, um benutzerdefinierte, interaktive Steuerelemente zu erstellen, die ihren geschäftlichen Anforderungen entsprechen. Das Steuerelement enthält dedizierte Editoren für HTML-, CSS- und JavaScript-Code, mit dem zusätzlichen Vorteil, dass extern gehostete CSS- und JavaScript-Dateien über URLs integriert werden können.

Demos

Benutzerdefiniertes HTML: Erstellen von Diagrammen

Einleitung

Diese App zeigt, wie verschiedene Diagrammtypen mithilfe von JavaScript-Bibliotheken wie d3.js oder Chart.js erstellt werden.

Demo-App – selbst ausprobieren

Um die interaktiven Diagramme selbst auszuprobieren, verwenden Sie die Demo-App.

Laden Sie die Demo-App von GitHub herunter

Demo-App – Verwendungsanweisungen

Erstellen Sie in UiPath^® Apps eine neue App und importieren Sie die heruntergeladene Demo-App.
Zeigen Sie eine Vorschau Ihrer App an, um mit allen Diagrammtypen zu interagieren.

Benutzerdefiniertes HTML: Erstellen eines interaktiven Kreisdiagramms mithilfe von Variablenfunktionen

Einleitung

Diese App kombiniert Entitäten, benutzerdefiniertes HTML und Bearbeitungsrastersteuerelemente , um ein interaktives Kreisdiagramm anzuzeigen. Die Interaktivität wird aktiviert, indem eine Option aus einem Dropdownmenü ausgewählt wird, wodurch die Kreisdiagrammabschnitte und die Datensätze im Bearbeitungsraster geändert werden. Anschließend werden durch Klicken auf einen Diagrammabschnitt die Daten im Bearbeitungsraster aktualisiert.

Demo-App – selbst ausprobieren

Um das interaktive Kreisdiagramm selbst auszuprobieren, verwenden Sie die Demo-App oder folgen Sie dem Verfahren.

Laden Sie die Demo-App von GitHub herunter

Vorschau der Demo-App in der Cloud

Demo-App – Verwendungsanweisungen

Zeigen Sie eine Vorschau der Demo-App an.
Wählen Sie in der Dropdownliste „Tickets nach Kundennamen filtern“ eine Option aus. Die Gesamtzahl der Tickets, die Darstellung des Kreisdiagramms und die Daten im Bearbeitungsraster sollten sich ändern.
Zeigen Sie mit der Maus auf ein Diagrammsegment. Der Tooltip zeigt den Kategorienamen und die Ticketanzahl an.
Klicken Sie auf einen Diagrammbereich. Im Bearbeitungsraster werden die Datensätze für die ausgewählte Kategorie angezeigt.

Verfahren

Um zu sehen, wie Entitäten und Variablen im benutzerdefinierten HTML-Steuerelement verwendet werden, laden Sie die folgenden App-Dateien auf Ihre lokale Maschine herunter:

Führen Sie nach dem Herunterladen die folgenden Schritte aus:

Klicken Sie in UiPath^® Data Service auf Schema importieren:
1. Wählen Sie die zuvor heruntergeladene ticket_entities_schema.json -Datei aus.
2. Aktivieren Sie auf der Registerkarte Entitäten die Kontrollkästchen Tickets und Ticketquelle.
3. Wechseln Sie zur Registerkarte Auswahlsätze und aktivieren Sie die Kontrollkästchen Kontinente und Reibungsebene.
4. Klicken Sie auf Importieren.
Wählen Sie in UiPath^® Data Service die Entität Ticketquelle aus:
1. Klicken Sie auf Daten importieren.
2. Wählen Sie die zuvor heruntergeladene ticketsource_entity_data.csv -Datei aus und klicken Sie dann auf Öffnen.
3. Wechseln Sie zur Registerkarte Daten , um die hochgeladenen Datensätze anzuzeigen.
Wählen Sie in UiPath^® Data Service die Entität Tickets aus:
1. Klicken Sie auf Daten importieren.
2. Wählen Sie die zuvor heruntergeladene tickets_entity_data.csv -Datei aus und klicken Sie dann auf Öffnen.
3. Daten für die Felder vom Typ Beziehung und Auswahlsatz werden nicht automatisch importiert. Sie müssen die Daten für diese Felder manuell ausfüllen.
4. Wechseln Sie zur Registerkarte Daten . Aktualisieren Sie für jeden Ticketdatensatz die Werte für das Feld Quelle, indem Sie zufällig Chat, Telefon oder E-Mail auswählen.
5. Aktualisieren Sie auf der Registerkarte Daten für jeden Ticketdatensatz die Werte für das Feld „Reaktion“, indem Sie zufällig 1, 2 oder 3 auswählen.
Um die App-Datei zu importieren, führen Sie diesen Schritt aus und wechseln Sie dann zu Schritt 14.
Erstellen Sie in UiPath^® Apps eine neue VB-App:
1. Klicken Sie auf Aus Datei importieren.
2. Wählen Sie die zuvor heruntergeladene CustomHTMLPieChart_DemoApp.uiapp -Datei aus und klicken Sie dann auf Öffnen.
3. Um die Fehler zu beheben, ersetzen Sie die Entität in der importierten App durch die Entität, die Sie zuvor in den Schritten 2 und 3 erstellt haben.
4. Wählen Sie in der importierten App das Dropdown-Steuerelement mit dem Namen „CustomFilterDropdown“ aus, öffnen Sie den Ausdrucks-Editor für die Eigenschaft „Listenquelle“ und speichern Sie sie dann.
Um die App von Grund auf zu erstellen, führen Sie die Schritte 5 bis 14 aus.
Erstellen Sie in UiPath^® Apps eine neue VB-App.
Verweisen Sie in Ihrer App auf die Entitäten , die in den Schritten 1 bis 3 erstellt wurden.

Erstellen Sie die folgenden Variablen basierend auf Data Service-Entitäten:

Variablenname	Typ	Referenzierte Entität
`allTickets`	Listenquelle	Tickets
`filteredTicketListSource`	Listenquelle	Tickets
`selectedSourceType`	Text	-
`ticketSourceTypes`	Listenquelle	Ticketquelle

Fügen Sie Ihrer App ein Dropdown -Steuerelement hinzu und benennen Sie es in „CustomerFilterDropdown“ um:

Benennen Sie das Feld Beschriftung in „Tickets nach Kundenname filtern“ um.
Öffnen Sie im Feld Listenquelle den Ausdrucks-Editor und schreiben Sie den folgenden VB-Ausdruck:
```
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}
```
Wechseln Sie zur Registerkarte Ereignisse und klicken Sie dann auf Regel erstellen.

Fügen Sie die Regel Wert festlegen mit der folgenden Eingabe hinzu:

Festzulegendes Element

filteredTicketListSourcefilteredTicketListSource

Wert

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

Fügen Sie Ihrer App ein Header -Steuerelement hinzu und benennen Sie es in „TicketCountHeader“ um:
1. Öffnen Sie im Feld Text den Ausdrucks-Editor und schreiben Sie den folgenden VB-Ausdruck:
```
(filteredTicketListSource.totalRecords).ToString +" Tickets"(filteredTicketListSource.totalRecords).ToString +" Tickets"
```

Fügen Sie Ihrer App ein benutzerdefiniertes HTML -Steuerelement hinzu und benennen Sie es in „Diagramm“ um:

Öffnen Sie den Code-Editor und ersetzen Sie den Platzhalterinhalt durch die folgenden Code-Snippets:

Editor	Code	Nutzung
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>	Generiert eine JavaScript-Diagrammvorlage aus einer Open-Source-Bibliothek und wendet die Stilklassen auf dieses Diagramm an.
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; }	Definiert zwei Stilklassen: `.chartContainer` und `.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();	Definiert die Variablenfunktionen und fügt dem Diagramm die Interaktivität hinzu.

Editor

Code

Nutzung

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>

Generiert eine JavaScript-Diagrammvorlage aus einer Open-Source-Bibliothek und wendet die Stilklassen auf dieses Diagramm an.

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

Definiert zwei Stilklassen: .chartContainer und .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();

Definiert die Variablenfunktionen und fügt dem Diagramm die Interaktivität hinzu.

Klicken Sie auf Speichern.
Wechseln Sie zur Registerkarte Stil und legen Sie die folgende Größe fest:

Width 1000 px
Height 400 px

Fügen Sie Ihrer App ein Header -Steuerelement hinzu und benennen Sie es in „sourceTypeHeader“ um:
1. Öffnen Sie im Feld Text den Ausdrucks-Editor und schreiben Sie den folgenden VB-Ausdruck:
```
"Tickets created through " & selectedSourceType"Tickets created through " & selectedSourceType
```

Fügen Sie Ihrer App ein Bearbeitungsrastersteuerelement hinzu und benennen Sie es in „TicketlisteNachTyp“ um.

Öffnen Sie im Feld Datenquelle den Ausdrucks-Editor und schreiben Sie den folgenden VB-Ausdruck:

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

Wechseln Sie für die Hauptseite zur Registerkarte Ereignisse und klicken Sie dann auf Regel erstellen.

Fügen Sie eine Regel Wert festlegen mit der folgenden Eingabe hinzu:

Festzulegendes Element	`allTickets`allTickets
Wert	Öffnen Sie den Abfragegenerator, wählen Sie die Entität Tickets aus und klicken Sie dann auf Speichern.

Fügen Sie eine zweite Regel Wert festlegen mit der folgenden Eingabe hinzu:

Festzulegendes Element	`filteredTicketListSource`filteredTicketListSource
Wert	Öffnen Sie den Abfragegenerator, wählen Sie die Entität Tickets aus und klicken Sie dann auf Speichern.

Zeigen Sie eine Vorschau der App an, wählen Sie eine Option in der Dropdownliste aus und sehen Sie, wie das Diagramm aktualisiert wird. Klicken Sie auf einen Diagrammabschnitt und beachten Sie, dass das Bearbeitungsraster mit den Daten aus dem ausgewählten Abschnitt aktualisiert wird.

Benutzerdefiniertes HTML: Erstellen von Datums-/Zeitauswahlen

Einleitung

Diese App zeigt, wie eine benutzerdefinierte Datums-/Uhrzeitauswahl erstellt wird.

Demo-App – selbst ausprobieren

Um die Datums-/Uhrzeitauswahl selbst auszuprobieren, verwenden Sie die Demo-App.

Laden Sie die Demo-App von GitHub herunter

Demo-App – Verwendungsanweisungen

Erstellen Sie in UiPath^® Apps eine neue App und importieren Sie die heruntergeladene Demo-App.
Zeigen Sie eine Vorschau Ihrer App an, um mit der Datums-/Uhrzeitauswahl zu interagieren.

Benutzerdefiniertes HTML: Erstellen von Kennwortfeldern

Einleitung

Diese App zeigt, wie Kennwortfelder erstellt werden.

Demo-App – selbst ausprobieren

Um das Kennwortfeld selbst auszuprobieren, verwenden Sie die Demo-App.

Laden Sie die Demo-App von GitHub herunter

Demo-App – Verwendungsanweisungen

Erstellen Sie in UiPath^® Apps eine neue App und importieren Sie die heruntergeladene Demo-App.
Zeigen Sie eine Vorschau Ihrer App an, um mit dem Kennwortfeld zu interagieren.

Benutzerdefiniertes HTML: Erstellen von Signatureingabefeldern

Einleitung

Diese App zeigt, wie Signatureingabefelder erstellt werden.

Demo-App – selbst ausprobieren

Um die Signatureingabe selbst auszuprobieren, verwenden Sie die Demo-App.

Laden Sie die Demo-App von GitHub herunter

Vorschau der Demo-App in der Cloud

Demo-App – Verwendungsanweisungen

Erstellen Sie in UiPath^® Apps eine neue App und importieren Sie die heruntergeladene Demo-App.
Möglicherweise stellen Sie einige Fehler fest. Um sie zu beheben, ersetzen Sie den referenzierten Speicher-Bucket „Demo-App“ durch einen in Ihrem Mandanten.
Zeigen Sie eine Vorschau der App an, um mit dem Signatureingabefeld zu interagieren.

Allgemein

Code-Editor öffnen – Öffnet einen Editor mit drei Bereichen zum Hinzufügen des HTML-, CSS- und JavaScript-Codes.
Zugängliche Beschriftung – Die Beschreibung des Steuerelements. Diese Eigenschaft wird von Bildschirmleseprogrammen für eine verbesserte Zugänglichkeit verwendet.
Ausgeblendet – Bei „true“ wird das Steuerelement während der Runtime ausgeblendet.
Deaktiviert – Bei „true“ wird das Steuerelement zur Laufzeit inaktiv. Der HTML-, CSS- und JavaScript-Inhalt wird geladen, reagiert jedoch nicht auf Benutzeraktionen wie Klicken.

Events

Keine Ereignisse.

Stil

Ausrichtung von Steuerelementen – Erbt standardmäßig die übergeordnete Ausrichtung. Eine andere Ausrichtung als die übergeordnete kann festgelegt werden. Um die Standardausrichtung wiederherzustellen, heben Sie die Markierung der überschriebenen Optionen auf.

Hinweis: Die Ausrichtung hängt vom Layout ab, das für das übergeordnete Element ausgewählt wurde (vertikal vs. horizontal).
Rahmen – Der Rahmen für das Steuerelement. Rahmenstärke und Radius können konfiguriert werden.
Seitenrand – Der Seitenrand des Steuerelements. Standardmäßig ist ein Seitenrand von 4px festgelegt. Die Randeigenschaften Oben/Unten und Links/Rechts werden kombiniert. Diese Eigenschaften können mit der Schaltfläche Link rechts neben dem Abschnitt Seitenrand getrennt werden.
Größe – Die Breite und Höhe des Steuerelements. Standardmäßig ist die Größe auf auto festgelegt. Um Mindest- oder Höchstwerte festzulegen, klicken Sie auf das Drei-Punkte-Symbol (…).

Code-Editor für benutzerdefiniertes HTML

Der Code-Editor des benutzerdefinierten HTML-Steuerelements bietet drei Bereiche zur Eingabe von Code in den Programmiersprachen HTML, CSS und JavaScript. Jeder Editor unterstützt IntelliSense oder die automatische Codevervollständigung und Syntaxhervorhebung.

Der Code aus den Panels wird zu einem Projekt kompiliert und in Apps Studio zur Vorschau gerendert. Um die Funktionalität des Steuerelements zu beobachten, zeigen Sie eine Vorschau der App an.

Wichtig:

Jeder Editor hat eine maximale Inhaltsgröße von 5 MB. Wenn der Inhalt diese Größe überschreitet, können Sie Ihre Änderungen nicht mehr speichern.
IntelliSense funktioniert nicht für CSS- und JavaScript-Codes, die im HTML-Editor geschrieben wurden.

Hinzufügen externer Ressourcen

Wenn Sie bereits Stile oder Skripte definiert haben, können Sie im Steuerelement auf sie verweisen, ohne den Code in die entsprechenden CSS- oder JavaScript-Bereiche schreiben zu müssen.

So verweisen Sie auf vorhandene .css- oder .js -Dateien:

Wechseln Sie im Code-Editor des benutzerdefinierten HTML-Steuerelements zur Registerkarte Externe Ressourcen .
Fügen Sie im Abschnitt CSS eine externe CSS-Datei hinzu. Die Datei muss unter einer für das Netzwerk zugänglichen URL gehostet werden, um die Kompatibilität und Verfügbarkeit an dem Ort sicherzustellen, an dem die App ausgeführt wird.
Fügen Sie im Abschnitt JavaScript eine externe Skriptdatei hinzu. Die Datei muss unter einer für das Netzwerk zugänglichen URL gehostet werden, um die Kompatibilität und Verfügbarkeit an dem Ort sicherzustellen, an dem die App ausgeführt wird.
Wenn Sie alle externen Ressourcen hinzugefügt haben, klicken Sie auf Speichern.

Tastenkombinationen für die Tabulatortaste

Standardmäßig fügt die Tabulatortaste einen Tabulatorbereich innerhalb des aktuellen Editors hinzu. Um das Verhalten der Tabulatortaste anzupassen, verwenden Sie die folgenden Tastenkombinationen:

OS	Verknüpfung	Verhalten
Windows	STRG+M	Weist die Tabulatortaste an, zwischen den Bereichen zu navigieren und den Fokus auf die sichtbaren Schaltflächen des Editors zu ändern. Drücken Sie STRG+M erneut, um das Standardverhalten der Registerkarte wiederherzustellen.
MacOS	STRG+Umschalt+M	Weist die Tabulatortaste an, zwischen den Bereichen zu navigieren und den Fokus auf die sichtbaren Schaltflächen des Editors zu ändern. Drücken Sie erneut STRG+Umschalt+M, um zum Standard-Registerkartenverhalten zurückzukehren.

Der HTML-Editor

In diesem Panel können Sie die Struktur Ihres Steuerelements eingeben, die normalerweise in den <body></body> -Tags eines Codeblocks enthalten ist.

Um beispielsweise das Containerelement für ein interaktives Kreisdiagramm in Ihrer App hinzuzufügen, würden Sie das folgende HTML-Snippet verwenden:

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

Wo:

id="myChart" verweist auf das JavaScript-Element „myChart“, das das interaktive Kreisdiagramm innerhalb des HTML-Elements generiert. Weitere Informationen finden Sie unter Der JavaScript-Editor.
class="chart-container" verweist auf die CSS-Klasse „chart-container“, die den Stil für das Kreisdiagramm innerhalb des HTML-Elements hinzufügt. Weitere Informationen finden Sie unter Der CSS-Editor.

Der CSS-Editor

In diesem Bereich können Sie den Stil Ihres Steuerelements und der darin enthaltenen Elemente eingeben.

Um dem Kreisdiagramm beispielsweise Farben und einen Rahmen hinzuzufügen, würden Sie das folgende CSS-Snippet verwenden:

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

Der JavaScript-Editor

In diesem Panel können Sie den interaktiven Teil Ihres Steuerelements erstellen, z. B. aktuelle Inhaltsaktualisierungen, Karten oder animierte 2D-/3D-Diagramme.

Um beispielsweise ein Kreisdiagramm für den weltweiten Vertrieb von Apple-Produkten zu erstellen und es so zu gestalten, dass Werte für das ausgewählte Segment angezeigt werden, gehen Sie wie folgt vor:

Fügen Sie die folgende externe JavaScript-Ressource hinzu:

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

Verwenden Sie den folgenden JavaScript-Snippet:

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

Verwenden von Variablen in benutzerdefiniertem HTML-Code

Um die Kommunikation zwischen dem benutzerdefinierten HTML-Steuerelement und anderen Steuerelementen oder Integrationen herzustellen, empfehlen wir , Variablen zu erstellen und die integrierten Funktionen setVariable(), getVariable() und onVariableChange() zu verwenden.

getVariable()

Verwenden Sie diese Funktion im JavaScript-Editor, um den Wert einer vorhandenen Variablen abzurufen.

Um beispielsweise den Wert einer Variablen an internalValue zu übergeben, würden Sie das folgende JavaScript-Snippet verwenden:

async function init() {
  let internalValue = await App.getVariable('<app_variable_name>');
}
init();async function init() {
  let internalValue = await App.getVariable('<app_variable_name>');
}
init();

Hinweis:

Die FunktiongetVariable() ist asynchron, deshalb müssen Sie await verwenden.
Wenn Sie getVariable() innerhalb einer Funktion aufrufen, machen Sie diese Funktion zu async. Im angegebenen Beispiel haben wir die Funktion init() erstellt und sofort aufgerufen.
Wenn Sie getVariable() auf hoher Ebene aufrufen, bebetten Sie es in eine async -Funktion.

Um Fehler wie ungültige Variablennamen zu behandeln, verwenden Sie die Anweisung Try-Catch. Zum Beispiel:

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

Verwenden Sie diese Funktion im JavaScript-Editor, um einen Wert für eine vorhandene Variable festzulegen. Das erste Argument ist der Variablenname und das zweite Argument ist der Wert, den Sie festlegen möchten.

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

Hinweis:

Um auf den Abschluss des festgelegten Vorgangs zu warten, bevor anderer Code ausgeführt wird, verwenden await.

Um Fehler wie ungültige Variablennamen oder Typfehler zwischen der Variablen und dem festgelegten Wert zu behandeln, verwenden Sie die Anweisung Try-Catch. Zum Beispiel:

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

Verwenden Sie diese Funktion im JavaScript-Editor, um Änderungen eines vorhandenen Variablenwerts abzuhören und auf den neuesten Variablenwert zuzugreifen.

App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});App.onVariableChange('<app_variable_name>', value => {
  console.log("Latest value: ", value);
});

Im folgenden Beispiel weisen wir die von onVariableChange() zurückgegebene Funktion der Variablen deregister zu. Wenn Sie dann die Überwachung von Variablenänderungen beenden möchten, können Sie die Funktion deregister() aufrufen:

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

Hinweis:

Der Listener wird gestartet, nachdem das benutzerdefinierte HTML-Steuerelement vollständig gerendert wurde. Wenn sich ein Variablenwert ändert, bevor das benutzerdefinierte HTML-Steuerelement initialisiert wird, wird der aktualisierte Wert nicht erfasst.

Um den neuesten Variablenwert abzurufen, rufen Sie getVariable() auf, bevor Sie onVariableChange() aufrufen.
Das HTML-Steuerelement und die darin enthaltenen Funktionen werden initialisiert, nachdem das Steuerelement zur Laufzeit angezeigt wurde.

Variablentypen

App-Variablentyp	Beispielantwort von Variablenfunktionen
Text (String)	"Hello world"
UInt64 (Int)	100
Decimal number	50.25
True/False (Boolean)	True
DateOnly	2024-01-02 (Format: JJJJ-MM-TT)
DateTimeOffset	2024-01-06T09:54:41.9170000Z (Äquivalentes JS-Format: ISO-String des Datumsobjekts)
AppsFile – Wert eines Dateiauswahlsteuerelements	JS-Dateiobjekt
AppsFile – Wert, der aus der URL erstellt wurde Zum Beispiel: `new AppsFile("https://image.jpg")`new AppsFile("https://image.jpg")	Dateiobjekt: `{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',...},...]

Best Practices für benutzerdefiniertes HTML

Nehmen Sie aufgrund des clientseitigen Zugriffs keine vertraulichen Daten in das benutzerdefinierte HTML-Steuerelement auf.
Verwenden Sie die Tags <html> und <head> nicht im HTML-Editor, da der Code automatisch innerhalb der <body> -Tags angehängt wird.
Fügen Sie CDN-URLs externer Ressourcen wie Bootstrap, jQuery oder anderer JavaScript SDKs auf der Registerkarte Externe Ressourcen hinzu.
Wenn Sie die Überwachung der Variablenänderung beenden möchten, verwenden Sie die Funktion deregister() .
Vermeiden Sie große Datenschleifen, um eine Verlangsamung der Anwendung zu verhindern und die Reaktion des Steuerelements aufrechtzuerhalten.
Minimieren Sie die Verwendung von DOM-Elementen so weit wie möglich: Erstellen Sie DOM-Elemente nur bei Bedarf und entfernen Sie sie, wenn sie veraltet sind.
Verwenden Sie für große Datasets unendliches oder virtuelles Scrollen anstelle von Standard-Scroll.
Erstellen und pflegen Sie einen bereinigten, optimierten und Redundanz-freien Code.

Funktionseinschränkungen

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.
Benutzerdefiniertes HTML bietet keine Möglichkeit, Kontrollregeln auszulösen.
Um das Steuerelement mit Apps zu verbinden, müssen Sie die Variablenfunktionen verwenden: getVariable(), setVariable(), onVariableChange().
Für den Zugriff auf Prozess- oder Warteschlangendaten müssen Sie für jede Prozess- oder Warteschlangeneigenschaft eine Variable zuweisen.
Die Abmessungen des HTML-Steuerelements werden nicht dynamisch angepasst, um Pop-ups oder Dropdown-Menüs anzuzeigen. Sie müssen die Größe des HTML-Steuerelements manuell festlegen, damit es in diese Menüs passt.
Sie können während der Entwurfszeit nicht mit dem HTML-Steuerelement interagieren.
Die Funktionen setVariable(), getVariable() und onVariableChange() werden nur zur Laufzeit ausgeführt.
Änderungen an Variablennamen oder Variablenlöschungen werden nicht automatisch in den Code-Editoren widergespiegelt. Sie müssen den Code manuell mit den aktuellen Variablen aktualisieren.
Variablen, die Dateien aus dem HTML-Steuerelement speichern, können nicht in der Regel Datei in Speicher-Bucket hochladen oder zum Ausfüllen der Dateitypfelder von Data Service-Entitäten verwendet werden.
Das Steuerelement kann nur über die Verwendung von Variablen mit anderen UiPath^® -Komponenten kommunizieren, z. B. Prozesse, Warteschlangen oder Speicher-Buckets.
Vorverarbeiteter CSS-Code, der LESS oder SCSS verwendet, ist mit dem HTML-Steuerelement nicht kompatibel.
Die folgenden APIs schlagen bei der Verwendung aufgrund von Sicherheitsbedenken im Hintergrund fehl:
- Herunterladen mit dem Attribut download .
- Öffnen von Modalitäten mit Window.alert(), Window.confirm(), Window.print(), Window.prompt().
- Sperren von Zeiger und Ausrichtung.
- Navigieren im Browserkontext auf oberster Ebene.
- Öffnen des Vollbildmodus mit requestFullscreen().
- Bildschirmaufnahme mit MediaDevices.getDisplayMedia().
- Zugriff auf die Kamera oder das Mikrofon mit MediaDevices.getUserMedia().
- Anfordern von Zahlungen.
- Zugriff auf den Speicherort mit navigator.geolocation().
- Freigeben von Daten mit navigator.share().

Debuggen des Codes eines benutzerdefinierten HTML-Steuerelements

Hinzufügen und Filtern von Konsolenprotokollen eines benutzerdefinierten HTML-Steuerelements

Fügen Sie im JavaScript-Editor einen console.log() hinzu.
Öffnen Sie in Ihrer Apps Studio-Sitzung die Browserkonsole, indem Sie F12 drücken und dann die Registerkarte Konsole auswählen.
Aktivieren Sie in den Konsoleneinstellungen das Kontrollkästchen Nur ausgewählter Kontext .
Wählen Sie in der Dropdownliste JavaScript-Kontext oben auf der Konsolenseite die Option html-control-base.html für das gewünschte HTML-Steuerelement aus.

Die Protokolle aus dem ausgewählten Steuerelement werden in der Konsole angezeigt.

Weitere Informationen finden Sie im Video:

Haltepunkte hinzufügen

Fügen Sie im JavaScript-Editor einen console.log() hinzu.
Öffnen Sie in Ihrer Apps Studio-Sitzung die Browserkonsole, indem Sie F12 drücken und dann die Registerkarte Konsole auswählen.
Klicken Sie auf der rechten Seite des Protokolls auf die VM-Meldung.

Der Debugger wird geöffnet. Wählen Sie Ihren Haltepunkt aus, indem Sie auf die gewünschte Zeilennummer klicken.

Weitere Informationen finden Sie im Video:

VB-Eigenschaften

VB-Eigenschaft	Datentyp	Beschreibung
AccessibleLabel	String	Die Beschreibung des Steuerelements, die von Barrierefreiheitstechnologien wie Bildschirmleseprogrammen verwendet wird.
Ausgeblendet	Boolescher	Bestimmt die Sichtbarkeit des benutzerdefinierten HTML -Steuerelements. Bei „true“ wird das Steuerelement zur Runtime ausgeblendet.
Deaktiviert	Boolescher	Bestimmt, ob das benutzerdefinierte HTML -Steuerelement deaktiviert ist. Bei „true“ wird die Interaktion mit dem Steuerelement zur Runtime deaktiviert. HTML-, CSS- und JavaScript-Inhalte werden geladen, reagieren jedoch nicht auf Benutzeraktionen.