Esempi di caselle di filtro

Questo argomento della guida fornisce diversi esempi che mostrano come personalizzare lo stile e altre proprietà nelle caselle di filtro per raggiungere una serie di scopi funzionali.

Esempio 1 — Design compatto

È possibile aggiungere molte caselle di riepilogo a una casella di filtro, consentendo il perfezionamento dei dati attraverso molte dimensioni diverse.

Per risparmiare spazio e dare priorità ad altre visualizzazioni sul foglio, è possibile dare alla casella di filtro un design compatto in cui il contenuto viene espanso e compresso secondo necessità.

Procedere come indicato di seguito:

1. Creare una nuova app e incollare Esempio script di caricamento in una nuova sezione in Editor caricamento dati. Quindi, caricare i dati.

2. Passare alla vista foglio. Nelle proprietà foglio, impostare Spaziatura griglia su 42.

3. Trascinare un pannello filtro sul foglio.

4. Fare clic su Aggiungi dimensione. Selezionare Country.

5. Nel pannello delle proprietà, fare clic su Aggiungi campo. Selezionare Item Type.

6. Utilizzando il pulsante Aggiungi campo, aggiungere altre quattro dimensioni come caselle di riepilogo:

   • Order Year

   • Order Priority

   • Region

   • Sales Channel

7. Uno per uno, espandere ogni casella di riepilogo appena aggiunta e impostare Presentazione > Comprimi casella di riepilogo su Sempre.

8. Nel pannello delle proprietà, espandere Aspetto > Presentazione.

9. Fare clic su Stile.

10. Nella scheda Pannello filtri, impostare le seguenti proprietà:

    • Dimensione carattere per Titolo: 18px

    • Colore carattere per Titolo: Codice esadecimale #ffffff

    • Colore di sfondo: Codice esadecimale #87205d

    • Ombra: Piccola, Codice esadecimale #000000

11. Nella scheda Caselle di riepilogo, imposta le seguenti proprietà:

    • Dimensione carattere per Intestazione: 14px

12. Ridimensionare la casella di filtro a uno spazio di due per dieci sulla griglia del foglio.

Passare alla modalità di analisi. È possibile espandere le caselle di riepilogo secondo necessità per effettuare selezioni.

Esempio 2 — Design avanzato

Sebbene una casella di filtro sia utilizzata principalmente per filtrare i dati, può anche essere utilizzata per visualizzare i dati. L'integrazione di un design avanzato consente agli analisti di ottenere informazioni mentre effettuano selezioni diverse.

Procedere come indicato di seguito:

1. Creare una nuova app e incollare Esempio script di caricamento in una nuova sezione in Editor caricamento dati. Quindi, caricare i dati.

2. Passare alla vista foglio e trascinare un Riquadro filtro sul foglio.

3. Fare clic su Aggiungi dimensione. Selezionare Item Type.

4. Fare clic sulla listbox Item Type per espandere le sue proprietà.

5. Espandere Presentazione.

6. Attivare l'impostazione Istogramma.

7. Utilizzare il Show frequency menu a discesa per selezionare Relative frequency (%).

8. Impostare Collapse listbox su Never.

9. Espandere Sorting.

10. Impostare Sorting su Custom.

11. Cancellare tutte le opzioni e attivare Sort by expression.

12. Seleziona Discendente.

13. In Espressione, inserire la seguente espressione:

    Count([Item Type])

14. Nel pannello delle proprietà, espandere Aspetto > Generale.

15. Disattiva Mostra titoli.

16. Espandere Aspetto > Presentazione.

17. Fai clic su Stile.

18. Nella scheda Listboxes, imposta le seguenti proprietà:

    • Intestazione:

      • Carattere: Inter, sans-serif

      • Dimensione carattere: 18px

    • Contenuto:

      • Carattere: Inter, sans-serif

19. Ridimensiona la casella di filtro a una piccola forma rettangolare, ad esempio, tre per quattro quadrati.

Esempio 3 — Design mirato

Il modo in cui progetti la tua casella di filtro può dipendere da come vuoi che gli utenti effettuino le selezioni. Ad esempio, potresti voler limitare gli utenti da determinate funzionalità per incoraggiare un'interazione più ristretta e mirata con i dati.

Gli scenari includono:

