Icone personalizzate di LuckyTemplates | Tecnica di visualizzazione PBI

Per l'esercitazione di oggi, illustrerò una delle mie tecniche preferite relative alle icone personalizzate di LuckyTemplates, che usa le icone personalizzate in modo dinamico negli oggetti visivi di LuckyTemplates. Questo tutorial è ispirato a una voce sul forum LuckyTemplates, in cui uno dei nostri membri ha problemi ad aggiungere icone personalizzate alla grafica della sua carta. Mostrerò come risolvere questo problema in modo efficiente. Puoi guardare il video completo di questo tutorial in fondo a questo blog.

Questo è il risultato desiderato dal membro, che è una semplice scheda visiva con testo: una freccia in alto se il valore della misura è positivo e una freccia rossa in basso se il valore è negativo. Se facciamo clic qui su una parte diversa del ticker, vedrai che cambia dinamicamente in una freccia verde in alto quando è positiva e poi in una freccia rossa in basso quando è negativa.

Sommario

• Icone personalizzate dinamiche di LuckyTemplates nei report
• Conclusione

Icone personalizzate dinamiche di LuckyTemplates nei report

Un modo per incorporare questo è utilizzare la conversione Base64 . Base64 prende i file binari e li converte in testo ASCII. Non esiste un modo diretto per incorporare i file di immagine binaria in un report di LuckyTemplates. Quindi, devi passare attraverso questa codifica tramite Base64 per farlo.

Ti mostrerò la struttura generale che uso per questo, che è solo un costrutto di base . In questo caso, la misura che stiamo osservando è questa Media di LNReturn (log rendimenti normali). Se è minore di zero, ottiene un certo valore. Se è maggiore di zero, ottiene un valore diverso. E poi, per semplicità, ho detto che se non è nessuno dei due, (come in questo caso) se è uguale a zero, viene semplicemente lasciato vuoto.

E le possibilità che questa media sia esattamente zero sono molto piccole. Ma potresti inserire un terzo valore qui, che forse è solo una freccia orizzontale che non mostra cambiamenti, oppure puoi usare vuoto. L'ho appena fatto per semplificare la misura a scopo illustrativo.

Ora diamo prima un'occhiata alle icone personalizzate. Le icone personalizzate che utilizzo provengono da un sito chiamato Flaticon . Non ho alcuna affiliazione con Flaticon. Mi capita solo di pensare che sia davvero un buon sito. Ti consente di organizzare le icone in un modo davvero carino. Ti permette anche di modificarli. Li uso molto nei miei report di LuckyTemplates.

Quello che ho fatto è stato trovare un'icona qui che pensavo avrebbe funzionato bene con i requisiti del membro. E poi, ho appena esaminato l'editor Flaticon e ho creato una versione verde per l'alto e una versione rossa per il basso.

E poi, ho scaricato una versione più piccola delle frecce rosse e verdi, che è 32px perché 512px genererà una versione Base64 molto grande.

Successivamente, vogliamo convertirli in Base64. Ci sono un sacco di convertitori Base 64, ma uno che mi piace molto è questo Base64 image.de . Ha una bella interfaccia drag and drop e ha capacità di ottimizzazione delle immagini. E se lo abiliti, ridurrà le dimensioni del file risultante senza alcun impatto evidente sull'aspetto visivo. Se stiamo lavorando con immagini più complesse, quell'ottimizzazione aiuterà davvero a ridurre le dimensioni.

Possiamo quindi semplicemente trascinare e rilasciare i file qui, che come puoi vedere si convertono abbastanza velocemente.

Quindi, copiamo semplicemente l'immagine per ognuno e la incolliamo nella misura all'interno delle virgolette. E puoi vedere, anche per quella piccola icona da 32 pixel, questa è una quantità piuttosto pesante di testo.

Quindi, creiamo una nuova misura in cui possiamo copiarla. Chiamerò questa misura, Icon2 Base64 . Successivamente, dobbiamo modificare la categoria di dati in URL immagine . Ora siamo in buona forma per creare l'immagine che vogliamo

Gli elementi visivi delle carte non gestiscono le immagini senza l'uso di elementi visivi personalizzati per la lettura di tali immagini, ma le tabelle gestiscono le immagini abbastanza bene. Quindi, creeremo prima solo un oggetto visivo della tabella e possiamo formattare tale oggetto visivo della tabella in modo che assomigli a un oggetto visivo della scheda.

Prendiamo la nostra icona due file Base64, e poi la nostra misura, la media del LNR. Successivamente, possiamo semplicemente formattarli di conseguenza utilizzando il nuovo riquadro del formato.

Ed è così che lo fai con Base64. L'altra possibilità è l'utilizzo di immagini basate sul Web . Il motivo per cui potresti volerlo fare è se stai usando immagini più complesse. Ci sono alcune cose che puoi fare in termini di suddividere l'immagine in pezzi e quindi assomigliarla in DAX. Ma il modo più semplice per farlo è solo attraverso le immagini basate sul web.

Una volta scaricati i file (la freccia verde su e la freccia rossa giù), puoi andare su un sito di hosting di immagini. Quello che uso io si chiama IMGBB . Ancora una volta, non ho alcuna affiliazione con questo sito; è solo uno che mi piace che funziona bene per me.

Devi solo caricare le tue immagini su questo sito, andare ai codici di incorporamento e assicurarti di guardare i link diretti.

Puoi quindi copiarli. Quindi, utilizzando la stessa struttura di base che abbiamo utilizzato nell'istruzione SWITCH TRUE , puoi incollarli in quella struttura di base. E questo dovrebbe darci esattamente ciò di cui abbiamo bisogno dal punto di vista dell'immagine.

Come aggiungere icone LuckyTemplates personalizzate ai tuoi report
Sviluppo di report LuckyTemplates: creazione di temi, loghi aziendali, icone e sfondi
La migliore grafica personalizzata di cui non hai mai sentito parlare

Conclusione

Questa è la tecnica che volevo mostrarvi oggi. Puoi usarlo per creare icone personalizzate dinamiche di LuckyTemplates in molti modi diversi. Le tabelle lo gestiscono bene. Puoi farlo anche attraverso le matrici, e poi ci sono alcuni strumenti visivi personalizzati che li visualizzeranno solo isolatamente all'interno di una cornice.

C'è molta flessibilità in questa tecnica e spero che tu l'abbia trovata utile. Puoi guardare il tutorial video completo qui sotto per maggiori dettagli.

Saluti!