Canvas-Komponentenübersicht

Komponenten sind wiederverwendbare Bausteine für Canvas-Apps, sodass App-Entwickler benutzerdefinierte Steuerelemente für die Verwendung innerhalb einer App oder für apps mithilfe einer Komponentenbibliothek erstellen können. Komponenten können erweiterte Features wie benutzerdefinierte Eigenschaften verwenden und komplexe Funktionen aktivieren. In diesem Artikel werden Komponentenkonzepte und einige Beispiele vorgestellt.

Komponenten sind hilfreich beim Erstellen größerer Apps mit ähnlichen Steuerelementmustern. Wenn Sie eine Komponentendefinition innerhalb der App aktualisieren, spiegeln alle Instanzen in der App Ihre Änderungen wider. Komponenten helfen auch, die Duplizierung zu reduzieren, indem sie die Notwendigkeit zum Kopieren und Einfügen von Steuerelementen beseitigen und die Leistung verbessern. Komponenten helfen auch beim Erstellen der gemeinsamen Entwicklung und der Standardisierung von Look-and-Feel in einer Organisation, wenn Sie eine Komponentenbibliothek verwenden.

In diesem Video erfahren Sie, wie Sie Komponenten in Canvas-Apps verwenden:

Komponenten in Canvas-Apps

Sie können eine Komponente aus einer App erstellen, wie in diesem Artikel erläutert, oder indem Sie eine neue Komponente in einer Komponentenbibliothek erstellen. Eine Komponentenbibliothek sollte für Anforderungen für die Verwendung von Komponenten auf mehreren App-Bildschirmen verwendet werden. Sie können die vorhandenen Komponenten auch in eine vorhandene oder eine neue Komponentenbibliothek kopieren.

Um eine Komponente in einer App zu erstellen, wechseln Sie zur Strukturansicht, wählen Sie die Registerkarte "Komponenten " und dann " Neue Komponente" aus:

Wenn Sie "Neue Komponente" auswählen, wird ein leerer Zeichenbereich geöffnet. Sie können Steuerelemente als Teil der Komponentendefinition auf der Canvas hinzufügen. Wenn Sie eine Komponente auf der Leinwand bearbeiten, aktualisieren Sie in anderen App-Bildschirmen die Instanzen derselben Komponente. Apps, die eine bereits erstellte Komponente wiederverwenden, können auch Komponentenupdates empfangen, nachdem Sie Komponentenänderungen veröffentlicht haben.

Sie können eine Komponente aus der Liste der vorhandenen Komponenten im linken Bereich auswählen, nachdem Sie einen Bildschirm ausgewählt haben. Wenn Sie eine Komponente auswählen, fügen Sie eine Instanz dieser Komponente genauso wie ein Steuerelement auf dem Bildschirm ein.

Komponenten, die in der App verfügbar sind, werden in einer Liste der Komponenten in der Strukturansicht unter der Kategorie "Benutzerdefiniert " aufgeführt. Aus Komponentenbibliotheken importierte Komponenten werden unter der Kategorie "Bibliothekskomponenten " aufgeführt:

Benutzerdefinierte Eigenschaften

Eine Komponente kann Eingabewerte empfangen und Daten ausgeben, wenn Sie eine oder mehrere benutzerdefinierte Eigenschaften erstellen. Diese Szenarien sind erweitert und erfordern, dass Sie Formeln und verbindliche Verträge verstehen.

Eingabeeigenschaft ist, wie eine Komponente Daten empfängt, die in der Komponente verwendet werden sollen. Eingabeeigenschaften werden auf der Registerkarte "Eigenschaften " im rechten Bereich angezeigt, wenn eine Instanz der Komponente ausgewählt ist. Sie können Eingabeeigenschaften mit Ausdrücken oder Formeln so konfigurieren, wie Sie Standardeigenschaften in anderen Steuerelementen konfigurieren. Andere Steuerelemente verfügen über Eingabeeigenschaften, z. B. die Standardeigenschaft eines Texteingabesteuerelements .

