Implementieren einer IFRAME-Komponente

In diesem Beispiel wird gezeigt, wie eine IFRAME-Komponente Breiten- und Längengradspalten als Eingabeeigenschaften bindet. Verwenden Sie sie zum Anzeigen und Aktualisieren einer Bing-Karte in Power Apps.

Screenshot einer IFRAME-Komponente, die eine Bing-Karte anzeigt.

Verfügbar für

Modellgesteuerte und Canvas-Apps

IFRAME-Komponentencode

Sie können die vollständige Beispielkomponente aus diesem GitHub Repository herunterladen.

Anmerkung

Power Apps Komponentenframework unterstützt noch keine zusammengesetzten Spalten, sodass Sie diese Komponente nicht an die Standardspalten für Breiten- und Längengradadressen binden können. Sie müssen die Codekomponente an ein anderes Gleitkomma-Feld binden.

Diese Beispielkomponente rendert eine IFRAME, die eine Bing Karten URL anzeigt. Die Komponente ist an zwei Gleitkommaspalten im Formular gebunden. Die Komponente empfängt diese Spalten als Parameter und fügt sie in die IFRAME URL Datei ein, um die Bing Map auf den Breiten- und Längengrad der bereitgestellten Eingaben zu aktualisieren.

Aktualisieren Sie die Manifest-Datei, um die Bindung an zwei weitere Spalten im Formular einzuschließen.
Diese Änderung informiert das Power Apps Komponentenframework, dass diese gebundenen Spalten während der Initialisierung und wann immer einer der Werte aktualisiert wird, an die Komponente übergeben werden muss.

<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 müssen Sie weitere gebundene Eigenschaften hinzufügen. Die Komponentenkonfiguration erzwingt diese Anforderung, wenn Sie die Komponente an das Formular binden. Sie können diese Anforderung konfigurieren, indem Sie das required Attribut des Eigenschaftenknotens im Komponentenmanifest festlegen. Legen Sie den Wert fest, false wenn Sie die Komponenteneigenschaft nicht an ein Feld binden möchten.

Aktualisieren Sie ComponentFramework.d.ts , um der IInputs Schnittstelle zwei Spalten hinzuzufügen. Dies ist das Format, das das Power Apps Komponentenframework verwendet, um die Feldwerte zu übergeben. Durch Hinzufügen dieser Werte zur IInputs Schnittstelle kann Ihre TypeScript-Datei auf die Werte verweisen und erfolgreich kompiliert werden.

    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. Dies IFRAME zeigt die Bing Map an. Die URL des IFRAME ist 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 immer dann aufgerufen, wenn eine dieser Spalten im Formular aktualisiert wird. Diese Methode aktualisiert die URL des Bing Map IFRAME, um die neuen Breiten- und Längengradwerte zu verwenden, die an die Komponente übergeben werden. Um diese Komponente zur Laufzeit anzuzeigen, binden Sie die Komponente wie jede andere Codekomponente an ein Feld im Formular.

Beispielkomponenten herunterladen
So verwenden Sie die Beispielkomponenten
Referenz zum Manifestschema des Power Apps-Komponentenframeworks
Power Apps Component Framework-API-Referenz
Übersicht über das Power Apps-Komponentenframework

  • Last updated on