Pohjaan perustuvien sovellusten integroiminen verkkosivustoihin ja muihin palveluihinIntegrate canvas apps into websites and other services

Rakentamasi sovellukset ovat usein hyödyllisiä, kun ne ovat käytettävissä, kun käyttäjät tekevät työtään.The apps that you build are often most useful when they're available right where people do their work. Upottamalla pohjaan sovelluksia iframe-muodossa voit integroida kyseiset sovellukset verkko sivustoihin ja muihin palveluihin, kuten Power BI tai SharePointiin.By embedding canvas apps in an iframe, you can integrate those apps into websites and other services, such as Power BI or SharePoint.

Tässä ohjeaiheessa näytämme, miten määritetään parametrit sovelluksen upottamista varten. Sen jälkeen upotamme verkkosivulle resurssien järjestelysovelluksemme.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.

Power BI -koontinäyttö, joka sisältää upotetun sovelluksen

Ota huomioon seuraavat rajoitukset:Keep the following restrictions in mind:

  • Vain samassa vuokra ajassa olevat Power apps-käyttäjät voivat käyttää upotettua sovellusta.Only Power Apps users in the same tenant can access the embedded app.
  • Jos haluat käyttää Power Appsia Internet Explorer 11: n avulla, sinun on poistettava yhteensopivuus näkymä käytöstä.To access Power Apps using Internet Explorer 11, you must turn off Compatibility View.

Voit myös integroida Canvas-sovelluksia SharePoint Onlineen ilman iframe-toimintoa.You can also integrate canvas apps into SharePoint Online without using an iframe. Lisä tietoja: Käytä Power apps-verkko-osaa.More information: Use the Power Apps web part.

Sovelluksen URI-parametrien määrittäminenSet URI parameters for your app

Jos haluat upottaa sovelluksen, ensimmäinen vaihe on määrittää parametrit Uniform Resource Identifierille (URI) niin, että iframe-kehys tietää, mistä sovellus löytyy.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 on seuraavassa muodossa:The URI is in the following form:

https://apps.powerapps.com/play/[AppID]?source=iframe

Tärkeä

Elokuun 2019 alkaen URI-muoto on muuttunut https://web.powerapps.com/webplayer https://apps.powerapps.com/play.As of August 2019, the URI format has changed from https://web.powerapps.com/webplayer to https://apps.powerapps.com/play. Päivitä upotettuja iframe-muotoja käyttämään uutta URI-muotoa.Please update any embedded iframes to use the new URI format. Viitta ukset edelliseen muotoiluun ohjataan uuteen URI-osoitteeseen yhteensopivuuden varmistamiseksi.References to the previous format will be redirected to the new URI to ensure compatibility.

Edellinen muoto:Previous format:

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

Sinun tarvitsee ainoastaan korvata sovelluksesi tunnus URI:ssä syötteellä [sovellustunnus] (mukaan lukien sulkeet ”[” ja ”]”).The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). Näytämme pian, miten saat tämän arvon, mutta tässä on ensin kaikki URI:tä varten tarvittavat parametrit:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [AppID] – se antaa suoritettavana olevan sovelluksen tunnuksen.[appID] - It provides the ID of the app to run.
  • tenantid – on valinnainen parametri, joka tukee vieraan käyttöä ja määrittää, mistä vuokraajasta sovellus avataan.tenantid - is an optional parameter to support guest access and determines which tenant to open the app from.
  • screenColor – Tarjoaa käyttäjille paremman sovelluksen lataamiskokemuksen.screenColor - is used to provide a better app loading experience for your users. Tämä parametri on muotoa RGBA (punainen arvo, vihreä arvo, sininen arvo, alfa) ja se määrää näytön värin sovelluksen latautumisen aikana.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. Se kannattaa määrittää sovelluksesi kuvakkeen väriseksi.It is best to set it to the same color as your app's icon.
  • source – Ei vaikuta sovellukseen, mutta suosittelemme lisäämään upotuksen lähteeseen viittaavan kuvaavan nimen.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Lopuksi voit lisätä mitä tahansa mukautettuja parametreja käyttämällä Param()-funktiota, ja sovellus voi käyttää näitä arvoja.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. Ne lisätään URI:n loppuun, kuten [AppID]?source=iframe&param1=value1&param2=value2.They are added to the end of the URI, such as [AppID]?source=iframe&param1=value1&param2=value2. Nämä parametrit luetaan vain sovelluksen käynnistämisen yhteydessä.These parameters are read only during launch of the app. Jos sinun on muutettava niitä, sinun on käynnistettävä sovellus uudelleen.If you need to change them, you must relaunch the app. Huomioi, että vain ensimmäisellä kohteen [AppID] jälkeen tulee olla?. sen jälkeen käytä "&" tässä kuvatulla tavalla.Note that only the first item after [appid] should have a "?"; after that use the "&" as illustrated here.