• Il filtro sulla tua particolare dimensione offre la massima comprensione quando i valori vengono selezionati uno alla volta, o la selezione di più valori non fornisce alcuna comprensione significativa. Per guidare l'analisi in questo modo, puoi disattivare la selezione scala utilizzando la modalità casella di controllo.

• La ricerca di valori nel campo non fornisce alcuna comprensione, o non è desiderabile.

• Si desidera ridurre al minimo le distrazioni durante il filtro dei dati, ad esempio la barra delle selezioni.

Procedere come indicato di seguito:

1. Creare una nuova app e incollare Esempio script di caricamento in una nuova sezione in Editor caricamento dati. Quindi, caricare i dati.

2. Passare alla vista foglio e trascinare un Riquadro filtro sul foglio.

3. Fare clic su Aggiungi dimensione. Selezionare Item Type.

4. Fare clic sulla casella di riepilogo Item Type per espandere le relative proprietà.

5. Impostare Search su Hide.

6. Disattiva Mostra barra degli strumenti selezione.

7. Espandi Presentazione.

8. Attiva modalità casella di controllo.

9. Nel pannello delle proprietà, espandi Aspetto > Generali.

10. Disattiva Mostra titoli.

11. Ridimensionare la casella di filtro a una piccola forma rettangolare, ad esempio, tre per quattro quadrati.

Esempio 4 — Design a griglia

È possibile utilizzare la modalità griglia per le caselle di filtro che utilizzano piccoli set di dati definiti. Un buon esempio è l'organizzazione delle dimensioni basate sul tempo nelle griglie.

Procedere come indicato di seguito:

1. Creare una nuova app e incollare Esempio script di caricamento in una nuova sezione in Editor caricamento dati. Quindi, caricare i dati.

2. Passare alla vista foglio e trascinare un Riquadro filtro sul foglio.

3. Fare clic su Aggiungi dimensione. Selezionare Order Year.

4. Fare clic sulla listbox Order Year per espandere le relative proprietà.

5. Disattiva Mostra titoli.

6. Espandere Presentazione.

7. Impostare Comprimi casella di riepilogo su Mai.

8. Per Mostra dati in, selezionare Griglia.

9. Impostare Numero massimo di colonne visibili su Personalizzato.

10. Impostare Numero massimo di colonne su 3.

11. Aggiungere Order Quarter come casella di riepilogo nella casella di filtro.

12. Fare clic sulla casella di riepilogo Order Quarter per espandere le relative proprietà.

13. Disattiva Mostra titoli.

14. Espandere Presentazione.

15. Impostare Comprimi casella di riepilogo su Mai.

16. Per Show data in, selezionare Grid.

17. Impostare Order by su Columns.

18. Imposta Numero massimo di righe visibili su Personalizzato.

19. Imposta Numero massimo di colonne su 1.

20. Aggiungi Order Month come casella di riepilogo nella casella di filtro.

21. Fare clic sulla casella di riepilogo Order Month per espandere le relative proprietà.

22. Disattiva Mostra titoli.

23. Espandere Presentazione.

24. Impostare Comprimi casella di riepilogo su Mai.

25. Per Mostra dati in, selezionare Griglia.

26. Impostare Colonne visibili massime su Personalizzato.

27. Impostare Colonne massime su 4.

28. Nel pannello delle proprietà, espandere Aspetto > Generale.

29. Disattivare Mostra titoli.

30. Nel pannello delle proprietà, espandere Aspetto > Presentazione.

31. Fare clic su Stile.

32. Nella scheda Pannello filtri, impostare le seguenti proprietà:

    • Colore sfondo: #83af9b

33. Nella scheda Listboxes, imposta le seguenti proprietà:

    • Contenuto:

      • Carattere: Fredoka One, fantasy

      • Dimensione testo: 15px

      • Dimensione testo: Grassetto

      • Colore testo: #000000

    • Stato selezione > Possibile: #000000

    • Colore sfondo: #83af9b

34. Ridimensionare la casella di filtro a una dimensione adatta per la visualizzazione, ad esempio tre per tre.

Ulteriori miglioramenti: casella di filtro composita con il contenitore di layout

Per una maggiore reattività e controllo, potresti creare la casella di filtro di cui sopra come una serie di tre caselle di filtro incorporate all'interno di un contenitore di layout. L'immagine seguente mostra un esempio di come potrebbe apparire.

