Einbetten eines Power BI-Berichts mit mobilem Layout

  • Artikel

Benutzer von Mobilgeräten können alle Power BI-Berichtsseiten im Querformat anzeigen. Berichtsautoren können jedoch eine zusätzliche Ansicht erstellen, die für mobile Geräte optimiert ist und die Berichte im Hochformat anzeigt. Diese Entwurfsoption, die sowohl in Power BI Desktop als auch im Power BI-Dienst verfügbar ist, ermöglicht es Autoren, nur diejenigen Visuals auszuwählen und neu anzuordnen, die für mobile Benutzer unterwegs sinnvoll sind.

Wenn Ihr Bericht ein mobiles Layout aufweist, das in Power BI Desktop oder Power BI-Dienst erstellt wurde, können Sie den Bericht mit diesem Layout in Ihre Webanwendung einbetten.

Einbetten eines Berichts mithilfe des mobilen Layouts

Zunächst müssen Sie ein mobiles Layout für Ihren Bericht erstellen. Lesen Sie zum Erstellen dieses Layouts power BI-Berichte für die mobile App optimieren .

Um einen Power BI-Bericht in das mobile Layout des Berichts einzubetten, sollten Sie im Einstellungsobjekt auf layoutTypemodels.LayoutType.MobilePortrait festlegen:

let embedConfig = {
    ...
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

Weitere Informationen zu Berichtseinstellungen finden Sie unter Konfigurieren von Berichtseinstellungen.

Für mobile Geräte gibt es zwei Layouttypen:

  • MobilePortrait – Optimiert für die Hochformatansicht. Dies ist das mobile Layout, das Sie für Ihren Bericht erstellt haben.

  • MobileLandscape – Optimiert für die Querformatansicht. Dies ist das reguläre Layout Ihres Berichts.

Hinweis

Das Berichtslayout wird von der layoutType -Eigenschaft unabhängig von der tatsächlichen Ausrichtung des Geräts bestimmt.

Der folgende Code zeigt beispielsweise, wie der Bericht mit einem mobilen Layout eingebettet wird.

// Get models. models contains enums that can be used.
var models = window['powerbi-client'].models;

var embedConfiguration = {
    type: 'report',
    id: reportId,
    embedUrl: embedUrl,
    tokenType: tokenType,
    accessToken: accessToken,
    settings: {
        layoutType: models.LayoutType.MobilePortrait
    }
};

Verwenden Sie report.updateSettings die -Methode, um das Berichtslayout zu aktualisieren, wenn der Bericht bereits geladen ist. Weitere Informationen finden Sie unter Aktualisieren von Berichtseinstellungen zur Laufzeit.

const newSettings = {
    layoutType: models.LayoutType.MobileLandscape
};

report.updateSettings(newSettings);

Überprüfen, ob eine Berichtsseite ein mobiles Layout aufweist

Die Power BI-Client page-Klasse definiert die hasLayout -Methode wie:

hasLayout(layoutType: any): Promise<boolean>

Die hasLayout -Methode gibt einen booleschen Wert zurück, wenn die Seite den angegebenen Layouttyp aufweist.

let pages = await report.getPages();
let mobileLayout = pages[0].hasLayout(models.LayoutType.MobilePortrait);

Sie können die phasenweise Einbettung mit hasLayout verwenden, um zu überprüfen, ob die Seite über ein mobiles Layout verfügt, bevor Sie den Bericht rendern.

Wischen von Ereignissen

Wenn Sie einen Bericht in ein mobiles Layout einbetten, können Sie die Wischereignisse abhören und einen benutzerdefinierten Code für Ihre Webanwendung ausführen. Es gibt zwei Wischereignisse, swipeStart und swipeEnd beide geben das folgende Format zurück:

interface ISwipeEvent {
  currentPosition: IPosition;
  startPosition: IPosition;
}

interface IPosition {
  x: number;
  y: number;
}

Sie können z. B. das swipeEnd -Ereignis verwenden, um eine Wischbewegung nach links zu erkennen:

report.on("swipeEnd", function(event) {
    const swipeEndEvent = event.detail.swipeEvent;
    if (swipeEndEvent.currentPosition.x < swipeEndEvent.startPosition.x) {
        console.log("Swipe left detected");
    }
});

Weitere Informationen zum Behandeln von Ereignissen finden Sie unter Behandeln von Ereignissen.

Optimieren Ihrer App mit benutzerdefinierten Layouts

Sie können auch die benutzerdefinierte Layoutfunktion verwenden, um benutzerdefinierte Layouts zu erstellen, die für verschiedene Mobile- oder Tablet-Bildschirme optimiert sind.

Einschränkungen

  • Nach dem anfänglichen Laden des Berichts wird der Wechsel in das mobile Berichtslayout nur unterstützt, wenn das mobile Layout (Hoch-/Querformat) im anfänglichen Konfigurationsobjekt für die Einbettung festgelegt wurde. Andernfalls müssen Sie zuerst aufrufen powerbi.reset(HTMLElement) , um den iframe zu entfernen. Anschließend müssen Sie mit demselben Container aufrufen powerbi.embed(...) , in dem die mobile Layouteinstellung für das eingebettete Konfigurationsobjekt definiert ist.

  • Wenn Sie versuchen, eine Berichtsseite mit dem MobilePortrait Layout einzubetten und die Seite kein mobiles Layout aufweist, wird die Seite mit dem MobileLandscape Layout geladen.

  • Damit Ihre Benutzer zwischen Seiten navigieren können, während Sie mobile Layouts verwenden, können Sie Ihre eigene Navigation verwenden report.setPage und implementieren. Weitere Informationen finden Sie unter Seitennavigation.

  • Die oben genannten Konfigurationen beziehen sich auf das Einbetten eines Power BI-Berichts in die mobile Ansicht.
    Die Dashboardeinbettung kann mit der pageView-Konfiguration für ein mobiles Layout konfiguriert werden: pageView: 'oneColumn'

Nächste Schritte