Personalizzare la presentazione delle informazioni dettagliate principali

Il Personalizzare le informazioni dettagliate principali presentazione nel playground di analisi incorporata di Power BI (anteprima) usa l'API di layout personalizzata per consentire agli utenti di selezionare le visualizzazioni e i layout da visualizzare durante la sessione di visualizzazione del report.

Power BI embedded layout di report personalizzati controllare le dimensioni, la posizione e la visibilità degli oggetti visivi in una pagina del report. Usare layout personalizzati per presentare visualizzazioni diverse a utenti diversi o per consentire agli utenti di personalizzare le proprie visualizzazioni. I layout personalizzati consentono agli utenti di concentrarsi sulle visualizzazioni e le informazioni più importanti.

È anche possibile usare layout personalizzati per ridimensionare gli oggetti visivi quando le dimensioni della finestra cambiano o per presentare layout diversi per schermi desktop, tablet o dispositivi mobili.

Esperienza di presentazione layout personalizzata

Nella personalizzare le informazioni principali presentazione, un conglomerato immaginario denominato Contoso usa un report incorporato di Power BI per mostrare i dati aziendali agli stakeholder. Il report incorporato viene caricato con tutte e nove le visualizzazioni disponibili visualizzate in un layout a due colonne.

Selezionare gli oggetti visivi

Per scegliere solo gli oggetti visivi da visualizzare, gli utenti del report selezionano il pulsante Scegli oggetti visivi . Viene visualizzata la casella di riepilogo Scegli oggetti visivi, con tutti e nove gli oggetti visivi disponibili selezionati.

Gli utenti possono deselezionare le caselle di controllo accanto agli oggetti visivi che non vogliono visualizzare. Nel report vengono visualizzati solo gli oggetti visivi selezionati per il resto della sessione di visualizzazione.

Screenshot che mostra la finestra di dialogo Scegli oggetti visivi con tre oggetti visivi selezionati e visualizzati.

Selezionando Scegliere oggetti visivi chiude nuovamente la casella di riepilogo a discesa. Gli utenti possono selezionare Scegliere di nuovo gli oggetti visivi per selezionare oggetti visivi diversi o tutti e nove gli oggetti visivi.

Selezionare un layout

Gli utenti possono anche selezionare Scegliere il layout per visualizzare una tavolozza di cinque diverse opzioni di layout di visualizzazione. La selezione di un'opzione di layout applica il layout selezionato e chiude la tavolozza.

Screenshot che mostra la tavolozza del layout con un layout a tre colonne selezionato e applicato.

Interazioni tra oggetti visivi e layout

L'Scegliere gli oggetti visivi e Scegliere il layout controlli nel codice dell'applicazione sono indipendenti, ma interagiscono. Ad esempio, se viene visualizzato un solo oggetto visivo, il layout a una colonna visualizza l'oggetto visivo con dimensioni maggiori rispetto al layout a tre colonne.

Screenshot che mostra un singolo oggetto visivo in un layout a una colonna.

Screenshot che mostra un singolo oggetto visivo in un layout a tre colonne.

Codice presentazione layout personalizzato

Il codice per l'implementazione dell'applicazione showcase si trova nel repository PowerBI-Embedded-Showcases GitHub.

  • L'applicazione codice HTML compila il contenitore di report, Scegliere gli oggetti visivi pulsante e elenco a discesa e Scegliere il layout pulsante e la tavolozza a discesa.

  • Il report JavaScript incorpora il report, calcola e configura gli oggetti di layout personalizzati e implementa i layout personalizzati predefiniti e personalizzati.

Per creare un layout di report personalizzato, passare un oggetto layout personalizzato alla proprietà settings del report incorporare la configurazione. Per abilitare layout personalizzati, il report JavaScript usa la proprietà layoutType con valore models.LayoutType.Custom.

L'oggetto customLayout specifica le dimensioni della pagina dell'area di disegno del report, il ridimensionamento dell'area di disegno e il layout di pagina. I layout di pagina specificano un layout visivo predefinito per il report e i layout visivi per ogni oggetto visivo.

let settings = {
    ...
    layoutType: models.LayoutType.Custom,
    customLayout: {
        pageSize: {
            type: models.PageSizeType.Custom,
            width: reportWidth - 10,
            height: reportHeight - 20
        },
        displayOption: models.DisplayOption.FitToPage,
        pagesLayout: pagesLayout
    }
};

Per visualizzare visualizzazioni e layout selezionati, la presentazione javaScript crea dinamicamente l'oggetto settings e aggiorna la configurazione di incorporamento. Il report viene caricato con gli oggetti visivi selezionati che mostrano e il layout personalizzato implementato.