Freigeben über


Implementieren einer IFRAME-Komponente

In diesem Beispiel wird beschrieben, wie Sie eine Codekomponente an unterschiedliche Spalten im Formular binden und den Wert dieser Spalten als Eingabeeigenschaften der Komponente verwenden.

IFRAME-Komponente.

Verfügbar für

Modellgesteuerte und Canvas-Apps

Code

Sie können die komplette Beispielkomponente hier herunterladen.

Hinweis

Das Power Apps Component Framework unterstützt noch keine zusammengesetzten Spalten, Sie können diese Komponente daher nicht an die Adressfelder für Längen- und Breitengrad binden. Sie müssen die Codekomponente an ein anderes Gleitkomma-Feld binden.

In dieser Beispielkomponente wird IFRAME gerendert, das Bing Maps URL anzeigt. Die Komponente ist an zwei Gleitkommaspalten im Formular gebunden, die als Parameter an die Komponente übergeben und in IFRAME URL eingebracht werden, um Bing Map mit dem Längengrad und Breitendrad der bereitgestellten Eingabe zu aktualisieren.

Aktualisieren Sie die Manifest-Datei, um die Bindung an zwei zusätzliche Spalten im Formular einzuschließen.
Diese Änderung informiert das Power Apps Component Framework, dass diese gebundenen Spalten während der Initialisierung sowie bei jeder Aktualisierung eines deer Werte an die Komponente übergeben werden müssen.


<property name="latitudeValue" display-name-key="Bing_Maps_Latitude_Value" description-key="latitude" of-type="FP" usage="bound" required="true" />  
<property name="longitudeValue" display-name-key="Bing_Maps_Longitude_Value" description-key="longitude" of-type="FP" usage="bound" required="true" />  

Möglicherweise gelten zusätzliche gebundene Eigenschaften oder nicht. Dadurch wird bei der Komponentenkonfiguration erzwungen, wenn die Komponente an das Formular gebunden wird. Dies kann konfiguriert werden, indem das Attribut required des Eigenschaftenknotens im Komponentenmanifest festgelegt wird. Legen Sie den Wert auf "falsch" fest, wenn Sie die Komponenteneigenschaft nicht an ein Feld gebunden werden soll.

ComponentFramework.d.ts muss aktualisiert werden, um der IInputs-Schnittstelle zwei Spalten hinzuzufügen. Dies ist das Format, in dem das Power Apps component framework die Feldwerte übergibt. Das Hinzufügen dieser Werte zur IInputs-Schnittstelle ermöglicht es Ihrer TypeScript-Datei, die Werte zu verweisen und erfolgreich zu kompilieren.

    export interface IInputs 
    { latitudeValue: ComponentFramework.PropertyTypes.NumberProperty;  
        longitudeValue: ComponentFramework.PropertyTypes.NumberProperty;  
    }  

Das ursprüngliche Rendering generiert ein IFRAME-Element und hängt es dem Steuerelement-Container an. Dieses IFRAME wird häufig verwendet, um Bing Map anzuzeigen. Die URL von IFRAME wird auf eine Bing Map URL festgelegt und enthält die gebundenen Spalten (latitudeValue und longitudeValue) in der URL, um die Karte am angegebenen Standort zu zentrieren.

Die updateView-Methode wird aufgerufen, wenn eine dieser Spalten im Formular aktualisiert wird. Diese Methode aktualisiert die URL des Bing Map-IFRAMEs, um die neuen Breiten- und Längengradwerte zu verwenden, die der Komponente übergeben werden. Um diese Komponente zur Laufzeit anzuzeigen, binden Sie die Komponente wie jede andere Codekomponente an ein Feld im Formular.

Beispielkomponenten herunterladen
Beispielkomponenten verwenden
Manifestschemareferenz des Power Apps component framework
Power Apps component framework-API-Referenz
Power Apps component framework Übersicht

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