Implementar um componente IFRAME

Este exemplo mostra como um componente IFRAME associa colunas de latitude e longitude como propriedades de entrada. Use-o para exibir e atualizar um Mapa do Bing em Power Apps.

Disponível para

Aplicativos baseados em modelo e aplicativos de tela

Código do componente IFRAME

Você pode baixar o componente de exemplo completo deste repositório GitHub.

Este componente de exemplo renderiza um IFRAME que exibe um Bing Mapas URL. O componente está vinculado a duas colunas de ponto flutuante no formulário. O componente recebe essas colunas como parâmetros e as injeta em IFRAME URL para atualizar o Bing Map com a latitude e a longitude das entradas fornecidas.

Atualize o Manifest arquivo para incluir a associação a mais duas colunas no formulário.
Essa alteração informa à estrutura de componentes Power Apps que ela precisa passar essas colunas associadas para o componente durante a inicialização e sempre que um dos valores for atualizado.

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

Talvez seja necessário adicionar mais propriedades associadas. A configuração do componente impõe esse requisito quando você associa o componente ao formulário. Você pode configurar esse requisito definindo o required atributo do nó de propriedade no manifesto do componente. Defina o valor para false se você não quiser exigir que a propriedade do componente seja associada a um campo.

Atualize ComponentFramework.d.ts para adicionar duas colunas à IInputs interface. Esse é o formato que a estrutura de componentes Power Apps usa para passar os valores de campo. Ao adicionar esses valores à interface, o IInputs arquivo TypeScript pode referenciar os valores e compilar com êxito.

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

A renderização inicial gera um IFRAME elemento e o acrescenta ao contêiner de controles. Isso IFRAME exibe o Mapa do Bing. A URL do IFRAME é definida como um Bing Map URL e inclui as colunas associadas (latitudeValue e longitudeValue) na URL para centralizar o mapa no local fornecido.

O método updateView é invocado sempre que uma dessas colunas é atualizada no formulário. Esse método atualiza a URL do IFRAME do Mapa do Bing para usar os novos valores de latitude e longitude passados para o componente. Para exibir esse componente em runtime, associe o componente a um campo no formulário como qualquer outro componente de código.

Artigos relacionados

Baixar componentes de exemplo
Como usar os componentes de exemplo
Referência de esquema do manifesto da estrutura de componentes do Power Apps
Referência da API da estrutura de componentes do Power Apps
visão geral da estrutura de componentes Power Apps