Sdílet prostřednictvím

Vložení sestavy Power BI s mobilním rozložením

  • Článek

Mobilní uživatelé můžou zobrazit libovolnou stránku sestavy Power BI v orientaci na šířku. Autoři sestav ale můžou vytvořit další zobrazení, které je optimalizované pro mobilní zařízení a zobrazuje se v orientaci na výšku. Tato možnost návrhu, která je dostupná v Power BI Desktopu i ve službě Power BI, umožňuje autorům vybrat a změnit uspořádání jenom těch vizuálů, které mají smysl pro mobilní uživatele na cestách.

Pokud sestava obsahuje mobilní rozložení vytvořené v Power BI Desktopu nebo službě Power BI, můžete sestavu vložit s tímto rozložením do webové aplikace.

Jak vložit sestavu pomocí mobilního rozložení

Nejdřív musíte vytvořit mobilní rozložení sestavy, podívejte se Optimalizovat sestavy Power BI pro mobilní aplikaci pro vytvoření tohoto rozložení.

Pokud chcete vložit sestavu Power BI do mobilního rozložení sestavy, měli byste v objektu nastavení nastavit layoutType na models.LayoutType.MobilePortrait:

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

Další informace o nastavení sestavy najdete v tématu Konfigurace nastavení sestavy.

Pro mobilní zařízení jsou vyhrazené dva typy rozložení:

  • MobilePortrait – optimalizované pro zobrazení na výšku. Toto je mobilní rozložení, které jste vytvořili pro sestavu.

  • MobileLandscape – optimalizované pro zobrazení na šířku. Toto je běžné rozložení sestavy.

Poznámka

Rozložení sestavy bude určeno vlastností layoutType bez ohledu na skutečnou orientaci zařízení.

Následující kód například ukazuje, jak vložit sestavu s mobilním rozložením.

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

Chcete-li aktualizovat rozložení sestavy při již načtené sestavě, použijte metodu report.updateSettings. Další informace najdete v tématu Aktualizace nastavení sestavy za běhu.

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

report.updateSettings(newSettings);

Kontrola, jestli stránka sestavy obsahuje mobilní rozložení

Třída stránky klienta Power BI definuje metodu takto:

hasLayout(layoutType: any): Promise<boolean>

Metoda hasLayout vrátí logickou hodnotu, pokud má stránka zadaný typ rozložení.

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

Před vykreslením sestavy můžete použít fázované vkládání s hasLayout, abyste zkontrolovali, jestli má stránka mobilní rozložení.

Události potáhnutí prstem

Při vkládání sestavy do mobilního rozložení můžete naslouchat událostem potáhnutí prstem a spustit vlastní kód ve webové aplikaci. Existují dvě události potáhnutí prstem, swipeStart a swipeEnd oba vrací následující formát:

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

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

Událost swipeEnd můžete například použít ke zjištění levého potáhnutí prstem:

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

Další informace o zpracování událostí naleznete v tématu Zpracování událostí.

Optimalizace aplikace s využitím vlastních rozložení

Pomocí funkce vlastního rozložení můžete také vytvořit přizpůsobená rozložení optimalizovaná pro různé mobilní nebo tabletové obrazovky.

Důležité informace a omezení

  • Po počátečním načtení sestavy se změna na mobilní rozložení sestavy podporuje pouze v případě, že je mobilní rozložení (na výšku nebo na šířku) nastavené na počáteční objekt konfigurace pro vložení. V opačném případě musíte nejprve zavolat powerbi.reset(HTMLElement) odebrat prvek iframe. Pak musíte volat powerbi.embed(...) pomocí stejného kontejneru s nastavením mobilního rozložení definovaného u vloženého objektu konfigurace.

  • Pokud se pokusíte vložit stránku sestavy s rozložením MobilePortrait a stránka nemá mobilní rozložení, stránka se načte s rozložením MobileLandscape.

  • Pokud chcete uživatelům umožnit navigaci mezi stránkami při používání mobilních rozložení, můžete použít report.setPage a implementovat vlastní navigaci. Další informace naleznete v tématu Navigace na stránce.

  • Výše uvedené konfigurace odkazují na vložení sestavy Power BI do mobilního zobrazení.
    Vložení řídicího panelu lze nakonfigurovat pro mobilní rozložení s konfigurací pageView: pageView: 'oneColumn'

Související obsah