Übung – Erweiterte clientseitige Funktionen hinzufügen

  • 15 Minuten

In dieser Übungseinheit wird veranschaulicht, wie JavaScript-Code einer Seite hinzugefügt wird, um Daten aus Microsoft Dataverse als Diagramm zu rendern, indem eine externe Diagrammbibliothek mit den Daten verwendet wird, die mit der Portals-Web-API aus Dataverse abgerufen wurden.

Diese Übungen funktionieren am besten, wenn Sie mit einigen Beispieldaten arbeiten können. Je nachdem, in welcher Umgebung Sie arbeiten, hätten Sie für die Übungen vielleicht gern geeignete Beispieldaten zur Hand. Microsoft Power Platform bietet Ihnen die Möglichkeit, Beispieldaten nach Bedarf hinzuzufügen. Wenn in der Umgebung, mit der Sie arbeiten, keine Beispieldaten installiert sind, führen Sie die Schritte in der Dokumentation Beispieldaten hinzufügen oder entfernen aus, um in Ihrer Umgebung die Beispieldaten zu installieren.

Lernziele

Das Ziel dieser Übungen ist es, Ihnen bei Folgendem zu helfen:

  • Richten Sie Site-Einstellungen und Tabellenberechtigungen ein, um Portals-Web-API-Anforderungen zu aktivieren.

  • Fügen Sie einer Inhaltswebseite Inline-Code hinzu, um die Daten mithilfe des Portals-Web-API abzurufen und zu transformieren.

  • Verwenden Sie eine externe JavaScript-Bibliothek, um die transformierten Daten zu plotten.

Voraussetzungen

Stellen Sie sicher, dass für diese Übung die folgenden Parameter in Ihrer Umgebung festgelegt sind:

  • Eine bereitgestellte Power Pages-Website Wenn Ihnen keine Power Pages-Website zur Verfügung steht, folgen Sie den Anweisungen in der Dokumentation Eine Seite mit Power Pages erstellen, um eine zu erstellen.

  • Zugriff auf die Power Pages-Entwickler-Homepage

Wesentliche Schritte

Führen Sie die folgenden Aufgaben aus, um die Übung abzuschließen:

  1. Erstellen Sie Site-Einstellungen und Tabellenberechtigungen, die Portals-Web-API-Leseanforderungen an die Kontentabelle erlauben.

  2. Erstellen Sie eine Inhaltsseite, und fügen Sie JavaScript-Code hinzu, der die Daten abruft und transformiert.

  3. Fügen Sie der Seite und dem JavaScript-Code eine Diagrammbibliothek hinzu, indem Sie die Bibliothek verwenden, um mit den abgerufenen Daten ein Diagramm zu erstellen.

Detaillierte Schritte

Befolgen Sie die diese detaillierten Schritte, um diese Übung abzuschließen.

Portals-Web-API-Anforderungen aktivieren

In diesem Abschnitt erfahren Sie, wie Sie Anfragen für Web-API für Portale an die Tabelle Konten aktivieren.

Website-Einstellungen erstellen

Um Einstellungen für die Website zu erstellen, führen Sie diese Schritte aus.

  1. Melden Sie sich bei der Power Pages-Startseite an.

  2. Wählen Sie in der oberen rechten Ecke die richtige Umgebung aus.

  3. Wählen Sie das Menü mit den Auslassungspunkten (...) und dann Power Pages-Verwaltung aus.

    Die App „Power Pages-Verwaltung“ wird in einer neuen Registerkarte geöffnet.

    Screenshot der Power Pages-Entwicklerumgebung mit erweitertem Erweiterungsmenü und dem ausgewählten Menüelement „Power Pages-Verwaltung“

  4. Wählen Sie Website-Einstellungen aus.

  5. Klicken Sie auf + Neu, und geben Sie dann die folgenden Informationen ein:

    • Name – Webapi/account/enabled

    • Website – Wählen Sie Ihre Website aus.

    • Wert – true

  6. Wählen Sie Speichern aus.

    Screenshot der Schritte zum Erstellen von Web-API-Website-Einstellungen.

  7. Klicken Sie auf + Neu, und geben Sie dann die folgenden Informationen ein:

    • Name – Webapi/account/fields

    • Website – Wählen Sie Ihre Website aus.

    • Wert – name,numberofemployees,revenue

  8. Wählen Sie Speichern und schließen aus.

