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

  • Articolo

Gli utenti di 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, che viene visualizzata con orientamento verticale. Questa opzione di progettazione, disponibile sia in Power BI Desktop sia nel servizio Power BI, consente agli autori di selezionare e ridisporre solo gli oggetti visivi appropriati per gli utenti di dispositivi mobili.

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

Come incorporare un report usando il layout per dispositivi mobili

Per prima cosa è 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 su layoutTypemodels.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 layoutType proprietà 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 report.updateSettings metodo . 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 Pagina client di Power BI definisce il hasLayout metodo come:

hasLayout(layoutType: any): Promise<boolean>

Il hasLayout metodo 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 l'incorporamento in più fasi con hasLayout per verificare se la pagina ha un 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 swipeStart di scorrimento rapido 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 a sinistra:

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à di layout personalizzato per creare layout personalizzati ottimizzati per dispositivi mobili o schermi tablet diversi.

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 iniziale di incorporamento. In caso contrario, è necessario prima chiamare 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 MobilePortrait layout e la pagina non ha un layout per dispositivi mobili, la pagina verrà caricata con il MobileLandscape layout.

  • Per consentire agli utenti di spostarsi tra le pagine usando layout per dispositivi mobili, è possibile usare report.setPage e implementare la navigazione personalizzata. Per altre informazioni, vedere Spostamento tra le pagine.

  • 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'

Passaggi successivi