Personalizzare la presentazione delle informazioni dettagliate principali
La presentazione Personalizza informazioni dettagliate principali nel playground di analisi incorporata di Power BI (anteprima) usa l'API di layout personalizzato per consentire agli utenti di selezionare le visualizzazioni e i layout da visualizzare durante la sessione di visualizzazione dei report.
I layout di report personalizzati incorporati di Power BI controllano le dimensioni, la posizione e la visibilità degli oggetti visivi in una pagina del report. È possibile 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.
Puoi anche usare layout personalizzati per ridimensionare gli oggetti visivi quando cambiano le dimensioni della finestra o per presentare layout diversi per schermi desktop, tablet o per dispositivi mobili.
Esperienza di presentazione del layout personalizzato
Nella presentazione Personalizza informazioni dettagliate principali , 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 possono selezionare il pulsante Scegli oggetti visivi . Viene visualizzata la casella di riepilogo a discesa Scegli oggetti visivi con tutti e nove gli oggetti visivi disponibili selezionati.
Gli utenti possono deselezionare le caselle di controllo accanto agli oggetti visivi a cui non sono interessati. Solo gli oggetti visivi selezionati vengono visualizzati nel report per il resto della sessione di visualizzazione.
Se si seleziona di nuovo Scegli oggetti visivi , la casella di riepilogo a discesa viene chiusa. Gli utenti possono selezionare di nuovo Scegli oggetti visivi per selezionare oggetti visivi diversi o tutti e nove gli oggetti visivi.
Selezionare un layout
Gli utenti possono anche selezionare Scegli 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.
Interazione tra oggetti visivi e layout
I controlli Choose visuals e Choose layout 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.
Codice presentazione layout personalizzato
Il codice per l'implementazione dell'applicazione showcase si trova nel repository GitHub PowerBI-Embedded-Showcases .
Il codice HTML dell'applicazione compila il contenitore di report, il pulsante Scegli oggetti visivi e l'elenco a discesa e il pulsante Scegli layout e riquadro 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 settings proprietà della configurazione di incorporamento del report. Per abilitare layout personalizzati, il report JavaScript usa la layoutType proprietà 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.