Las aplicaciones que crea suelen ser más útiles cuando están disponibles allí donde las personas realizan su trabajo. PowerApps permite insertar aplicaciones en un iframe para que las pueda integrar en sitios web y paneles de Power BI.

En este tema, mostraremos cómo establecer los parámetros para insertar una aplicación; a continuación, insertaremos una aplicación de ejemplo "Pedido de activos" en un sitio web y en un panel.

Panel de Power BI con aplicación insertada

Nota: Solo los usuarios de PowerApps en el mismo inquilino pueden tener acceso a la aplicación insertada.

También puede integrar PowerApps en SharePoint Online (sin usar un iframe). Para más información, consulte Creación de una aplicación desde SharePoint mediante PowerApps.

Establecer los parámetros URI de la aplicación

Si tiene una aplicación que desea insertar, el primer paso es establecer los parámetros para el identificador uniforme de recursos (URI), para que el iframe sepa dónde se encuentra la aplicación. El identificador URI tiene la forma siguiente:

https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
source=iframe&appId=/providers/Microsoft.PowerApps/apps/[AppID]

Nota: Hemos agregado un salto de línea para que el identificador URI se muestre mejor en la página.

Lo único que tiene que hacer es sustituir el identificador de la aplicación por [AppID] en el identificador URI. Le mostraremos cómo obtener ese valor en breve, pero primero aquí están todos los parámetros disponibles en el identificador URI:

  • appID: tiene el formato /providers/Microsoft.PowerApps/apps/[AppID]. Proporciona el identificador de la aplicación que se va a ejecutar.
  • hideNavBar: es un valor booleano (verdadero/falso) que controla si el encabezado de Dynamics 365 para la aplicación es visible o no. Se recomienda un valor de true si se trata de la única aplicación que insertará en el sitio.
  • screenColor: se usa para proporcionar a los usuarios una mejor experiencia de carga. Este parámetro tiene el formato RGBA (rojo, verde, azul, alfa) y controla el color de la pantalla mientras se carga la aplicación. Es mejor establecerlo en el mismo color que el icono de la aplicación.
  • source: no afecta a la aplicación, pero se recomienda agregar un nombre descriptivo para hacer referencia al origen de la aplicación insertada.
  • Por último, puede agregar los parámetros personalizados que desee con la función Param() y esos valores pueden ser utilizados por la aplicación. Se agregan al final del identificador URI, como [AppID]&param1=value1. Estos parámetros son de solo lectura durante el inicio de la aplicación; si necesita cambiarlos, debe volver a iniciar la aplicación.

Obtener el identificador de aplicación

El identificador de la aplicación está disponible en powerapps.com. Para la aplicación que desea insertar:

  1. En powerapps.com, en la pestaña Aplicaciones, pulse o haga clic en los puntos suspensivos (... ) y, a continuación, seleccione Detalles.

    Ir a los detalles de la aplicación

  2. Copie el Id. de aplicación.

    Copiar el identificador de la aplicación desde los detalles

  3. Sustituya el valor [AppID] en el identificador URI. Para la aplicación "Pedido de activos", el identificador URI tiene el siguiente aspecto:

    https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=iframe&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    

Insertar la aplicación en un sitio web

Ahora, insertar la aplicación es tan fácil como agregar el iframe al código HTML de su sitio:

<iframe width="[W]" height="[H]" src="https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
source=website&screenColor=rgba(165,34,55,1)&appId=/providers/Microsoft.PowerApps/apps/[AppID]"/>

Especifique los valores de ancho y alto del iframe y sustituya el identificador de la aplicación por [AppID].

La siguiente imagen muestra la aplicación "Pedido de activos" insertada en un sitio web de ejemplo de Contoso.

Sitio web de Contoso con la aplicación insertada

Tenga en cuenta los puntos siguientes para autenticar a los usuarios de la aplicación:

  • Si el sitio web usa autenticación basada en Azure Active Directory (AAD), no será necesario ningún inicio de sesión adicional.
  • Si el sitio web utiliza cualquier otro mecanismo de inicio de sesión o no está autenticado, los usuarios verán un mensaje de inicio de sesión en el iframe. Después de iniciar sesión, podrán ejecutar la aplicación siempre y cuando el autor de la aplicación la haya compartido con ellos.

Insertar la aplicación en un panel de Power BI

En consonancia con nuestra visión de medición, actuación y automatización, creemos que el mejor lugar para usar una aplicación es en el contexto de los datos que se miden y de los informes que se supervisan.

En este ejemplo, hemos creado un panel de Power BI para supervisar las ventas de productos de la empresa. En este panel, vigilamos las tendencias de venta de equipos hardware y solicitamos el inventario de nuevo hardware dentro del panel, desde la aplicación insertada. Insertar la aplicación permite a los especialistas de inventario ir a un único lugar a realizar su trabajo y estarán satisfechos de continuar en el panel del Power BI al que están habituados.

En la siguiente imagen se ve la aplicación "Pedido de activos" insertada directamente en el panel, junto a las cifras de ventas que proporcionan el contexto para el proceso de pedido de hardware.

Panel de Power BI con aplicación insertada

Para insertar una aplicación en un panel de Power BI, siga estos pasos:

  1. Cree el identificador URI tal y como se mostró anteriormente:

    https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=powerbi&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    
  2. Agregue el identificador URI a un iframe. En este caso, se establecen el ancho y alto en un 98 % para evitar tener barras de desplazamiento en el icono:

    <iframe width="98%" height="98%" src="https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=powerbi&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2"/>
    
  3. Vaya al panel de Power BI donde desea insertar la aplicación.

  4. En el panel, en la barra de menús superior, pulse o haga clic en Agregar icono. En función de las limitaciones de espacio, podría ver únicamente el signo más (+).

    Agregar icono en el panel de Power BI

  5. Pulse o haga clic en CONTENIDO WEB y, a continuación, pulse Siguiente.

    Agregar contenido web a un panel

  6. Pegue el código del iframe en el campo Insertar código y pulse o haga clic en Aplicar.

    Insertar código para el contenido web

  7. El icono debería aparecer ahora en el panel, y puede moverlo donde desee, al igual que otros iconos. Para más información sobre cómo agregar iconos a un panel, consulte Agregar imagen, texto, vídeo y mucho más al panel.

Como ve, insertar aplicaciones es fácil y eficaz. Insertar aplicaciones le permite llevar las aplicaciones a los lugares en los que usted y sus clientes trabajan: en sitios web y en los paneles de Power BI.