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

Oluşturduğunuz uygulamalar genellikle, sağ çalışanların iş yaptığı yerlerde kullanılabildiğinde en kullanışlı.The apps that you build are often most useful when they're available right where people do their work. Tuval uygulamaları bir iframe içine ekleyerek Web siteleri ve Power BI veya SharePoint gibi diğer hizmetler bu uygulamaları tümleştirebilirsiniz.By embedding canvas apps in an iframe, 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'e Internet Explorer 11 üzerinden erişmek için Uyumluluk Görünümü'nü devre dışı bırakmanız gerekir.To access PowerApps using Internet Explorer 11, you must turn off Compatibility View.

Ayrıca tuval uygulamaları SharePoint Online iframe kullanmadan tümleştirebilirsiniz.You can also integrate canvas apps into SharePoint Online without using an iframe. Daha fazla bilgi: PowerApps web bölümünü kullanmak.More information: Use the PowerApps web part.

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'nin sayfada daha iyi görünmesi için bir satır sonu ekledik.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.The app ID is available on powerapps.com. Eklemek istediğiniz uygulama için: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?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?source=website&screenColor=rgba(165,34,55,1)&appId=/providers/Microsoft.PowerApps/apps/[AppID]" allow="geolocation; microphone; camera"/>

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].

Not

Uygulamalarınızın bu becerileri Google Chrome’da kullanabilmesi için iframe HTML kodunuza allow="geolocation; microphone; camera" dahil edin.Include allow="geolocation; microphone; camera" in your iframe HTML code to allow your apps to use these capabilities on Google Chrome.

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.