Esempio 5 — Allineamento con la tavolozza di colori dell'organizzazione

Le caselle di filtro possono essere stilizzate in base alla tavolozza di colori della tua organizzazione. Oltre a definire il colore di sfondo e del testo, puoi impostare schemi di colore per gli stati di selezione nella tua casella di filtro. Potresti voler che le selezioni appaiano nei colori principali del marchio della tua azienda anziché nel colore verde predefinito.

Con i temi personalizzati, è possibile applicare ulteriormente la combinazione di colori dell'organizzazione impostando un colore per le selezioni in tutte le visualizzazioni e la barra degli strumenti di selezione. Per ulteriori informazioni, vedere Temi personalizzati (solo in lingua inglese).

In questo esempio, si crea una casella di filtro che riflette i seguenti colori del marchio:

• Colore principale: Codice esadecimale #3100ff

• Colore secondario: Codice esadecimale #9ba7ff

Procedere come indicato di seguito:

1. Crea una nuova app e incolla i dati di esempio in una nuova sezione in Editor caricamento dati. Quindi, caricare i dati.

2. Passare alla vista foglio e trascinare un Riquadro filtro sul foglio.

3. Fare clic su Aggiungi dimensione. Selezionare Item Type.

4. Nel pannello delle proprietà, fare clic su Aggiungi campo. Selezionare Order Year.

5. Utilizzando il pulsante Aggiungi campo, aggiungere altre tre dimensioni come caselle di riepilogo:

   • Order Priority

   • Region

   • Sales Channel

6. Nel pannello delle proprietà, espandere Aspetto > Generale.

7. Disattiva Mostra titoli.

8. Espandere Aspetto > Presentazione.

9. Fai clic su Stile.

10. Nella scheda Riquadro filtro, imposta le seguenti proprietà:

    • Ombra: Piccola, Codice esadecimale #000000

11. Nella scheda Caselle di riepilogo, imposta le seguenti proprietà:

    • Dimensione carattere per Intestazione: 14px

    • Stato selezione:

      • Selezionato: Codice esadecimale #3100ff

      • Alternativo: Codice esadecimale #9ba7ff

      • Escluso: #bebebe

      • Selezionato escluso: #7b7a78

      • Possibile: #ffffff

12. Ridimensionare la casella di filtro a una forma rettangolare lunga su un lato del foglio, ad esempio, tre per dodici quadrati.

Passare alla modalità di analisi. Effettuare selezioni nella casella di filtro per visualizzare la combinazione di colori.

Esempio script di caricamento

Sales:
LOAD 
Dual([Order Month Text], [Order Month Num]) as [Order Month],

