Canvas-Komponentenübersicht

Hinweis

• In diesem Abschnitt werden Canvaskomponenten erläutert, die Funktionen für die Erweiterbarkeit von Benutzeroberflächen mit geringem Code umfassen. Professionelle Entwickler können auch das Power Apps-Komponentenframework verwenden, um Codekomponenten zu erstellen.
• Sie können Canvaskomponenten auch in modellgesteuerten Apps verwenden, indem Sie benutzerdefinierte Seiten und die Komponentenbibliothek verwenden. Weitere Informationen finden Sie unter Hinzufügen von Canvaskomponenten zu einer benutzerdefinierten Seite in einer modellgesteuerten App.

Komponenten sind wiederverwendbare Bausteine für Canvas-Apps. App-Entwickler können benutzerdefinierte Steuerelemente erstellen, die in einer App oder in apps mithilfe einer Komponentenbibliothek verwendet werden. 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 verringern auch die Duplizierung des Aufwands, indem sie die Notwendigkeit beseitigen, Steuerelemente zu kopieren und einzufügen, und so die Leistung verbessern. Wenn Sie eine Komponentenbibliothek verwenden, helfen Komponenten beim Erstellen der gemeinsamen Entwicklung und Standardisierung des Erscheinungsbilds in einer Organisation.

Wenn Sie erfahren möchten, wie Sie Komponenten in Canvas-Apps verwenden, schauen Sie sich dieses Video an:

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. Verwenden Sie eine Komponentenbibliothek, wenn Sie Komponenten auf mehreren App-Bildschirmen verwenden müssen. Sie können vorhandene 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. Fügen Sie Steuerelemente als Teil der Komponentendefinition auf der Canvas hinzu. Wenn Sie eine Komponente im Canvas bearbeiten, aktualisieren Sie Instanzen derselben Komponente in anderen App-Bildschirmen. 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.

In der App verfügbare Komponenten werden unter der Kategorie "Benutzerdefiniert" in einer Liste der Komponenten in der Strukturansicht angezeigt. Aus Komponentenbibliotheken importierte Komponenten werden unter der Kategorie "Bibliothekskomponenten " angezeigt:

Hinweis

Die in diesem Artikel erläuterten Komponenten unterscheiden sich von dem Power Apps-Komponentenframework, mit dem Entwickler und Hersteller Codekomponenten für modellgesteuerte Apps und Canvas-Apps erstellen können. Weitere Informationen finden Sie in der Übersicht über das Power Apps-Komponentenframework.

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.

Hinweis

Ein experimentelles Feature für erweiterte Komponenteneigenschaften bietet noch mehr Optionen für Eigenschaften, einschließlich Funktionen und Verhaltensfunktionen. Weitere Informationen finden Sie unter Canvas-Komponenteneigenschaften (experimentell)

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:

Hinweis

Es wird empfohlen, beim Erstellen von Komponenten zur Wiederverwendung eine Komponentenbibliothek zu verwenden. Durch das Aktualisieren von Komponenten innerhalb einer App werden nur die Komponentenupdates innerhalb der App verfügbar. Wenn Sie eine Komponentenbibliothek verwenden, werden Sie aufgefordert, Komponenten zu aktualisieren, wenn Komponenten in einer Bibliothek aktualisiert und veröffentlicht werden.

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

Fügen Sie als Nächstes die Komponente zu einem Bildschirm hinzu, und geben Sie 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. Erstellen Sie als Nächstes 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 für den Host freigeben möchte. Die gemeinsame Nutzung ist besonders nützlich, wenn die Komponente nur in einer bestimmten App verwendet werden soll. 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 Sie den Access-App-Bereich aktivieren, können auf die folgenden Elemente innerhalb einer Komponente zugegriffen werden:

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

Wenn Sie diese Einstellung deaktivieren, kann die Komponente nicht auf die vorherigen Elemente zugreifen.  Set - und Collect-Funktionen sind weiterhin verfügbar, aber die resultierenden Variablen und Auflistungen gelten für die Komponenteninstanz und werden nicht für die App freigegeben.

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 auf den App-Bereich zugreifen, 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 zulässig ist, kann der Switch aktiviert werden, und die Komponente kann so geändert werden, dass der App-Bereich verwendet wird.

Hinweis

• Sie können Instanzen von Komponenten in einen Bildschirm in einer Komponentenbibliothek einfügen und diesen Bildschirm zu Testzwecken in der Vorschau anzeigen.
• Die Komponentenbibliothek wird nicht angezeigt, wenn Sie Power Apps Mobile verwenden.

Importieren und Exportieren von Komponenten (eingestellt)

Hinweis

Dieses Feature wird eingestellt. Komponentenbibliotheken sind die empfohlene Möglichkeit, die Komponenten in allen Apps wiederzuverwenden. Bei Verwendung der Komponentenbibliothek verwaltet eine App Abhängigkeiten von den verwendeten Komponenten. Der App-Hersteller wird benachrichtigt, wenn die Updates für abhängige Komponenten verfügbar sind. Daher sollten stattdessen alle neuen wiederverwendbaren Komponenten in den Komponentenbibliotheken erstellt werden.

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

Hinweis

Wenn eine Komponente, die Sie aus einer anderen App importiert haben, in der ursprünglichen App geändert wird, müssen Sie die Komponente manuell in der verbrauchenden App importieren, um aktuelle Komponentenänderungen zu erhalten. Verwenden Sie stattdessen Komponentenbibliotheken, um mit Komponentenupdates effizienter zu arbeiten.

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 "Datei>speichern unter" auswählen:

Nachdem Sie die App gespeichert haben, können Sie die zugehörigen Komponenten wiederverwenden, indem Sie sie aus einer Datei importieren. Weitere Informationen finden Sie im vorherigen Abschnitt zum Importieren von Komponenten aus einer exportierten Komponentendatei.

Bekannte Einschränkungen

• Wenn Sie über zwei oder mehr Instanzen derselben Komponente in einer App verfügen, können Sie eine benutzerdefinierte Eingabeeigenschaft nicht auf einen benutzerdefinierten Ausgabeeigenschaftswert für dieselben oder unterschiedliche Instanzen konfigurieren. Diese Aktion führt zu einer Warnmeldung wegen eines Zirkelbezugs. Um diese Einschränkung zu umgehen, erstellen Sie eine Kopie der Komponente in Ihrer App.
• 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