Integrar aplicações baseadas em telas em sites e noutros serviçosIntegrate canvas apps into websites and other services

As aplicações que cria geralmente são mais úteis quando estão disponíveis exatamente onde as pessoas trabalham.The apps that you build are often most useful when they're available right where people do their work. Ao incorporar aplicações baseadas em telas num iframe, pode integrá-las em Web sites e outros serviços, como o Power BI ou do SharePoint.By embedding canvas apps in an iframe, you can integrate those apps into websites and other services, such as Power BI or SharePoint.

Neste tópico, vamos mostrar-lhe como definir parâmetros para incorporar aplicações; em seguida, vamos incorporar a nossa aplicação de Ordenação de Recursos num Web site.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.

Dashboard do Power BI com uma aplicação incorporada

Considere as seguintes restrições:Keep the following restrictions in mind:

  • Apenas os utilizadores do PowerApps no mesmo inquilino podem aceder à aplicação incorporada.Only PowerApps users in the same tenant can access the embedded app.
  • Para aceder ao PowerApps com o Internet Explorer 11, tem de desativar a Vista de Compatibilidade.To access PowerApps using Internet Explorer 11, you must turn off Compatibility View.

Também pode integrar aplicações baseadas em telas no SharePoint Online sem utilizar uma iframe.You can also integrate canvas apps into SharePoint Online without using an iframe. Mais informações: Usar a web part do PowerApps.More information: Use the PowerApps web part.

Definir parâmetros do URI para a aplicaçãoSet URI parameters for your app

Se tiver uma aplicação que quer incorporar, o primeiro passo consiste em definir os parâmetros do Uniform Resource Identifier (URI), para que a iframe saiba onde encontrar a aplicação.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. O URI tem o seguinte formato:The URI is in the following form:

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

Nota

Adicionámos uma quebra de linha para que o URI seja melhor apresentado na página.We added a line break so the URI displays better on the page.

A única coisa que tem de fazer é substituir o ID da sua aplicação por [AppID] no URI (incluindo '[' & ']').The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). Vamos mostrar-lhe como obter esse valor em breve, mas primeiro seguem-se todos os parâmetros disponíveis no URI:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID] – está no formato /providers/Microsoft.PowerApps/apps/[AppID].[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. Fornece o ID da aplicação a ser executada.It provides the ID of the app to run.
  • screenColor – é utilizado para fornecer uma melhor experiência de carregamento da aplicação para os seus utilizadores.screenColor - is used to provide a better app loading experience for your users. Este parâmetro está no formato RGBA (valor vermelho, valor verde, valor azul, alfa) e controla a cor do ecrã enquanto a aplicação é carregada.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. É melhor defini-lo para a mesma cor do ícone da aplicação.It is best to set it to the same color as your app's icon.
  • source – não afeta a aplicação, mas sugerimos que adicione um nome descritivo para referenciar a origem da incorporação.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Por último, pode adicionar quaisquer parâmetros personalizados que queira através da função Param() e esses valores podem ser utilizados pela sua aplicação.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. São adicionados à parte final do URI, como [AppID]&param1=value1.They are added to the end of the URI, such as [AppID]&param1=value1. Estes parâmetros são só de leitura durante o início da aplicação; se tiver de alterá-los, tem de voltar a iniciar a aplicação.These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

Obter o ID da aplicaçãoGet the App ID

O ID da aplicação está disponível em powerapps.com.The app ID is available on powerapps.com. Para a aplicação que quer incorporar:For the app you want to embed:

  1. Em powerapps.com, no separador Aplicações, clique ou toque nas reticências ( ...In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ) e, em seguida, em Detalhes.), then Details.

    Aceder aos detalhes da aplicação

  2. Copie o ID da Aplicação.Copy the App ID.

    Copiar o ID da aplicação a partir dos detalhes

  3. Substitua o valor [AppID] no URI.Substitute the [AppID] value in the URI. Para a nossa aplicação de Ordenação de Recursos, o URI tem este aspeto:For our Asset Ordering app, the URI looks like this:

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

Incorporar a aplicação num Web siteEmbed your app in a website

Incorporar a sua aplicação é agora tão simples como adicionar a iframe ao código HTML do seu site (ou qualquer outro serviço que suporte iframes, como o Power BI ou 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?source=website&screenColor=rgba(165,34,55,1)&appId=/providers/Microsoft.PowerApps/apps/[AppID]" allow="geolocation; microphone; camera"/>

Especifique os valores da largura e altura da iframe e substitua o ID da aplicação por [AppID].Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

Nota

Inclua allow="geolocation; microphone; camera" no seu código HTML iframe para permitir que as suas aplicações utilizem estas capacidades no Google Chrome.Include allow="geolocation; microphone; camera" in your iframe HTML code to allow your apps to use these capabilities on Google Chrome.

A imagem seguinte mostra a aplicação de Ordenação de Recursos incorporada num Web site de exemplo da Contoso.The following image shows the Asset Ordering app embedded in a Contoso sample website.

Web site da Contoso com uma aplicação incorporada

Considere os seguintes pontos para autenticar os utilizadores da sua aplicação:Keep the following points in mind for authenticating users of your app:

  • Se o seu Web site utilizar a autenticação baseada no Azure Active Directory (AAD), não é necessário nenhum início de sessão adicional.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Se o seu Web site utilizar qualquer outro mecanismo de início de sessão ou não for autenticado, os seus utilizadores verão uma linha de início de sessão na iframe.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. Depois de iniciarem sessão, poderão executar a aplicação, desde que o autor da mesma a tenha partilhado com eles.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 pode ver, incorporar aplicações é simples e eficiente.As you can see, embedding apps is simple and powerful. A incorporação permite-lhe colocar as aplicações diretamente nos seus locais de trabalho e dos seus clientes: Web sites, dashboards do Power BI, páginas do SharePoint e muito mais.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.