Die Ausgabeeigenschaft wird verwendet, um Daten oder Komponentenstatus auszugeben. Die Selected-Eigenschaft eines Galerie-Steuerelements ist zum Beispiel eine Ausgabeeigenschaft. Wenn Sie eine Ausgabeeigenschaft erstellen, können Sie bestimmen, welche anderen Steuerelemente auf den Komponentenstatus verweisen können.

In der folgenden Anleitung werden diese Konzepte näher erläutert.

Erstellen einer Beispielkomponente

In diesem Beispiel erstellen Sie eine Menükomponente, die der folgenden Grafik ähnelt. Und Sie können den Text später ändern, um ihn in mehreren Bildschirmen, Apps oder beiden zu verwenden:

Erstellen einer neuen Komponente

1. Erstellen einer Canvas-App ohne Vorlage.

2. Wählen Sie in der Strukturansicht"Komponenten" und dann " Neue Komponente " aus, um eine neue Komponente zu erstellen.

   

3. Wählen Sie die neue Komponente im linken Bereich aus, klicken Sie auf die Auslassungspunkte (...), und wählen Sie dann Umbenennen aus. Geben Sie den Namen als MenuComponent ein, oder fügen Sie ihn ein.

4. Legen Sie im rechten Bereich die Breite der Komponente auf 150 und deren Höhe als 250 fest, und wählen Sie dann "Neue benutzerdefinierte Eigenschaft" aus. Sie können auch die Höhe und Breite auf einen beliebigen anderen Wert entsprechend festlegen.

   

5. Geben Sie in den Feldern "Anzeigename", "Eigenschaftsname" und "Beschreibung" Text als Elemente ein.

   

   Fügen Sie keine Leerzeichen in den Eigenschaftennamen ein, da Sie beim Schreiben einer Formel auf die Komponente mit diesem Namen verweisen. Beispiel: ComponentName.PropertyName.

   Der Anzeigename wird auf der Registerkarte "Eigenschaften " im rechten Bereich angezeigt, wenn Sie die Komponente auswählen. Ein beschreibender Anzeigename hilft Ihnen und anderen Erstellern, den Zweck dieser Eigenschaft zu verstehen. Die Beschreibung wird in einem Tooltip angezeigt, wenn Sie mit dem Mauszeiger über Anzeigename dieser Eigenschaft in der Registerkarte Eigenschaften fahren..

6. Wählen Sie in der Liste " Datentyp " die Option "Tabelle" und dann " Erstellen" aus.

   

   Die Items-Eigenschaft wird auf einen Standardwert basierend auf dem von Ihnen angegebenen Datentyp festgelegt. Sie können ihn auf einen Wert festlegen, der Ihren Anforderungen entspricht. Wenn Sie einen Datentyp von Tabelle oder Datensatz angegeben haben, können Sie den Wert der Items-Eigenschaft so ändern, dass sie mit dem Datenschema übereinstimmt, das Sie an die Komponente eingeben möchten. In diesem Fall ändern Sie es in eine Liste von Zeichenfolgen.

   Sie können den Wert der Eigenschaft in der Bearbeitungsleiste festlegen, wenn Sie den Namen der Eigenschaft auf der Registerkarte Eigenschaften im rechten Bereich auswählen.

   

   Wie die nächste Grafik zeigt, können Sie den Wert der Eigenschaft auch auf der Registerkarte "Erweitert " des rechten Bereichs bearbeiten.

7. Legen Sie die Items-Eigenschaft der Komponente auf diese Formel fest:

   Table({Item:"SampleText"})
   

   

8. Fügen Sie in der Komponente ein leeres vertikales Galerie-Steuerelement ein und wählen Sie Layout im Eigenschaftenbereich als Titel aus.

9. Stellen Sie sicher, dass in der Eigenschaftenliste die Items-Eigenschaft angezeigt wird (wie standardmäßig). Legen Sie dann den Wert dieser Eigenschaft auf diesen Ausdruck fest:

   MenuComponent.Items
   

   Auf diese Weise liest und hängt die Items-Eigenschaft des Gallery-Steuerelements von der Elementeingabeeigenschaft der Komponente ab.