Tabellenberechtigungen erstellen

Gehen Sie wie folgt vor, um Tabellenberechtigungen zu erstellen.

  1. Wechseln Sie zur Power Pages-Startseite.

  2. Wählen Sie für die Zielwebsite Bearbeiten aus, um das Power Pages-Designstudio zu öffnen.

  3. Wählen Sie den Arbeitsbereich *Sicherheit und dann Tabellenberechtigungen aus.

    Screenshot der Tabellenberechtigungen im Power Pages-Designstudio

  4. Wählen Sie + Neue Berechtigung aus, und füllen Sie dann die folgenden Informationen aus:

    • Name – Firma

    • Tabelle – Firma (Firma)

    • Zugriffstyp – Global

    • Berechtigung für – Lesen

  5. Wählen Sie Rollen hinzufügen aus, und fügen Sie dann Anonyme Benutzer und Authentifizierte Benutzer hinzu.

  6. Wählen Sie Speichern aus.

    Screenshot der globalen Tabellenleseberechtigung für Firmen

Web-API testen

Öffnen Sie die folgende URL, um die Web-API zu testen: https://yourwebsite.powerappsportals.com/_api/accounts?$select=name,numberofemployees,revenue

Ihre Ausgabe sollte nun dem nächsten Bild ähneln.

Screenshot der Beispiel-Portal-Web-API-Ausgabe

Inhaltsseite erstellen und Daten abrufen

Führen Sie die folgenden Schritte aus, um eine Inhaltsseite zu erstellen und JavaScript-Code hinzuzufügen, der die Daten abruft und transformiert:

  1. Wählen Sie im Designstudio den Arbeitsbereich Seiten aus, und klicken Sie dann auf + Seite.

  2. Geben Sie als Seitennamen Diagramm ein.

  3. Bestätigen Sie die Auswahl der Option Seite der Hauptnavigation hinzufügen.

  4. Wählen Sie das Layout Leer starten aus.

  5. Klicken Sie auf Hinzufügen.

  6. Wählen Sie Code bearbeiten aus.

    Screenshot der neuen leeren Diagrammseite im Designstudio mit einem roten Feld über der Schaltfläche „Code bearbeiten“

  7. Wählen Sie im Popup-Dialogfeld Visual Studio Code öffnen aus.

  8. Wählen Sie im Visual Studio Code-Editor die Chart.en-US.customjs.js-Datei aus.

  9. Fügen Sie das folgende Skript an:

    function makeChart(rawData) {
  // transform raw data into plotting array
  var rData = rawData.value.map(({
    name,
    revenue,
    numberofemployees
  }) => ({
    "x": numberofemployees,
    "y": revenue,
    "z": (!revenue) ? 1 : numberofemployees / revenue,
    "name": name
  }));
  console.log(rData);
}
// retrieve accounts data using portals Web API
$(document).ready(function() {
  $.get('/_api/accounts?$select=name,numberofemployees,revenue', makeChart, 'json');
});

  10. Verwenden Sie zum Speichern der Datei die Tastenkombination STRG+S (⌘ + S auf dem Mac).

    Screenshot des Visual Studio Code-Editors mit JavaScript, um Firmendaten mit Portal-Web-API abzurufen

  11. Schließen Sie die Registerkarte Visual Studio Code. Wählen Sie dann Synchronisieren aus, wenn Sie dazu aufgefordert werden, die Änderungen zu synchronisieren.

  12. Wählen Sie Vorschau > Desktop aus.

  13. Drücken Sie zum Aufrufen der Browser-Entwicklertools die Taste F12, wenn die Seite angezeigt wird.

  14. Stellen Sie sicher, dass die Konsolenausgabe dieselben Daten enthält, die zuvor abgerufen, außer, dass es noch nicht als transformiert angezeigt wird.

    Screenshot der Konsolenausgabe mit transformierten Daten

  15. Die Datenstruktur ist jetzt für die Darstellung vorbereitet. Den Datenpunkten die entsprechenden Beschriftungen zuweisen:

    • Name – Unternehmensname

    • x – Anzahl der Mitarbeiter

    • y – Unternehmensumsatz in Tausend

    • z – Umsatz pro Mitarbeiter (berechnet)

