Udostępnij za pośrednictwem

Osadzanie raportu usługi Power BI z układem dla urządzeń przenośnych

  • Artykuł

Użytkownicy mobilni mogą wyświetlać dowolną stronę raportu usługi Power BI w orientacji poziomej. Autorzy raportów mogą jednak utworzyć dodatkowy widok zoptymalizowany pod kątem urządzeń przenośnych i wyświetlać go w orientacji pionowej. Ta opcja projektowania, która jest dostępna zarówno w programie Power BI Desktop, jak i w usłudze Power BI, umożliwia autorom wybieranie i zmienianie kolejności tylko tych wizualizacji, które mają sens dla użytkowników mobilnych w podróży.

Jeśli raport ma układ mobilny utworzony w programie Power BI Desktop lub usłudze Power BI, możesz osadzić raport z tym układem w aplikacji internetowej.

Jak osadzić raport przy użyciu układu mobilnego

Najpierw musisz utworzyć układ mobilny dla raportu, zapoznaj się z Optymalizowanie raportów usługi Power BI dla aplikacji mobilnej w celu utworzenia tego układu.

Aby osadzić raport usługi Power BI w układzie mobilnym raportu, należy ustawić layoutType na models.LayoutType.MobilePortrait w obiekcie ustawień:

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

Aby uzyskać więcej informacji na temat ustawień raportu, zobacz Konfigurowanie ustawień raportu.

Istnieją dwa typy układów przeznaczone dla urządzeń przenośnych:

  • MobilePortrait — zoptymalizowany pod kątem widoku pionowego. Jest to układ mobilny utworzony dla raportu.

  • MobileLandscape — zoptymalizowana pod kątem widoku poziomego. Jest to zwykły układ raportu.

Nuta

Układ raportu będzie określany przez właściwość layoutType niezależnie od rzeczywistej orientacji urządzenia.

Na przykład poniższy kod pokazuje, jak osadzić raport za pomocą układu mobilnego.

// 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
    }
};

Aby zaktualizować układ raportu, gdy raport jest już załadowany, użyj metody report.updateSettings. Aby uzyskać więcej informacji, zobacz Aktualizowanie ustawień raportu w czasie wykonywania.

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

report.updateSettings(newSettings);

Sprawdzanie, czy strona raportu ma układ mobilny

Klasa Page klienta usługi Power BI definiuje metodę jako:

hasLayout(layoutType: any): Promise<boolean>

Metoda hasLayout zwróci wartość logiczną, jeśli strona ma określony typ układu.

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

Możesz użyć osadzania etapowego z hasLayout, aby sprawdzić, czy strona ma układ mobilny przed renderowaniem raportu.

Szybko przesuń zdarzenia

Podczas osadzania raportu w układzie mobilnym można nasłuchiwać zdarzeń przesunięcia i uruchamiać niestandardowy kod w aplikacji internetowej. Istnieją dwa zdarzenia przesunięcia, swipeStart i swipeEnd oba zwracają następujący format:

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

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

Możesz na przykład użyć zdarzenia swipeEnd, aby wykryć lewe przesunięcie:

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

Aby uzyskać więcej informacji na temat obsługi zdarzeń, zobacz Jak obsługiwać zdarzenia.

Optymalizowanie aplikacji przy użyciu układów niestandardowych

Możesz również użyć funkcji niestandardowego układu, aby utworzyć dostosowane układy zoptymalizowane pod kątem różnych urządzeń przenośnych lub ekranów tabletów.

Zagadnienia i ograniczenia

  • Po początkowym załadowaniu raportu zmiana układu mobilnego na raport jest obsługiwana tylko wtedy, gdy układ mobilny (pionowy/poziomy) został ustawiony na początkowy obiekt konfiguracji osadzania. W przeciwnym razie należy najpierw wywołać powerbi.reset(HTMLElement), aby usunąć element iframe. Następnie należy wywołać powerbi.embed(...) przy użyciu tego samego kontenera z ustawieniem układu mobilnego zdefiniowanym w osadzonym obiekcie konfiguracji.

  • Jeśli spróbujesz osadzić stronę raportu z układem MobilePortrait, a strona nie ma układu mobilnego, strona zostanie załadowana z układem MobileLandscape.

  • Aby umożliwić użytkownikom nawigowanie między stronami podczas korzystania z układów mobilnych, możesz użyć report.setPage i zaimplementować własną nawigację. Aby uzyskać więcej informacji, zobacz Nawigacja po stronie.

  • Powyższe konfiguracje odnoszą się do osadzania raportu usługi Power BI w widoku dla urządzeń przenośnych.
    Osadzanie pulpitu nawigacyjnego można skonfigurować do układu mobilnego przy użyciu konfiguracji pageView: pageView: 'oneColumn'

Powiązana zawartość