10. Optional – Legen Sie die BorderThickness-Eigenschaft des Gallery-Steuerelements auf 1 und dessen TemplateSize-Eigenschaft auf 50 fest. Sie können auch Werte für die Rahmenstärke und die Vorlagengröße auf einen beliebigen anderen Wert aktualisieren.

Hinzufügen einer Komponente zu einem Bildschirm

Als Nächstes fügen Sie die Komponente zu einem Bildschirm hinzu und geben eine Tabelle mit Zeichenfolgen für die anzuzeigende Komponente an.

1. Wählen Sie im linken Bereich die Liste der Bildschirme aus, und wählen Sie dann den Standardbildschirm aus.

   

2. Öffnen Sie auf der Registerkarte "Einfügen " das Menü "Komponenten ", und wählen Sie dann "Menükomponente" aus.

   

   Die neue Komponente heißt standardmäßig MenuComponent_1 .

3. Legen Sie die Items-Eigenschaft von MenuComponent_1 auf diese Formel fest:

   Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})
   

   Diese Instanz ähnelt dieser Grafik, Aber Sie können den Text und andere Eigenschaften jeder Instanz anpassen.

   

Die Ausgabeeigenschaft erstellen und nutzen

Bisher haben Sie eine Komponente erstellt und einer App hinzugefügt. Als Nächstes erstellen Sie eine Ausgabeeigenschaft, die das Element widerspiegelt, das der Benutzer im Menü auswählt.

1. Öffnen Sie die Liste der Komponenten, und wählen Sie dann "MenuComponent" aus.

2. Wählen Sie im rechten Bereich die Registerkarte "Eigenschaften " und dann "Neue benutzerdefinierte Eigenschaft" aus.

3. Im Eigenschaftennamen Name anzeigen, Eigenschaftennamen und Beschreibung geben Sie den Text als Element ein oder kopieren Sie diesen.

4. Wählen Sie unter "Eigenschaftstyp" die Option "Ausgabe" und dann " Erstellen" aus.

   

5. Legen Sie auf der Registerkarte Erweitert den Wert der Selected-Eigenschaft auf diesen Ausdruck fest und passen Sie die Zahl im Galerienamen bei Bedarf an.

   Gallery1.Selected.Item
   

   

6. Fügen Sie auf dem Standardbildschirm der App eine Beschriftung hinzu und legen Sie die Eigenschaft Text für diesen Ausdruck fest, ggf. Anpassung der Ziffer im Komponentennamen:

   MenuComponent_1.Selected
   

   MenuComponent_1 ist der Standardname einer Instanz und nicht der Name der Komponentendefinition. Sie können jede Instanz umbenennen.

7. Wählen Sie bei gedrückter ALT-TASTE jedes Element im Menü aus.

   Das Label-Steuerelement spiegelt das Menüelement wider, das Sie zuletzt ausgewählt haben.

Umfang

Eingabe- und Ausgabeeigenschaften definieren die Schnittstelle zwischen einer Komponente und ihrer Host-App eindeutig. Standardmäßig wird die Komponente gekapselt, damit sie über mehrere Anwendungen hinweg leichter wiederverwendet werden kann. Dazu müssen die Eigenschaften verwendet werden, um die Informationen in die Komponente hinein- und herausfließen zu lassen. Bereichseinschränkungen behalten den Datenvertrag einer Komponente einfach und zusammenhängend bei, und sie hilft beim Aktivieren von Komponentendefinitionsupdates – insbesondere für apps mit Komponentenbibliotheken.

Es gibt jedoch Situationen, in denen eine Komponente eine Datenquelle oder eine Variable mit ihrem Host teilen möchte. Insbesondere, wenn die Komponente nur für die Verwendung in einer bestimmten App vorgesehen ist. In diesen Fällen können Sie direkt auf Informationen auf App-Ebene zugreifen, indem Sie den Access-App-Bereichsschalter im Eigenschaftenbereich der Komponente aktivieren:

