Incrustar página web externa en Power Apps


En este artículo veremos cómo incrustar oáginas web externas en Microsoft Power Apps como si incluyeramos un IFrame dentro de nuestra App.

Un cliente me ha solicitado hace poco que le incluya un sitio web dentro de su aplicación Power Apps y no sabía cómo hacerlos, de hecho tenía entendido que no se podía hacerlo.

Pero he encontrado una forma y el cliente quedó contento.

Windows y PowerShell

  1. Descargar los componentes de ejemplo desde aquí:

  2. Descargar el Power Platform CLI desde aquí (en mi caso instalé la versión MSI).

  3. Descomprimir el archivo descargado desde GitHub.

  4. En PowerShell empezar a jugar un poco con los comandos (siguiendo las instrucciones de aqui):

cd C:\A\PowerApps-Samples-master\PowerApps-Samples-master\component-framework\IFrameControl\
mkdir IFrameSolution
cd C:\A\PowerApps-Samples-master\PowerApps-Samples-master\component-framework\IFrameControl\IFrameSolution
pac solution init --publisher-name powerapps_samples --publisher-prefix sample
pac solution add-reference --path ../../IFrameControl
pac solution add-reference --path ../../IFrameControl/IFrameControl.pcfproj
msbuild /t:restore
msbuild /t:rebuild /restore /p:Configuration=Release
msbuild

Con todo esto se debe crear un archivo IFrameSolution.zip dentro de la carpeta bin/Release/, el cual, llevaremos a Power Apps.

Power Apps

  1. Procedemos a importar la solución generada en los pasos anteriores:

  2. Verificamos si la importación fue correcta:

  3. Importamos el componente (en este caso, es un componente de tipo Código):

  4. Utilizamos el IFRAME

Debemos tener en cuenta que el control de ejemplo sólo es un Mapa de Bing que permite latitud y longitud. Como en mi caso, se pueden agregar y/o modificar los parametros y volver a generar el control para cubrir nuestras necesidades.

Se debe tener cuidado con ingresas JavaScript pues el componente puede ser bloqueado por considerarse araque de Cross-Site Scripting (XSS).

De esta manera, hemos visto como incrustar una página web dentro de Microsoft Power Apps

¡Espero resulte de utilidad!


Ver también

comments powered by Disqus