Externe Bibliotheksfunktionen hinzufügen

In dieser Übung wird die Bibliothek „Highcharts.js“ verwendet (kostenlos für persönliche oder gemeinnützige Verwendung), um ein Blasendiagramm basierend auf den Daten zu erstellen.

  1. Wechseln Sie zum Designstudio.

  2. Wählen Sie die Fußleiste der Seite und dann Code bearbeiten aus.

  3. Wählen Sie im Popup-Dialogfeld Visual Studio Code öffnen aus.

    Screenshot einer in Power Pages-Designstudio geöffneten Seite mit ausgewählter Seitenfußzeile und einem Popup-Fenster, das den Benutzer auffordert, Visual Studio Code zu öffnen

  4. Fügen Sie am Ende der Datei den folgenden Code hinzu.

      <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/highcharts-more.js"></script>

  5. Verwenden Sie zum Speichern der Datei die Tastenkombination STRG+S (⌘ + S auf dem Mac).

  6. Schließen Sie die Registerkarte Visual Studio Code.

  7. Wählen Sie auf der Symbolleiste Code bearbeiten aus, um den Visual Studio Code für die Seite zu öffnen.

  8. Wählen Sie die Datei Chart.en-US.customjs.js aus.

  9. Bearbeiten Sie die Datei, sodass die Funktion makeChart folgendermaßen geändert wird:

    function makeChart(data) {
  console.log(data);
  var rData = data.value.map(({
    name,
    revenue,
    numberofemployees
  }) => ({
    "x": numberofemployees,
    "y": revenue,
    "z": (!revenue) ? 1 : numberofemployees / revenue,
    "name": name
  }));
  console.log(rData);

  // new code to plot the data
  Highcharts.chart($('.mychart')[0], {
    title: {
      text: "Customers efficiency"
    },
    legend: {
      enabled: false
    },
    xAxis: {
      title: {
        text: "Number of employees"
      }
    },
    yAxis: {
      title: {
        text: "Turnover ($K)"
      }
    },
    tooltip: {
      pointFormat: '<strong>{point.name}</strong><br/>Employed: {point.x}<br>Turnover ($K): ${point.y}',
      headerFormat: ''
    },
    series: [{
      type: 'bubble',
      data: rData
    }]
  });
}

// retrieve accounts data using portals Web API
$(document).ready(function() {
  $.get('/_api/accounts?$select=name,numberofemployees,revenue', makeChart, 'json');
});

  10. Verwenden Sie zum Speichern der Datei die Tastenkombination STRG+S (⌘ + S auf dem Mac).

  11. Wählen Sie die Datei Chart.en-US.webpage.copy.html aus.

  12. Fügen Sie den folgenden Code in das innere <div>-Element ein:

      <figure>
    <div class="mychart"></div>
  </figure>

  13. Verwenden Sie zum Speichern der Datei die Tastenkombination STRG+S (⌘ + S auf dem Mac).

    Screenshot des Inhaltsbereichs der Seite im Visual Studio Code-Editor

  14. Schließen Sie die Registerkarte Visual Studio Code, und wählen Sie dann Synchronisieren aus, um die Änderungen zu synchronisieren.

  15. Wählen Sie Vorschau > Desktop aus.

  16. Die Ausgabe sollte jetzt das Blasendiagramm enthalten. Zeigen Sie mit der Maus auf die Blasen, um die Daten zu überprüfen.

Screenshot der Seitenausgabe mit dem jetzt enthaltenen Blasendiagramm