Lernprogramm: Codekomponenten in Portalen verwenden

Hinweis

Ab 12. Oktober 2022 ist Power Apps-Portale Power Pages. Weitere Informationen: Microsoft Power Pages ist jetzt allgemein verfügbar (Blog)
Wir werden die in Kürze migrieren und die Dokumentation für Power Apps-Portale mit der Power Pages-Dokumentation zusammenführen.

In diesem Tutorial erstellen Sie eine Beispielkomponente mit dem Power Apps component framework. Sie verpacken diese Komponente in eine Dataverse-Umgebung und fügen die Komponente zu einer modellbasierten App hinzu. Anschließend konfigurieren Sie Power Apps-Portale, um die Komponente zu einem einfachen Formular hinzuzufügen und das einfache Formular zu einer Webseite hinzuzufügen. Schließlich besuchen Sie die Webseite der Portale und interagieren mit der Komponente.

Voraussetzungen

  • Ihre Portalversion muss 9.3.3.x oder höher sein.
  • Ihr Starterportal-Paket muss 9.2.2103.x oder höher sein.

Hinweis

Dieses Tutorial basiert auf dem bestehenden Power Apps component framework-Tutorial, das Sie durch die Erstellung der TSLinearInputComponent für die Tabelle Verkaufschance im Hauptformular bilden. Sie können für dieses Lernprogramm auch eine vorhandene oder neue Komponente sowie eine andere Tabelle verwenden. Achten Sie in diesem Fall darauf, dass Sie Ihre Komponente und Ihr Formular verwenden, wenn Sie die Schritte in diesem Tutorial ausführen.

Schritt 1. Erstellen Sie Ihre erste Codekomponente

Befolgen Sie zum Erstellen einer Beispielkomponente die Schritte im Lernprogramm Ihre erste Komponente erstellen. Am Ende dieses Tutorials haben Sie die Komponente mit dem Namen TSLinearInputComponent gepackt und in Ihre Dataverse Umgebung hochgeladen.

Schritt 2. Hinzufügen der Codekomponente zu einem Feld in einer modellgesteuerten App

Nachdem Sie nun die TSLinearInputComponent in Ihre Dataverse-Umgebung hochgeladen haben, folgen Sie den Schritten im Tutorial Hinzufügen einer Codekomponente zu einem Feld in modellbasierten Apps, um die Komponente zur Tabelle Verkaufschancen auf dem Hauptformular hinzuzufügen.

Schritt 3. Die modellgesteuerte App mit der neuen Komponente überprüfen

Sie können eine vorhandene modellgesteuerte App aktualisieren oder eine neue App erstellen mit dem Formular, zu dem Sie die Komponente hinzugefügt haben. Das folgende Bild zeigt beispielsweise, wie die Verkaufschancen Tabelle Hauptformular sucht, wenn Sie die Codekomponente in diesem Tutorial verwenden.

Slider-Steuerelement zum Feld „Budgetbetrag“ im modellgesteuerten App-Formular hinzugefügt

Schritt 4. Einem Basisformular in Portalen eine Codekomponente hinzufügen

In diesem Schritt erstellen Sie ein neues Grundformular in Portalen und fügen dann die Komponente zum erstellten Grundformular hinzu. Sie können stattdessen auch ein vorhandenes Basisformular verwenden.

Schritt 4.1. Ein neues Basisformular erstellen

  1. Öffnen Sie die App Portalverwaltung.

  2. Wählen Sie im linken Bereich unter Inhalt Basisformulare aus.

  3. Wählen Sie Neu.

  4. Geben Sie Name ein. Beispielsweise Verkaufschancen-Basisformular mit Codekomponente.

  5. Wählen Sie Basisname als Verkaufschance aus.

  6. Wählen Sie für Formularname das modellgesteuerte App-Formular aus, das Sie der Codekomponente weiter oben in diesem Lernprogramm hinzugefügt haben.

  7. Wählen Sie den Registerkartennamen aus.

  8. Wählen Sie die Website Ihres Portals aus.

    Basisformular mithilfe der Portalverwaltungs-App konfigurieren

  9. Klicken Sie auf Speichern und Schließen.

Schritt 4.2. Dem Basisformular eine Codekomponente hinzufügen

  1. Öffnen Sie die App Portalverwaltung.

  2. Wählen Sie im linken Bereich unter Inhalt Basisformulare aus.

  3. Wählen Sie das Basisfromular aus, das Sie im vorherigen Schritt erstellt haben.

  4. Wählen Sie Zugehörig aus.

  5. Wählen Sie Basisformularmetadaten aus.

  6. Wählen Sie Neue Basisformularmetadaten aus.

  7. Wählen Sie Typ als Attribut aus.

  8. Wählen Sie Attribut Logischer Name als Budget-Betrag (Budget-Betrag).

    Logischer Name des Budgetbetrag-Attributs

  9. Geben Sie Bezeichnung ein. Beispielsweise Budgetbetrag.

  10. Wählen Sie für Steuerelementstil Codekomponente.

    Steuerelementstil

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

Schritt 5. Erstellen Sie eine Webseite in Portalen mit dem Basisformular

  1. Ihr Portal im Power Apps-Portalstudio öffnen.

  2. Wählen Sie in der linken oberen Ecke Neue Seite aus.

  3. Wählen Sie Leer aus.

  4. Aktualisieren Sie im rechten Eigenschaftenbereich den Namen der Webseite. Beispielsweise Verkaufschancen.

  5. Aktualisieren Sie die Teil-URL. Beispielsweise Verkaufschancen.

  6. Erweitern Sie Berechtigungen.

  7. Deaktivieren Sie Seite steht allen zur Verfügung.

  8. Wählen Sie die Webrollen aus, denen der Zugriff auf diese Seite gewährt werden soll.

  9. Wählen Sie im Seiteneditor unter dem Abschnitt „Kopfzeile“ die Option Spalte aus.

  10. Wählen Sie im linken Bereich Komponente aus.

  11. Wählen Sie unter Portalkomponenten die Option Formular.

  12. Wählen Sie im rechten Eigenschaftenbereich die Option Vorhandene verwenden aus.

  13. Wählen Sie unter Name das Basisformular aus, das Sie zuvor in diesem Lernprogramm erstellt haben.

    Tipp

    Wenn Sie das verfügbare Formular nicht sehen, versuchen Sie Konfiguration synchronisieren auszuführen, um Änderungen aus Dataverse zu synchronisieren.

  14. Wählen Sie oben rechts in der Ecke Website durchsuchen aus.

Die Webseite zeigt nun das Grundformular für die Verkaufschancen Tabelle mit der Codekomponente als Schieberegler an, ähnlich wie sie mit der modellgesteuerten App für dasselbe Formular angezeigt wird.

Beispielvorschau des Schiebereglersteuerelements „Budgetbetrag“ auf der Seite „Portale“

Nächste Schritte

Übersicht: Codekomponenten in Portalen verwenden

Siehe auch

Power Apps component framework Übersicht
Erstellen Sie Ihre erste Codekomponente
Hinzufügen von Code-Komponenten zu einem Feld oder einer Tabelle in modellbasierten Apps

Hinweis

Können Sie uns Ihre Präferenzen für die Dokumentationssprache mitteilen? Nehmen Sie an einer kurzen Umfrage teil. (Beachten Sie, dass diese Umfrage auf Englisch ist.)

Die Umfrage dauert etwa sieben Minuten. Es werden keine personenbezogenen Daten erhoben. (Datenschutzbestimmungen).