Condividi tramite

Incorporamento di un report di Power BI con layout per dispositivi mobili

  • Articolo

Gli utenti per dispositivi mobili possono visualizzare qualsiasi pagina del report di Power BI con orientamento orizzontale. Tuttavia, gli autori di report possono creare una visualizzazione aggiuntiva ottimizzata per i dispositivi mobili e visualizzare in orientamento verticale. Questa opzione di progettazione, disponibile sia in Power BI Desktop che nel servizio Power BI, consente agli autori di selezionare e ridisporre solo gli oggetti visivi che hanno senso per gli utenti per dispositivi mobili in viaggio.

Se il report ha un layout per dispositivi mobili creato in Power BI Desktop o nel servizio Power BI, è possibile incorporare il report con questo layout nell'applicazione Web.

Come incorporare un report usando il layout per dispositivi mobili

Prima di tutto è necessario creare un layout per dispositivi mobili per il report, vedere Ottimizzare i report di Power BI per l'app per dispositivi mobili per la creazione di questo layout.

Per incorporare un report di Power BI nel layout per dispositivi mobili del report, è necessario impostare il layoutType su models.LayoutType.MobilePortrait nell'oggetto impostazioni:

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

Per altre informazioni sulle impostazioni del report, vedere Configurare le impostazioni del report.

Esistono due tipi di layout dedicati ai dispositivi mobili:

  • MobilePortrait - Ottimizzato per la visualizzazione verticale. Si tratta del layout per dispositivi mobili creato per il report.

  • MobileLandscape - Ottimizzato per la visualizzazione orizzontale. Si tratta del layout regolare del report.

Nota

Il layout del report verrà determinato dalla proprietà layoutType indipendentemente dall'orientamento effettivo del dispositivo.

Ad esempio, il codice seguente illustra come incorporare il report con un layout per dispositivi mobili.

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

Per aggiornare il layout del report quando il report è già caricato, utilizzare il metodo report.updateSettings. Per altre informazioni, vedere Aggiornare le impostazioni del report in fase di esecuzione.

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

report.updateSettings(newSettings);

Controllare se una pagina del report ha un layout per dispositivi mobili

La classe Page client di Power BI definisce il metodo come:

hasLayout(layoutType: any): Promise<boolean>

Il metodo hasLayout restituirà un valore booleano se la pagina ha il tipo di layout specificato.

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

È possibile usare di incorporamento in più fasi con hasLayout per verificare se la pagina ha layout per dispositivi mobili prima di eseguire il rendering del report.

Eventi di scorrimento rapido

Quando si incorpora un report nel layout per dispositivi mobili, è possibile ascoltare gli eventi di scorrimento rapido ed eseguire un codice personalizzato nell'applicazione Web. Esistono due eventi di scorrimento rapido, swipeStart e swipeEnd entrambi restituiscono il formato seguente:

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

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

Ad esempio, è possibile usare l'evento swipeEnd per rilevare uno scorrimento rapido sinistro:

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

Per altre informazioni sulla gestione degli eventi, vedere Come gestire gli eventi.

Ottimizzare l'app con layout personalizzati

È anche possibile usare la funzionalità layout personalizzato per creare layout personalizzati ottimizzati per dispositivi mobili o schermi tablet diversi.

Considerazioni e limitazioni

  • Dopo il caricamento iniziale del report, la modifica al layout per dispositivi mobili del report è supportata solo se il layout per dispositivi mobili (verticale/orizzontale) è stato impostato nell'oggetto di configurazione di incorporamento iniziale. In caso contrario, è necessario chiamare prima powerbi.reset(HTMLElement) per rimuovere l'iframe. È quindi necessario chiamare powerbi.embed(...) usando lo stesso contenitore con l'impostazione del layout per dispositivi mobili definita nell'oggetto di configurazione incorporato.

  • Se si tenta di incorporare una pagina del report con il layout MobilePortrait e la pagina non dispone di un layout per dispositivi mobili, la pagina verrà caricata con il layout MobileLandscape.

  • Per consentire agli utenti di spostarsi tra le pagine durante l'uso di layout per dispositivi mobili, è possibile usare report.setPage e implementare la navigazione personalizzata. Per altre informazioni, vedere navigazione nella pagina.

  • Le configurazioni precedenti fanno riferimento all'incorporamento di un report di Power BI nella visualizzazione per dispositivi mobili.
    L'incorporamento del dashboard può essere configurato per il layout per dispositivi mobili con la configurazione pageView: pageView: 'oneColumn'

Contenuto correlato