PowerApps uygulamalarını web siteleri ve diğer hizmetlerle tümleştirmeIntegrate PowerApps into websites and other services

Oluşturduğunuz uygulamalar genelde en çok faydayı doğrudan kullanıcıların iş yaptığı yerlerde kullanılabildiğinde sağlar.The apps you build are often most useful when they're available right where people are doing their work. PowerApps, uygulamaları bir iframe içine ekleyerek web siteleri ve Power BI veya SharePoint gibi diğer hizmetlerle tümleştirmenizi sağlar.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.

Bu konu başlığında uygulamaları eklemek için gerekli parametreleri nasıl belirleyeceğinizi gösterdikten sonra Ürün Siparişi uygulamamızı bir web sitesine ekleyeceğiz.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.

Eklenmiş uygulamanın gösterildiği Power BI panosu

Aşağıdaki kısıtlamaları göz önünde bulundurun:Keep the following restrictions in mind:

  • Eklenen uygulamaya yalnızca aynı kiracı içindeki PowerApps kullanıcıları erişebilir.Only PowerApps users in the same tenant can access the embedded app.
  • PowerApps, Internet Explorer 11'i Uyumluluk Görünümü kapatılmış şekilde destekler.PowerApps supports Internet Explorer 11 only with Compatibility View turned off.

PowerApps uygulamalarını SharePoint Online (iframe kullanmadan) ile de tümleştirebilirsiniz.You can also integrate PowerApps into SharePoint Online (without using an iframe). Daha fazla bilgi için bkz. PowerApps kullanarak SharePoint içinden bir uygulama oluşturma.For more information, see Generate an app from within SharePoint using PowerApps.

Uygulamanız için URI parametrelerini ayarlamaSet URI parameters for your app

Eklemek istediğiniz bir uygulama varsa atmanız gereken ilk adım Tekdüzen Kaynak Tanımlayıcısı (URI) parametrelerini ayarlamaktır. Bu sayede iframe, uygulamayı nerede bulacağını bilir.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. URI aşağıdaki biçimdedir:The URI is in the following form:

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

Not: URI girişinin sayfada daha iyi görünmesi için bir satır sonu ekledik.Note: We added a line break so the URI displays better on the page.

Yapmanız gereken tek şey URI'deki [AppID] bölümüne uygulamanızın kimliğini ('[' & ']' dahil) yerleştirmektir.The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). Bu değeri nasıl elde edebileceğinizi aşağıda göstereceğiz ancak öncelikle URI içinde kullanılabilen parametrelere göz atalım:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID]: /providers/Microsoft.PowerApps/apps/[AppID] biçimindedir.[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. Çalıştırılacak uygulamanın kimliğini sunar.It provides the ID of the app to run.
  • screenColor: Kullanıcılarınıza daha iyi bir uygulama yükleme deneyimi sunmak için kullanılır.screenColor - is used to provide a better app loading experience for your users. Bu parametre RGBA (kırmızı değeri, yeşil değeri, mavi değeri, alfa) biçimindedir ve uygulamanın yüklenmesi sırasında ekranın alacağı rengi denetler.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. En iyi yöntem, uygulamanızın simgesiyle aynı renge ayarlamaktır.It is best to set it to the same color as your app's icon.
  • source: Uygulamayı etkilemez ancak ekleme kaynağını belirten açıklayıcı bir ad eklemenizi öneririz.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Son olarak Param() işlevini kullanarak istediğiniz özel parametreyi ekleyebilirsiniz. Bu değerler uygulamanız tarafından kullanılabilir.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. Bunlar [AppID]&param1=value1 şeklinde URI'nin sonuna eklenir.They are added to the end of the URI, such as [AppID]&param1=value1. Bu parametreler yalnızca uygulama başlatılırken okunur. Bunları değiştirmeniz gerekirse uygulamayı yeniden başlatmanız gerekir.These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

Uygulama kimliğini edinmeGet the App ID

Uygulama kimliğine powerapps.com üzerinden ulaşabilirsiniz. Eklemek istediğiniz uygulama için:The app ID is available on powerapps.com. For the app you want to embed:

  1. powerapps.com üzerindeki Uygulamalar sekmesinde üç nokta simgesine ( . . .In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ) ve ardından Ayrıntılar'a tıklayın veya dokunun.), then Details.

    Uygulama ayrıntılarına gidin

  2. Uygulama Kimliği değerini kopyalayın.Copy the App ID.

    Ayrıntılar sayfasından uygulama kimliğini kopyalama

  3. URI içindeki [AppID] değerinin yerine yapıştırın.Substitute the [AppID] value in the URI. Ürün Siparişi uygulamamızın URI değeri şu şekilde görünür: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
    

Uygulamanızı bir web sitesine eklemeEmbed your app in a website

Uygulamanızı eklemek artık iframe değerini sitenizin (veya Power BI ya da SharePoint gibi iframe destekleyen herhangi bir hizmetin) HTML koduna eklemek kadar kolaydır: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]"/>

Tek yapmanız gereken iframe genişlik ve yükseklik değerlerini belirtip uygulamanızın kimliğini [AppID] yerine yazmaktır.Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

Aşağıdaki görüntüde Ürün Siparişi uygulamasının örnek Contoso web sitesine eklenmiş hali gösterilmektedir.The following image shows the Asset Ordering app embedded in a Contoso sample website.

Eklenmiş uygulamayı içeren Contoso web sitesi

Uygulamanızın kullanıcılarının kimliğini doğrularken aşağıdaki noktaları göz önünde bulundurun:Keep the following points in mind for authenticating users of your app:

  • Web sitenizde Azure Active Directory (AAD) tabanlı kimlik doğrulaması kullanılıyorsa tekrar oturum açılması gerekmez.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Web sitenizde başka bir oturum açma sistemi kullanılıyor veya kimlik doğrulaması yapılmıyorsa kullanıcılarınız iframe içinde bir oturum açma ekranıyla karşılaşır.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. Kullanıcılar oturum açtıktan sonra uygulamayı yazarın paylaştığı süre boyunca çalıştırabilir.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.

Gördüğünüz gibi uygulama eklemek oldukça kolay ve kullanışlıdır.As you can see, embedding apps is simple and powerful. Uygulamaları ekleyerek web siteleri, Power BI panoları, SharePoint sayfaları ve daha fazlası gibi kullanıcılarınızın ve müşterilerinizin iş yaptığı noktalara yerleştirebilirsiniz.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.