Wenn der Access-App-Bereich aktiviert ist, kann von einer Komponente aus auf Folgendes zugegriffen werden:

• Globale Variablen
• Auflistungen
• Steuerelemente und Komponenten auf Bildschirmen, z. B. ein TextInput-Steuerelement
• Tabellarische Datenquellen, z. B. Dataverse-Tabellen

Wenn diese Einstellung deaktiviert ist, steht keine der oben genannten Funktionen dem Modul zur Verfügung.  Set und Collect Funktionen sind weiterhin verfügbar, aber die resultierenden Variablen und Sammlungen sind auf die Komponenteninstanz beschränkt und nicht mit der App geteilt.

Nicht-tabellarische Datenquellen, wie Azure Blob Storage oder ein benutzerdefinierter Connector, sind verfügbar, unabhängig davon, ob diese Einstellung aktiviert oder deaktiviert ist. Stellen Sie sich diese Datenquellen eher wie das Verweisen auf eine Umgebungsressource anstelle einer App-Ressource vor. Wenn eine Komponente aus einer Komponentenbibliothek in eine App eingebunden wird, werden diese Datenquellen aus der Umgebung ebenfalls eingebunden.

Komponenten in einer Komponentenbibliothek können niemals Zugriff auf den App-Bereich haben, da es keinen einzelnen App-Bereich gibt, auf den verwiesen werden kann. Daher ist diese Einstellung in diesem Kontext nicht verfügbar und effektiv deaktiviert. Nach dem Importieren in eine App und wenn die Anpassung vom Komponentenhersteller zugelassen wurde, kann der Switch aktiviert werden, und die Komponente kann so geändert werden, dass der App-Bereich verwendet wird.

Importieren und Exportieren von Komponenten (eingestellt)

Die Möglichkeit zum Importieren und Exportieren von Komponenten ist standardmäßig deaktiviert, da dieses Feature eingestellt ist. Obwohl die empfohlene Methode für die Verwendung von Komponentenbibliotheken darin besteht, Komponentenbibliotheken zu verwenden, können Sie dieses Feature weiterhin pro App als Ausnahme aktivieren, bis das Feature entfernt wird. Um dies zu tun, bearbeiten Sie Ihre App in Power Apps Studio, und wechseln Sie dann zu Einstellungen>Bevorstehende Funktionen>Zurückgezogen>Einrichten Komponenten exportieren und importieren zu Ein.

Nachdem Sie dieses Feature aktiviert haben, können Sie die folgenden Funktionen verwenden, um Komponenten zu importieren und zu exportieren.

Importieren von Komponenten aus einer anderen App

Wenn Sie eine oder mehrere Komponenten aus einer App in eine andere importieren möchten, wählen Sie im Menü "Einfügen" die Option "Komponenten importieren" aus, und verwenden Sie dann das Dropdownmenü "Benutzerdefiniert". Oder verwenden Sie Komponenten in der Strukturansicht im linken Bereich.

In einem Dialogfeld werden alle Apps aufgelistet, die Komponenten enthalten, die Sie zum Bearbeiten berechtigt sind. Wählen Sie eine App und dann "Importieren" aus, um die neueste veröffentlichte Version aller Komponenten in dieser App zu importieren. Nachdem Sie mindestens eine Komponente importiert haben, können Sie Ihre Kopie bearbeiten und löschen, die Sie nicht benötigen.

Sie können eine App mit vorhandenen Komponenten lokal in einer Datei speichern und dann die Datei wiederverwenden, indem Sie sie importieren. Sie können die Datei verwenden, um Komponenten in eine andere App zu importieren.

Wenn die App eine geänderte Version derselben Komponente enthält, werden Sie aufgefordert, zu entscheiden, ob die geänderte Version ersetzt oder der Import abgebrochen werden soll.

