Temi personalizzati in LuckyTemplates

Per il post di oggi, farò una rapida rassegna delle personalizzazioni che puoi apportare modificando e applicando direttamente un file del tema JSON. Questa non è in realtà una descrizione di ciò che può essere fatto all'interno di LuckyTemplates stesso, ma piuttosto un esempio di ciò che può essere realizzato al di fuori di LuckyTemplates quando si creano temi personalizzati. Puoi guardare il video completo di questo tutorial in fondo a questo blog.

Questo argomento non è destinato agli utenti di report di LuckyTemplates o agli sviluppatori occasionali di LuckyTemplates, ma piuttosto a coloro che hanno familiarità e hanno dimestichezza con la modifica e la creazione diretta di codici JSON.

Per implementare temi personalizzati devi essere a tuo agio con la sintassi e la struttura dei file JSON e anche con gli strumenti dell'ambiente di sviluppo. Userò il codice di Visual Studio per sviluppare file di temi JSON.

Diamo un'occhiata alle personalizzazioni disponibili che sono già incorporate nell'applicazione desktop LuckyTemplates. Innanzitutto, abbiamo bisogno di una tela per mostrare il nostro lavoro. Ho utilizzato il set di dati di pratica LuckyTemplates, che è un semplice set di dati di vendita in cui è possibile creare facilmente elementi visivi. Un file PBIX dimostrativo è una singola pagina di report e le dimensioni personalizzate di 1600 x 900 sono state utilizzate per dare un po' più di spazio rispetto al report standard di 1280 x 720.

Sommario

• Utilizzo del tema predefinito
• Una rapida rassegna delle nozioni di base di JSON per i temi personalizzati
• Modifica dello sfondo per temi personalizzati
• Modifica dello sfondo del testo del titolo
• Aggiunta di ombre agli elementi visivi
• Aggiunta del testo del titolo
• Altre cose da ricordare nei temi personalizzati
• Conclusione

Utilizzo del tema predefinito

Diamo un'occhiata al nostro tema predefinito qui. Se cerchiamo i temi e applichiamo il tema predefinito...

… possiamo vedere che utilizza solo i colori standard blu, arancione e viola.

E se seleziono il tema Testo bianco su sfondo scuro ...

…questo è il tema che vedremo.

Una rapida rassegna delle nozioni di base di JSON per i temi personalizzati

Questa non è sicuramente una recensione completa su come sviluppare un file JSON per LuckyTemplates, ma piuttosto alcuni rapidi commenti sui file JSON.

JSON sta per JavaScript Object Notation ; questo è un formato di testo in chiaro per i file di dati, costituito da oggetti nidificati o blocchi di codice. Ognuno di questi ha la propria raccolta di coppie nome-valore.

I due punti vengono utilizzati per separare le coppie nome-valore. Le parentesi graffe vengono utilizzate per circondare un oggetto. Gli elementi dell'elenco sono separati da virgole e gli elenchi possono essere cancellati. Un elenco può anche essere un array, che in questo caso è racchiuso tra parentesi quadre.

Un file JSON di LuckyTemplates è in genere costituito da tre sezioni principali: name , colors e visuals . La sezione del nome è in realtà l'unica sezione obbligatoria e, come puoi vedere, è qui che inizieremo la nostra indagine oggi.

Applichiamo semplicemente questo file del tema cercando i temi.

Andremo per il tema predefinito. Vedrai che vengono utilizzati i colori predefiniti.

Andiamo alla sezione del blocco di codice e copiamo il set di colori alternativi.

Possiamo incollarlo nel nostro file del tema JSON aggiungendo una virgola dopo il blocco del nome e quindi incollando il codice.

Salveremo il file del tema JSON, torneremo a LuckyTemplates e applicheremo il tema scratch.

Ora possiamo vedere che i colori sono cambiati.

La sezione visiva è di gran lunga la più grande, ed è qui che stiamo facendo il resto del nostro lavoro. Puoi cambiare facilmente il testo, incluso il carattere, la dimensione della famiglia e il colore.

Passiamo al nostro blocco note per copiare il blocco di codice per le nostre classi di testo e font impostati su dimensioni diverse.

Quindi passeremo a Visual Studio Code, aggiungeremo una colonna per separare i codici e quindi incolleremo il codice.

Ancora una volta, salveremo il nostro file del tema. Quindi torneremo a LuckyTemplates e applicheremo i file del tema. Possiamo vedere che ora tutti i testi sono diventati blu.

Una delle cose che possiamo facilmente fare è cambiare il colore del testo. Torniamo nuovamente al file JSON, selezioniamo il colore blu e sostituiamolo con il rosso.

Salviamolo di nuovo, torniamo a LuckyTemplates e importiamo il file del tema JSON ancora una volta. Ora possiamo vedere che tutti i testi sono diventati rossi.

Modifica dello sfondo per temi personalizzati

Ora diamo un'occhiata allo sfondo della pagina e impostiamolo sul secondo colore più scuro nella nostra tavolozza. Andremo su Notepad ++, prenderemo il nostro blocco di codice di sfondo della pagina e lo copieremo.