* INLINE [
Order ID,Order Date,Order Year,Order Quarter,Order Month Text,Order Month Num,Region,Country,Item Type,Sales Channel,Order Priority,Ship Date,Units Sold,Unit Price,Unit Cost,Total Revenue,Total Cost,Total Profit
522840487,2/8/2021,2021,Q1,Feb,2,Central America and the Caribbean,Honduras,Household,Offline,H,2/13/2017,8974,668.27,502.54,5997054.98,4509793.96,1487261.02
832401311,2/19/2021,2021,Q1,Feb,2,Asia,Mongolia,Personal Care,Offline,C,2/23/2014,4901,81.73,56.67,400558.73,277739.67,122819.06
419123971,11/19/2021,2021,Q4,Nov,11,Asia,Sri Lanka,Cosmetics,Offline,M,12/18/2016,6952,437.2,263.33,3039414.4,1830670.16,1208744.24
441619336,12/30/2021,2021,Q4,Dec,12,Asia,Turkmenistan,Household,Offline,L,1/20/2011,3830,668.27,502.54,2559474.1,1924728.2,634745.9
795490682,6/30/2022,2022,Q2,Jun,6,Central America and the Caribbean,Honduras,Snacks,Online,L,7/26/2016,2225,152.58,97.44,339490.5,216804,122686.5
158535134,10/27/2022,2022,Q4,Oct,10,Australia and Oceania,Australia,Office Supplies,Online,C,11/25/2015,2924,651.21,524.96,1904138.04,1534983.04,369155
955357205,1/5/2022,2022,Q1,Jan,1,Europe,United Kingdom,Household,Online,L,2/14/2012,282,668.27,502.54,188452.14,141716.28,46735.86
259353148,4/7/2022,2022,Q2,Apr,4,Sub-Saharan Africa,Djibouti,Cosmetics,Offline,H,4/19/2014,7215,437.2,263.33,3154398,1899925.95,1254472.05
450563752,6/9/2022,2022,Q2,Jun,6,Australia and Oceania,Australia,Cereal,Offline,H,7/2/2013,682,205.7,117.11,140287.4,79869.02,60418.38
705784308,10/30/2022,2022,Q4,Oct,10,Middle East and North Africa,Libya,Clothes,Offline,H,11/17/2010,6116,109.28,35.84,668356.48,219197.44,449159.04
505716836,10/13/2022,2022,Q4,Oct,10,Central America and the Caribbean,Haiti,Cosmetics,Offline,H,11/16/2013,1705,437.2,263.33,745426,448977.65,296448.35
807025039,7/25/2023,2023,Q3,Jul,7,Central America and the Caribbean,Belize,Clothes,Offline,M,9/7/2016,5498,109.28,35.84,600821.44,197048.32,403773.12
166460740,10/24/2023,2023,Q4,Oct,10,Europe,Lithuania,Office Supplies,Offline,H,11/17/2010,8287,651.21,524.96,5396577.27,4350343.52,1046233.75
462405812,4/23/2023,2023,Q2,Apr,4,Asia,Turkmenistan,Office Supplies,Online,M,5/20/2013,5010,651.21,524.96,3262562.1,2630049.6,632512.5
816200339,8/14/2023,2023,Q3,Aug,8,Middle East and North Africa,Libya,Fruits,Online,L,9/30/2015,673,9.33,6.92,6279.09,4657.16,1621.93
555990016,5/20/2023,2023,Q2,May,5,Sub-Saharan Africa,Djibouti,Cereal,Online,H,6/17/2017,8656,205.7,117.11,1780539.2,1013704.16,766835.04
231145322,7/5/2023,2023,Q3,Jul,7,Middle East and North Africa,Pakistan,Cosmetics,Offline,L,8/16/2013,9892,437.2,263.33,4324782.4,2604860.36,1719922.04
986435210,11/6/2023,2023,Q4,Nov,11,North America,Mexico,Household,Offline,C,12/12/2014,6954,668.27,502.54,4647149.58,3494663.16,1152486.42
217221009,10/28/2023,2023,Q4,Oct,10,Australia and Oceania,Federated States of Micronesia,Beverages,Online,C,11/15/2014,9379,47.45,31.79,445033.55,298158.41,146875.14
670854651,7/20/2024,2024,Q3,Jul,7,Australia and Oceania,Samoa,Cosmetics,Online,H,8/7/2013,9654,437.2,263.33,4220728.8,2542187.82,1678540.98
213487374,10/21/2024,2024,Q4,Oct,10,Europe,Spain,Household,Offline,L,11/30/2012,4513,668.27,502.54,3015902.51,2267963.02,747939.49
663110148,9/18/2024,2024,Q3,Sep,9,Middle East and North Africa,Lebanon,Clothes,Online,L,10/8/2012,7884,109.28,35.84,861563.52,282562.56,579000.96
827844560,3/18/2024,2024,Q1,Mar,3,Sub-Saharan Africa,Kenya,Vegetables,Online,L,4/7/2012,6457,154.06,90.93,994765.42,587135.01,407630.41
430915820,2/17/2024,2024,Q1,Feb,2,North America,Mexico,Personal Care,Offline,L,3/20/2012,6422,81.73,56.67,524870.06,363934.74,160935.32
240470397,7/7/2024,2024,Q3,Jul,7,Australia and Oceania,Australia,Beverages,Offline,H,7/11/2014,9389,47.45,31.79,445508.05,298476.31,147031.74
559427106,7/30/2024,2024,Q3,Jul,7,North America,Mexico,Personal Care,Offline,M,8/8/2015,5767,81.73,56.67,471336.91,326815.89,144521.02
665095412,2/10/2025,2025,Q1,Feb,2,Sub-Saharan Africa,Mozambique,Household,Offline,L,2/15/2012,5367,668.27,502.54,3586605.09,2697132.18,889472.91
];

drop fields [Order Month Text], [Order Month Num];