Nachdem Sie Komponenten in einer App erstellt haben, können andere Apps die Komponenten aus dieser App nutzen, indem sie importiert werden.

Exportieren von Komponenten aus Ihrer App

Sie können Komponenten in eine Datei exportieren und sie zum Importieren in eine andere App herunterladen.

Wählen Sie im Abschnitt "Komponenten exportieren" in der Strukturansicht im linken Bereich die Option "Komponenten exportieren" aus:

Sie können auch das Menü "Einfügen " verwenden und dann stattdessen das Dropdownmenü "Benutzerdefiniert " auswählen.

Wenn Sie "Komponenten exportieren " auswählen, werden die Komponenten in eine Datei heruntergeladen:

Die heruntergeladene Komponentendatei verwendet die Dateinamenerweiterung MSAPP .

Importieren von Komponenten aus exportierter Komponentendatei

Wenn Sie Komponenten aus einer exportierten Komponentendatei importieren möchten, wählen Sie entweder im Menü "Einfügen" die Option "Komponenten importieren" aus, und verwenden Sie dann das Dropdownmenü "Benutzerdefiniert", oder verwenden Sie "Komponenten" in der Strukturansicht im linken Bereich. Wählen Sie im Dialogfeld "Komponenten" die Option "Datei hochladen " aus, anstatt andere Komponenten oder Apps auszuwählen:

Navigieren Sie im Dialogfeld " Öffnen " zum Speicherort der Komponentendatei, und wählen Sie "Öffnen" aus, um Komponenten in der App zu importieren.

Importieren von Komponenten aus exportierter App

Sie können eine App lokal speichern, indem Sie die Option Datei>Speichern unter verwenden:

Nachdem Sie die App gespeichert haben, können Sie die Komponenten dieser App mit derselben Methode zum Importieren von Komponenten aus einer Datei wiederverwenden. Führen Sie die Schritte im vorherigen Abschnitt zum Importieren von Komponenten aus der exportierten Komponentendatei aus.

Bekannte Einschränkungen

• Eine benutzerdefinierte Eingabeeigenschaft kann nicht für einen benutzerdefinierten Ausgabeeigenschaftswert über dieselben oder unterschiedliche Instanzen hinweg konfiguriert werden, wenn Sie zwei oder mehr Instanzen derselben Komponente in einer App haben. Diese Aktion führt zu einer kreisförmigen Referenzwarnmeldung. Um diese Einschränkung zu umgehen, können Sie eine Kopie der Komponente in Ihrer App erstellen.
• Das Hinzufügen und Ausführen von Power Automate-Flüssen in Komponentenbibliotheken wird nicht unterstützt.
• Sie können keine Datenquellen oder Steuerelemente speichern, die Daten aus diesen Datenquellen (z. B. Formulare, dynamische Raster oder Datentabellen) mit Komponenten enthalten.
• Sie können eine Komponente nicht in einen Katalog oder ein Formular (einschließlich SharePoint-Formular) einfügen.
• Komponenten unterstützen die UpdateContext-Funktion nicht, Aber Sie können Variablen in einer Komponente mithilfe der Set-Funktion erstellen und aktualisieren. Der Umfang dieser Variablen ist auf die Komponente beschränkt, Sie können aber über benutzerdefinierte Ausgabeeigenschaften von außerhalb der Komponente darauf zugreifen.

Nächste Schritte

Erfahren Sie, wie Sie eine Komponentenbibliothek verwenden, um ein Repository wiederverwendbarer Komponenten zu erstellen.

Siehe auch

• Komponentenbibliothek
• Anwendungslebenszyklusverwaltung für Komponentenbibliotheken (COMPONENT Library Application Lifecycle Management, ALM)
• Zuordnen von Eingabefeldern einer Komponente
• Hinzufügen von Multimedia zu einer Komponente
• Verhaltensformeln für Komponenten
• Power Apps-Komponentenframework
• Hinzufügen von Canvaskomponenten zu einer benutzerdefinierten Seite in einer modellgesteuerten App