E poi andremo a Visual Studio Code e incolleremo il codice lì.

Quindi vai su LuckyTemplates e, ancora una volta, applica il tema scratch per vedere il nuovo sfondo.

Modifica dello sfondo del testo del titolo

Completiamo la nostra demo cambiando lo sfondo del testo del titolo con il colore del tema più scuro e il colore del testo con il bianco. Come puoi vedere, non ho capito la sintassi corretta per impostare lo stile della tabella e della matrice tramite il file del tema JSON. Quindi ho utilizzato l'interfaccia per modificare lo stile di entrambi gli elementi visivi in ​​nessuno .

Torniamo a Notepad++ per copiare il blocco di codice JSON per lo sfondo del nostro titolo.

E poi passiamo a Visual Studio Code per incollare il codice lì.

Ancora una volta, salveremo il nostro tema, torneremo a LuckyTemplates e applicheremo il tema ancora una volta.

Aggiunta di ombre agli elementi visivi

Ho anche alcune piccole demo autonome che mostrano alcune opzioni del tema. Ripristiniamo il nostro tema all'opzione predefinita. Se vogliamo aggiungere ombre a tutti i nostri oggetti visivi, possiamo usare la sintassi visualStyles e dropShadow.

Se passiamo a LuckyTemplates e applichiamo quel file del tema, vedrai che tutti i nostri oggetti visivi hanno ombre.

Aggiunta del testo del titolo

Se vogliamo assicurarci che tutti i nostri oggetti visivi abbiano il testo del titolo, possiamo aggiungere del testo del titolo segnaposto usando la sintassi visualStyles, title, show e text in Visual Studio Code.

Se passiamo a LuckyTemplates e applichiamo quel file del tema, noteremo che solo uno dei nostri oggetti visivi è cambiato perché tutti gli altri sono già modificati con i titoli.

Se dobbiamo andare in una nuova pagina, creare una nuova tabella e inserire i canali e le misure che vogliamo, abbiamo il testo del titolo predefinito.

Un'altra cosa che possiamo fare è influenzare il modo in cui le nuove immagini si adattano al loro contenitore. Se reimpostiamo il tema predefinito e inseriamo un'immagine, vedremo che mantiene le sue proporzioni.

Se vogliamo utilizzare un file del tema per impostare il ridimensionamento dell'immagine, possiamo utilizzare la sintassi visualStyles, image, imageScaling e image ScalingType.

Se passiamo a LuckyTemplates e aggiungiamo quel tema, vedremo che le proporzioni possono ora essere modificate per l'oggetto visivo esistente.

E se aggiungiamo nuovi elementi visivi, possiamo vedere di nuovo che il ridimensionamento è ora impostato per adattarsi.

Altre cose da ricordare nei temi personalizzati

L'impostazione della trasparenza dello sfondo della pagina nel file JSON non sembra essere presa in considerazione, quindi ho utilizzato l'interfaccia per impostare il livello di trasparenza dello sfondo della pagina su 0 prima dell'inizio della demo.

Anche le impostazioni per lo stile della tabella e della matrice non sembrano essere prese in considerazione. Quindi ho usato l'interfaccia per impostare lo stile della tabella e della matrice su nessuno.

L'ordine sembra essere importante nei file del tema JSON, quindi se scopri che una particolare impostazione non viene presa in considerazione, prova a riordinare l'impostazione di interesse più in alto o prima nel codice.

Gli oggetti visivi esistenti potrebbero non rispondere completamente ai file del tema, soprattutto se sono già state applicate impostazioni di formato.

Creazione di temi, loghi aziendali, icone e sfondi
Come selezionare il tema dei colori di LuckyTemplates per i report
Come creare una tavolozza dei colori di LuckyTemplates accattivante

Conclusione

Se sei un neofita relativo nella codifica JSON, specialmente in LuckyTemplates, prendi tutti gli esempi che ho usato con le pinze. Mi aspetto che coloro che hanno più esperienza e familiarità con la codifica dei temi JSON all'interno di LuckyTemplates producano un codice molto migliore e più leggibile.

Infine, volevo solo condividere alcune delle mie esperienze iniziali e mostrare alcune delle personalizzazioni che ho trovato nei temi personalizzati. È disponibile una moltitudine di impostazioni per i temi JSON di LuckyTemplates e coloro che sono disposti a investire il tempo e gli sforzi per ricercare le risorse online disponibili possono sviluppare in modo iterativo file di temi utili.

Un ottimo punto di partenza è la scheda delle proprietà del generatore di temi avanzato di PowerBI.tips, in cui è possibile utilizzare l'interfaccia utente per generare file di temi JSON per tutti o tipi di oggetti visivi specifici. Si spera che tu possa aggiungere la codifica del tema JSON personalizzata alla tua casella degli strumenti di LuckyTemplates e che possa sia aiutarti a standardizzare i tuoi report sia risparmiarti un po 'di lavoro in futuro.

Greg