Spesso mi capita di voler adeguare l’aspetto grafico di una pagina alle necessità (voluttuarie) dei clienti più esigenti. Dover rispondere che non si può cambiare il colore del filtro o lo sfondo, spesso è pericoloso, ci si pone in modo sbagliato e non tutti i clienti apprezzano un “no” anche se in buona fede.
Ecco quindi un sistema semplice e veloce per cambiare (quasi) tutto.
La prima cosa da fare è aggiungere ad una pagina qualcosa che ci permetta di editare un CSS su Qlik Sense. Non c’è bisogno di estensioni, l’oggetto c’é già, è l’oggetto “Multi KPI” che si trova nelle estensioni “Bundle” fornite di default:
Perché funzioni è INDISPENSABILE che contenga almeno una misura, quindi mettiamo un “1” nelle misure e poi togliamo la visualizzazione del titolo e dei valori:
Questo ci permetterà di “nascondere” l’oggetto nella pagina, occorre togliere anche il titolo e il toggle del menu nei parametri della scheda “General”:
Fatto ciò l’oggetto è pronto, possiamo andare ad editare il nostro CSS nella scheda Style:
E’ possibile andare a leggere lo stile della pagina con gli strumenti del browser, ma ecco sotto alcuni esempi:
//Colore di sfondo
.qv-panel-sheet {
background: linear-gradient(159deg, rgba(11,25,196,1) 0%, rgba(150,190,252,1) 18%, rgba(255,255,255,1) 47%, rgba(255,255,255,1) 100%) }
//Aggiunge una barra grigia verticale a sinistra
.qv-panel-sheet{
background-image: linear-gradient(90deg, #E9EBEE 11.4%, #fff 1%) !important;
}
// Colore dei filtri
.qv-listbox .serverLocked, .qv-listbox .serverSelected, .qv-listbox li.selected {
background-color: #c4bc47;
color: #fff;
border-bottom: 1px solid #c4bc47;}
//Grafico a barre
.qv-object-barchart {
border-radius: 3px;
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.16);}
Questa che segue è molto utile:
//Togliere i campi da una Pivot (in modo che siano invisibili e bloccati)
[tid=”meta.rows”],[tid=”meta.columns”]
{display:none;}
Basta copiare ed incollare lo stile che si vuole modificare e automaticamente sarà impostato sulla pagina.
Nel caso si desideri cambiare qualcos’altro, ecco come andare a prendere lo stile tramite lo strumento di analisi del browser (io uso Chrome ma tutti ne hanno uno). Cliccando CTRL-SHIFT e il tasto destro del mouse appare il menu delle opzioni del browser:
A questo punto sarà sufficiente cliccare su “Ispeziona” e andare a cercare l’oggetto da modificare, per esempio qv-listbox che presenterà sotto il CSS con i colori che possono essere modificati:
Copia e modifica il testo sostituendo i colori, per esempio il backgroud-color, poi incollalo nella sezione “Styles (CSS)”.
Ci sono molti siti che, on-line, permettono di comporre sfondi sfumati con i CSS per esempio: https://cssgradient.io/
Basterà copiare la stringa CSS risultato della tua elaborazione nel testo per vedere cambiato lo sfondo o qualunque altro oggetto. I CSS possono essere aggiunti ovviamente uno sotto l’altro per modificare diversi oggetti con un solo sorgente.