Sovellustunnuksen hankkiminenGet the App ID

Sovellustunnus on saatavilla powerapps.com-sivustolla.The app ID is available on powerapps.com. Sovellukselle, jonka haluat upottaa:For the app you want to embed:

  1. Napsauta tai napauta powerapps.com-sivuston Sovellukset-välilehdessä kolmea pistettä ( ...In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ) ja sen jälkeen kohtaa Tiedot.), then Details.

    Siirry sovelluksen tietoihin

  2. Kopioi Sovellustunnus.Copy the App ID.

    Kopioi sovellustunnus tiedoista

  3. Korvaa arvo [AppID] URI:ssä.Substitute the [AppID] value in the URI. Resurssien järjestelysovelluksemme URI näyttää tältä:For our Asset Ordering app, the URI looks like this:

    https://apps.powerapps.com/play/76897698-91a8-b2de-756e-fe2774f114f2?source=iframe
    

Sovelluksen upottaminen sivustoonEmbed your app in a website

Sovelluksen upottaminen on nyt yhtä helppoa kuin iframe-kehyksen lisääminen sivustosi HTML-koodiin (tai muuhun palveluun, joka tukee iframe-kehyksiä, kuten Power BI tai 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://apps.powerapps.com/play/[AppID]?source=website&screenColor=rgba(165,34,55,1)" allow="geolocation; microphone; camera"/>

Määritä arvot iframe-kehyksen leveydelle ja korkeudelle ja korvaa sovelluksesi tunnus kohteella [AppID].Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

Huomautus

Sisällytä allow="geolocation; microphone; camera" iframe-kehyksen HTML-koodiin, jotta sovelluksesi voi käyttää näitä ominaisuuksia Google Chromessa.Include allow="geolocation; microphone; camera" in your iframe HTML code to allow your apps to use these capabilities on Google Chrome.

Seuraavassa kuvassa näkyy resurssien järjestelysovellus upotettuna Contoson esimerkkisivustolle.The following image shows the Asset Ordering app embedded in a Contoso sample website.

Upotetun sovelluksen sisältävä Contoson verkkosivusto

Ota sovelluksen käyttäjien todentamisessa huomioon seuraavat asiat:Keep the following points in mind for authenticating users of your app:

  • Jos sivustosi käyttää Azure Active Directory (AAD) -pohjaista todennusta, muuta kirjautumista ei vaadita.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Jos verkkosivusi käyttää mitä tahansa muuta kirjautumismenetelmää tai siinä ei käytetä tunnistautumista, käyttäjäsi näkevät kirjautumiskehotteen iframe-kehyksessä.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. Sisäänkirjauduttuaan he voivat käyttää sovellusta, jos sovelluksen laatija on jakanut sen heidän kanssaan.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.

Kuten näet, sovellusten upottaminen on yksinkertaista ja tehokasta.As you can see, embedding apps is simple and powerful. Upottamisen avulla voit tuoda sovelluksia juuri sinne, missä sinä ja asiakkaasi työskentelevät: Power BI -koontinäyttöihin, SharePoint-sivuille ja moniin muihin kohteisiin.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.