Implementación de un componente IFRAME

En este ejemplo se muestra cómo un componente IFRAME enlaza columnas de latitud y longitud como propiedades de entrada. Úselo para mostrar y actualizar un mapa de Bing en Power Apps.

Disponible para

Aplicaciones de lienzo y basadas en modelos

Código del componente IFRAME

Puede descargar el componente de ejemplo completo de este repositorio de GitHub.

Nota

Power Apps marco de componentes aún no admite columnas compuestas, por lo que no se puede enlazar este componente a las columnas de dirección de latitud y longitud predeterminadas. Debe vincular el componente de código a otro campo de punto flotante.

Este componente de ejemplo renderiza un IFRAME que muestra un Mapas de Bing URL. El componente está enlazado a dos columnas de punto flotante en el formulario. El componente recibe estas columnas como parámetros y las inserta en IFRAME URL para actualizar el mapa de Bing a la latitud y longitud de los valores proporcionados.

Actualice el archivo de Manifest para incluir el enlace a dos columnas adicionales en el formulario.
Este cambio informa al marco de componentes de Power Apps que debe pasar estas columnas enlazadas al componente durante la inicialización y cada vez que se actualiza uno de los valores.

<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" />

Es posible que tenga que agregar más propiedades enlazadas. La configuración del componente aplica este requisito al enlazar el componente al formulario. Puede configurar este requisito estableciendo el required atributo del nodo de propiedad en el manifiesto del componente. Establezca el valor false en si no desea requerir que la propiedad del componente esté enlazada a un campo.

Actualice ComponentFramework.d.ts para agregar dos columnas a la IInputs interfaz. Este es el formato que usa el marco de componentes de Power Apps para pasar los valores de campo. Al agregar estos valores a la IInputs interfaz, el archivo TypeScript puede hacer referencia a los valores y compilarse correctamente.

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

La representación inicial genera un elemento IFRAME y lo agrega al contenedor de controles. Esto IFRAME muestra el mapa de Bing. La dirección URL de IFRAME se establece en un/a Bing Map URL e incluye las columnas vinculadas (latitudeValue y longitudeValue) en la URL para centrar el mapa en la ubicación proporcionada.

El método updateView se invoca cada vez que una de estas columnas se actualiza en el formulario. Este método actualiza la dirección URL del IFRAME de mapa de Bing para usar los nuevos valores de latitud y longitud pasados al componente. Para ver este componente en tiempo de ejecución, enlace el componente a un campo del formulario como cualquier otro componente de código.

Artículos relacionados

Descargar componentes de ejemplo
¿Cómo usar los componentes de ejemplo?
Referencia del esquema del manifiesto del marco de componentes de Power Apps
Referencia de la API de Power Apps component framework
Información general sobre Power Apps component framework