Integración de PowerApps tanto en sitios web como en otros serviciosIntegrate PowerApps into websites and other services

Las aplicaciones que crea suelen ser más útiles cuando están disponibles allí donde las personas realizan su trabajo.The apps you build are often most useful when they're available right where people are doing their work. PowerApps permite insertar aplicaciones en un iframe para poder integrarlas tanto en sitios web como en otros servicios, como Power BI o SharePoint.PowerApps enables you to embed apps in an iframe so that you can integrate those apps into websites and other services, such as Power BI or SharePoint.

En este tema se muestra cómo establecer los parámetros para la inserción de aplicaciones y, después, se instará la aplicación Asset Ordering en un sitio web.In this topic, we'll show you how to set parameters for app embedding; then we'll embed our Asset Ordering app in a website.

Panel de Power BI con aplicación insertada

Tenga en mente las siguientes restricciones:Keep the following restrictions in mind:

  • Los únicos usuarios de PowerApps que pueden acceder a la aplicación insertada son los que se encuentran en el mismo inquilino.Only PowerApps users in the same tenant can access the embedded app.
  • PowerApps solo es compatible con Internet Explorer 11 cuando la función Vista de compatibilidad está desactivada.PowerApps supports Internet Explorer 11 only with Compatibility View turned off.

También puede integrar PowerApps en SharePoint Online (sin usar un iframe).You can also integrate PowerApps into SharePoint Online (without using an iframe). Para más información, consulte Creación de una aplicación desde SharePoint mediante PowerApps.For more information, see Generate an app from within SharePoint using PowerApps.

Establecer los parámetros URI de la aplicaciónSet URI parameters for your app

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.If you have an app you want to embed, the first step is to set parameters for the Uniform Resource Identifier (URI), so that the iframe knows where to find the app. El identificador URI tiene la forma siguiente:The URI is in the following form:

https://web.powerapps.com/webplayer/iframeapp?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.Note: We added a line break so the URI displays better on the page.

Lo único que tiene que hacer es sustituir el identificador de la aplicación por [AppID] en el identificador URI (incluido "[' & ']").The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). Le mostraremos cómo obtener ese valor en breve, pero primero aquí están todos los parámetros disponibles en el identificador URI:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID]: tiene el formato /providers/Microsoft.PowerApps/apps/[AppID].[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. Proporciona el identificador de la aplicación que se va a ejecutar.It provides the ID of the app to run.
  • screenColor: se usa para proporcionar a los usuarios una mejor experiencia de carga.screenColor - is used to provide a better app loading experience for your users. Este parámetro tiene el formato RGBA (rojo, verde, azul, alfa) y controla el color de la pantalla mientras se carga la aplicación.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. Es mejor establecerlo en el mismo color que el icono de la aplicación.It is best to set it to the same color as your app's icon.
  • source: no afecta a la aplicación, pero se recomienda agregar un nombre descriptivo para hacer referencia al origen de la aplicación insertada.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • 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.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. Se agregan al final del identificador URI, como [AppID]&param1=value1.They are added to the end of the URI, such as [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.These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

Obtener el identificador de aplicaciónGet the App ID

El identificador de la aplicación está disponible en powerapps.com. Para la aplicación que desea insertar:The app ID is available on powerapps.com. For the app you want to embed:

  1. En powerapps.com, en la pestaña Aplicaciones, pulse o haga clic en los puntos suspensivos (...In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ) y, a continuación, seleccione Detalles.), then Details.

    Ir a los detalles de la aplicación

  2. Copie el Id. de aplicación.Copy the App ID.

    Copiar el identificador de la aplicación desde los detalles

  3. Sustituya el valor [AppID] en el identificador URI.Substitute the [AppID] value in the URI. Para la aplicación "Pedido de activos", el identificador URI tiene el siguiente aspecto:For our Asset Ordering app, the URI looks like this:

    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 webEmbed your app in a website

Ahora es muy fácil incrustar aplicaciones, solo hay que agregar el iframe al código HTML del sitio (o a cualquier otro servicio que admita iframes, como Power BI o SharePoint):Embedding your app is now as simple as adding the iframe to the HTML code for your site (or any other service that supports iframes, such as Power BI or SharePoint):

<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].Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

La siguiente imagen muestra la aplicación "Pedido de activos" insertada en un sitio web de ejemplo de Contoso.The following image shows the Asset Ordering app embedded in a Contoso sample website.

Sitio web de Contoso con la aplicación insertada

Tenga en cuenta los puntos siguientes para autenticar a los usuarios de la aplicación:Keep the following points in mind for authenticating users of your app:

  • Si el sitio web usa autenticación basada en Azure Active Directory (AAD), no será necesario ningún inicio de sesión adicional.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • 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.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the 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.After they sign-in, they will be able to run the app as long as the author of the app has shared it with them.

Como ve, insertar aplicaciones es fácil y eficaz.As you can see, embedding apps is simple and powerful. La inserción le permite llevar las aplicaciones a los lugares en los que usted y sus clientes trabajan (sitios web, paneles de Power BI y páginas de SharePoint, entre otros).Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.