Die Apps, die Sie erstellen, sind oft dann besonders nützlich, wenn sie für Ihre Arbeitskollegen direkt an Ort und Stelle verfügbar sind. Mithilfe von PowerApps können Sie Apps in einen iframe einbetten, sodass sich diese Apps in Websites und Power BI-Dashboards integrieren lassen.

In diesem Thema zeigen wir das Festlegen von Parametern für die Einbettung von Apps; anschließend betten wir Ihre App zum Bestellen von Geschäftsausstattung in eine Website und ein Dashboard ein.

Power BI-Dashboard mit eingebetteter App

Hinweis: Nur PowerApps-Benutzer im gleichen Mandanten haben Zugriff auf die eingebettete App.

PowerApps lassen sich außerdem (ohne Verwendung eines iframes) in SharePoint Online integrieren. Weitere Informationen finden Sie unter Generieren einer App aus SharePoint mit PowerApps.

Festlegen von URI-Parametern für Ihre App

Wenn Sie über eine einzubettende App verfügen, besteht der erste Schritt im Festlegen von Parametern für den URI (Uniform Resource Identifier), um dem iframe mitzuteilen, wo sich die App befindet. Der URI liegt in der folgenden Form vor:

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

Hinweis: Wir haben einen Zeilenumbruch hinzugefügt, um die Anzeige des URIs auf der Seite zu verbessern.

Sie brauchen nichts weiter zu tun, als die [AppID] im URI durch die ID Ihrer App zu ersetzen. Wir zeigen Ihnen in Kürze, wie Sie an diesen Wert gelangen, aber zunächst folgt hier die Auflistung aller im URI verfügbaren Parameter:

  • appID: liegt im Format /providers/Microsoft.PowerApps/apps/[AppID] vor. Enthält die ID der auszuführenden App.
  • hideNavBar: ein Boolescher Wert (WAHR/FALSCH), der steuert, ob der Dynamics 365-Header für die App sichtbar ist. Wir empfehlen den Wert true, wenn es sich um die einzige App handelt, die Sie in Ihre Website einbetten.
  • screenColor: stellt Ihren Benutzern ein besseres Ladeverhalten bereit. Dieser Parameter liegt im Format RGBA (Rotwert, Grünwert, Blauwert, Alpha) vor und steuert die Bildschirmfarbe während des Ladens der App. Er sollte auf die gleiche Farbe wie das Symbol Ihrer App festgelegt werden.
  • source: ohne Auswirkungen auf die App, wir empfehlen Ihnen jedoch, mit einem beschreibenden Namen auf die Quelle für die Einbettung zu verweisen.
  • Schließlich können Sie mithilfe der Param()-Funktion beliebige benutzerdefinierte Parameter hinzufügen, und diese Werte können von Ihrer App verbraucht werden. Sie werden am Ende des URIs hinzugefügt, wie etwa in [AppID]&param1=value1. Diese Parameter sind während des Startens der App schreibgeschützt; wenn Sie sie ändern müssen, müssen Sie die App erneut starten.

Abrufen der App-ID

Die App-ID ist auf „powerapps.com“ verfügbar. Führen Sie für die einzubettende App folgende Aktionen aus:

  1. Klicken oder tippen Sie in powerapps.com auf der Registerkarte Apps auf die Auslassungspunkte ( . . . ) und dann auf Details.

    Wechseln zu den App-Details

  2. Kopieren Sie die App ID.

    Kopieren der App-ID aus den Detailinformationen

  3. Ersetzen Sie den [AppID]-Wert im URI. Für unsere App zum Bestellen von Geschäftsausstattung sieht der URI wie folgt aus:

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

Einbetten der App in eine Website

Das Einbetten Ihrer App besteht jetzt nur noch im Hinzufügen des iframes zum HTML-Code Ihrer Website:

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

Geben Sie Werte für die Höhe und Breite des iframes an, und ersetzen Sie [AppID] durch die ID Ihrer App.

Auf dem folgenden Bild sehen Sie die App zum Bestellen von Geschäftsausstattung auf einer Contoso-Beispielwebsite eingebettet.

Contoso-Website mit eingebetteter App

Beachten Sie hinsichtlich der Authentifizierung von Benutzern Ihrer App die folgenden Punkte:

  • Wenn Ihre Website AAD-basierte (Azure Active Directory) Authentifizierung verwendet, ist keine zusätzliche Anmeldung erforderlich.
  • Wenn Ihre Website einen anderen Anmeldemechanismus verwendet oder auf Authentifizierung verzichtet, wird Ihren Benutzern eine Anmeldeaufforderung auf dem iframe angezeigt. Nach erfolgter Anmeldung können Ihre Benutzer die App so lange ausführen, wie der Autor der App sie freigegeben hat.

Einbetten Ihrer App in ein Power BI-Dashboard

Ausgehend von unserer Vorstellung von Datenerfassung, Aktion und Automatisierung denken wir, dass der beste Ort für die Verwendung einer App häufig im Kontext der erfassten Daten und überwachten Berichte ist.

In diesem Beispiel haben wir ein Power BI-Dashboard zum Überwachen der Produktumsätze für unser Unternehmen erstellt. Wir verfolgen auf diesem Dashboard Vertriebstrends für Computerhardware nach und bestellen neue Hardwareausstattung direkt aus dem Dashboard in der eingebetteten App. Durch das Einbetten der App können unsere Inventarexperten ihre Arbeit an nur einem einzigen Ort erledigen, und sie freuen sich, dass sie auf dem vertrauten Power BI-Dashboard bleiben können.

Im folgenden Bild sehen Sie die App zum Bestellen von Geschäftsausstattung direkt in das Dashboard eingebettet, zusammen mit den Umsatzzahlen, die Kontext für den Hardware-Bestellvorgang liefern.

Power BI-Dashboard mit eingebetteter App

Führen Sie diese Schritte aus, um eine App in einem Power BI-Dashboard einzubetten:

  1. Erstellen Sie den URI, wie zuvor gezeigt:

    https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=powerbi&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    
  2. Fügen Sie den URI zu einem iframe hinzu. In diesem Fall haben wir Breite und Höhe auf 98 % festgelegt, um die Darstellung von Scrollleisten auf der Kachel zu vermeiden:

    <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. Navigieren Sie zu dem Power BI-Dashboard, auf dem Sie die App einbetten möchten.

  4. Klicken oder tippen Sie auf dem Dashboard in der oberen Menüleiste auf Kachel hinzufügen. Abhängig vom verfügbaren Platz wird möglicherweise nur das Pluszeichen (+) angezeigt.

    „Kachel hinzufügen“ auf dem Power BI-Dashboard

  5. Klicken oder tippen Sie auf WEBINHALT und dann auf Weiter.

    Hinzufügen von Webinhalten zu einem Dashboard

  6. Fügen Sie den iframe-Code in das Feld Einbindungscode ein, und klicken oder tippen Sie dann auf Übernehmen.

    Einbindungscode für Webinhalt

  7. Die Kachel sollte jetzt auf dem Dashboard angezeigt werden, und Sie können sie an die gewünschte Position verschieben, genau so wie andere Kacheln. Weitere Informationen zum Hinzufügen von Kacheln zu einem Dashboard finden Sie unter Hinzufügen von Bildern, Text, Video und weiteren Elementen zu Ihrem Dashboard.

Wie Sie sehen können, ist das Einbetten von Apps ein einfaches und leistungsstarkes Verfahren. Durch Einbetten können Sie Apps direkt an die Orte bringen, an denen Sie und Ihre Kunden arbeiten – auf Websites und Power BI-Dashboards.