您建置的應用程式放在人們執行工作的地方供其使用通常會最實用。 PowerApps 可讓您在 iframe 中內嵌應用程式,以便您將這些應用程式整合至網站和 Power BI 儀表板。

本主題中,我們將說明如何設定應用程式內嵌的參數,然後我們會將我們的「資產訂購」應用程式內嵌到網站及儀表板。

內嵌應用程式的 Power BI 儀表板

附註︰同有相同租用戶中的 PowerApps 使用者可以存取內嵌的應用程式。

您也可以將 PowerApps 整合到 SharePoint Online (不使用 iframe)。 如需詳細資訊,請參閱使用 PowerApps 從 SharePoint 內產生應用程式

設定應用程式的 URI 參數

如果您想要內嵌您的應用程式,第一個步驟是要設定統一資源識別項 (URI) 的參數,讓 iframe 知道去何處尋找應用程式。 URI 的形式如下︰

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

附註︰我們加入分行符號,讓頁面上顯示的程式碼更好讀。

您唯一要做的,是將 URI (包括 '[' & ']') 中的 [AppID] 換成您的應用程式識別碼。 稍後會教您如何取得這個值,但現在,先說明 URI 中的所有參數︰

  • [appID] - 為 /providers/Microsoft.PowerApps/apps/[AppID] 格式。 提供要執行之應用程式的識別碼。
  • screenColor - 用來為您的使用者提供更好的應用程式載入體驗。 這個參數是 RGBA 格式 (紅色值、綠色值、藍色值、alpha),控制應用程式載入時的畫面色彩。 最好將它設定為與應用程式圖示相同的色彩。
  • source - 並不會影響應用程式,但建議您加上描述性的名稱來參考內嵌的來源。
  • 最後,您可以使用 Param() 函式 加入任何您想要的自訂參數,而且這些值可以由您的應用程式取用。 要加在 URI 的結尾後,例如 [AppID]&param1=value1。 這些參數只會在應用程式啟動時讀取。如果您需要加以變更,則必須重新啟動應用程式。

取得應用程式識別碼

powerapps.com 上可以找到應用程式識別碼。 針對您想要內嵌的應用程式︰

  1. powerapps.com的 [應用程式] 索引標籤上,按一下或點選省略符號 [...], 然後按一下或點選 [詳細資料]。

    移至應用程式詳細資料

  2. 複製 [應用程式識別碼]。

    複製詳細資料中的應用程式識別碼

  3. 取代 URI 中的 [AppID] 值。 在我們的「資產訂購」應用程式中,URI 看起來像這樣︰

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

在網站中內嵌您的應用程式

現在,內嵌應用程式就和將 iframe 加入網站的 HTML 程式碼中一樣簡單︰

<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]"/>

指定 iframe 的寬度和高度值,將 [AppID] 換成您的應用程式識別碼。

下圖為「資產訂購」應用程式內嵌在 Contoso 範例網站中。

內嵌應用程式的 Contoso 網站

針對驗證您的應用程式使用者,記住下列幾點︰

  • 如果您的網站使用 Azure Active Directory (AAD) 式驗證,不需要再登入。
  • 如果您的網站使用任何其他登入機制或是未通過驗證,您的使用者會在 iframe 上看到登入提示。 他們登入之後,便能夠執行應用程式,前提是應用程式的作者有與他們共用該應用程式。

在 Power BI 儀表板中內嵌您的應用程式

我們認為使用應用程式的最佳位置,通常是在您測量的資料和監視的報告周遭,這一點和我們對度量、動作、自動化的看法一致。

在此範例中,我們建立了 Power BI 儀表板來監視本公司產品的銷售。 我們在此儀表板中持續監控電腦硬體銷售趨勢,並直接在儀表板中用內嵌的應用程式訂購新的硬體存貨。 內嵌應用程式讓我們的庫存專員可以進入一個地方執行其工作,而他們很高興停留在他們慣用的 Power BI 儀表板。

在下圖中,您會看到「資產訂購」應用程式直接內嵌在儀表板中,和銷售數字擺在一起,提供硬體訂購程序的前因後果。

內嵌應用程式的 Power BI 儀表板

若要在 Power BI 儀表板中內嵌應用程式,請遵循下列步驟︰

  1. 建立 URI,如先前所示︰

    https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=powerbi&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    
  2. 將此 URI 加入 iframe。 在此範例中,我們將寬度和高度設定為 98%,避免我們的圖格有捲軸︰

    <iframe width="98%" height="98%" src="https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=powerbi&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2"/>
    
  3. 移至您要內嵌應用程式的 Power BI 儀表板。

  4. 在儀表板的頂端功能表列中,按一下或點選 [新增圖格]。 您可能只會看到加號 (+),取決於空間的限制。

    在 Power BI 儀表板中新增圖格

  5. 按一下或點選 [WEB 內容] 索引標籤,然後按一下或點選 [下一步]。

    在 Power BI 儀表板中新增 Web 內容

  6. 將 iframe 程式碼貼到 [內嵌程式碼] 欄位,然後按一下或點選 [套用]。

    Web 內容的內嵌程式碼

  7. 圖格現在應該會出現在儀表板中,您可以將它移到您想要的地方,就像其他圖格一樣。 如需將圖格新增至儀表板的詳細資訊,請參閱在儀表板中新增影像、文字、影片和其他內容

如您所見,內嵌應用程式既簡單又強大。 內嵌讓您可以將應用程式帶入您和客戶的工作處 – 放在網站和放在 Power BI 儀表板。