Freigeben über

Einbetten eines Power BI-Berichts mit mobilem Layout

  • Artikel

Mobile Benutzer können jede Power BI-Berichtsseite im Querformat anzeigen. Berichtsautoren können jedoch eine zusätzliche Ansicht erstellen, die für mobile Geräte optimiert ist und im Hochformat angezeigt wird. Mit dieser Entwurfsoption, die sowohl in Power BI Desktop als auch im Power BI-Dienst verfügbar ist, können Autoren nur die visuellen Elemente auswählen und neu anordnen, die für mobile Benutzer unterwegs sinnvoll sind.

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

So betten Sie einen Bericht mithilfe des mobilen Layouts ein

Zuerst müssen Sie ein mobiles Layout für Ihren Bericht erstellen, lesen Sie Optimieren von Power BI-Berichten für die mobile App zum Erstellen dieses Layouts.

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

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

Weitere Informationen zu Berichtseinstellungen finden Sie unter Konfigurieren von Berichtseinstellungen.

Es gibt zwei Layouttypen für mobile Geräte:

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

  • MobileLandscape – Optimiert für querformatige Ansicht. Dies ist das normale Layout Ihres Berichts.

Anmerkung

Das Berichtslayout wird unabhängig von der tatsächlichen Ausrichtung des Geräts durch die layoutType-Eigenschaft 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
    }
};

Um das Berichtslayout zu aktualisieren, wenn der Bericht bereits geladen wurde, verwenden Sie die report.updateSettings-Methode. Weitere Informationen finden Sie unter Aktualisieren der 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 phasenweise Einbettung mit hasLayout verwenden, um zu überprüfen, ob die Seite über ein mobiles Layout verfügt, bevor Sie den Bericht rendern.

Wischereignisse

Wenn Sie einen Bericht in ein mobiles Layout einbetten, können Sie die Wischereignisse überwachen und einen benutzerdefinierten Code in Ihrer Webanwendung ausführen. Es gibt zwei Wischereignisse, swipeStart und swipeEnd beide das folgende Format zurückgeben:

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:For example, you can use the swipeEnd event to detect a left swipe:

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 das benutzerdefinierte Layout- Feature verwenden, um ein angepasstes Layout zu erstellen, das für verschiedene Mobile oder Tablet-Bildschirme optimiert ist.

Überlegungen und Einschränkungen

  • Nach dem anfänglichen Laden des Berichts wird das Ändern des mobilen Berichtslayouts nur unterstützt, wenn das mobile Layout (Hoch-/Querformat) in das anfängliche Einbettungskonfigurationsobjekt festgelegt wurde. Andernfalls müssen Sie zuerst powerbi.reset(HTMLElement) aufrufen, um den iframe zu entfernen. Anschließend müssen Sie powerbi.embed(...) mithilfe desselben Containers mit der für das eingebetteten Konfigurationsobjekt definierten einstellung für das mobile Layout aufrufen.

  • Wenn Sie versuchen, eine Berichtsseite mit dem MobilePortrait Layout einzubetten und die Seite nicht über ein mobiles Layout verfügt, wird die Seite mit dem MobileLandscape Layout geladen.

  • Damit Ihre Benutzer während der Verwendung mobiler Layouts zwischen Seiten navigieren können, können Sie report.setPage verwenden und ihre eigene Navigation 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 auf mobiles Layout konfiguriert werden: pageView: 'oneColumn'

Verwandte Inhalte