CSS-pudotusvalikot Canvas-sovelluksissa

Tässä opetusohjelmassa aiomme puhua siitä, kuinka CSS-pudotusvalikot toimivat.

CSS-pudotusvalikot ovat kaksi tai useampia avattavia valikoita, jotka ovat riippuvaisia ​​toisistaan.

Power Appsissa käytettäessä peräkkäiset pudotusvalikot voivat parantaa loppukäyttäjäkokemustasi varsinkin kun on kyse valtavien tietomäärien suodattamisesta.

Sisällysluettelo

• Asiakashakutaulukon lisääminen
• Ensimmäisen pudotusvalikon lisääminen
• Datataulukon yhdistäminen pudotusvalikkoon
• Lisätään toinen pudotusvalikko
• CSS-pudotusvalikoiden luominen
• Johtopäätös

Asiakashakutaulukon lisääminen

Aloitetaan lisäämällä avattava valikko uudelle näytölle.

Aiomme lisätä uuden näytön kopioimalla päänäytön, tekniikka, josta keskustelimme kohdassa a. Kutsumme tätä näyttöä nimikkeen hakuksi.

Lisätään sitten näyttöön tietotaulukko.

Meidän on lisättävä tietolähde taulukkoomme, jotta voimme näyttää tarvitsemamme tietueet. Lisätään Taulukko1 tietolähteeksi oikealla olevan Ominaisuudet-ruudun kautta.

Lisätään sitten tarvitsemamme kentät napsauttamalla "Muokkaa kenttiä". Tässä taulukossa käytämme Etunimi-, Sukunimi-, Sijainti- ja VIP-tasoja.

Nyt kun taulukkomme sisältää tarvitsemamme tietueet, tämä toimii asiakashakutaulukkona.

Nyt tavoitteena on, että pystymme suodattamaan tässä taulukossa olevat tietueet sijainnin ja VIP-tason perusteella. Siinä meidän pudotusvalikot tulevat käyttöön.

Ensimmäisen pudotusvalikon lisääminen

Siirrytään kohtaan Input Insert-nauhan alla ja napsauta pudotusvalikkoa.

Oletusarvoisesti avattavien valikoiden arvot ovat 1, 2 ja 3.

Voimme muuttaa pudotusvalikon kohteita siirtymällä oikeanpuoleiseen ruutuun ja yhdistämällä asiakashakutaulukossamme käyttämämme tietolähteen, joka on Taulukko1.

Valitse sitten Arvo-kohdassa avattavasta valikosta sarake, jota haluamme käyttää. Tässä tapauksessa käytetään Sijaintia.

Kun tämä on tehty, näemme kaikki mahdolliset sijainnit avattavassa valikossa. Näemme kuitenkin myös useita kaksoiskappaleita.

Tämä johtuu siitä, että tällä hetkellä se vain ottaa kaikki Sijainti-sarakkeen tietueet riippumatta siitä, kuinka monta kertaa tietue näkyy. Päästäksemme eroon näistä kaksoiskappaleista aiomme käyttää Distinct-toimintoa.

Distinct-funktio arvioi tietueet tietyssä sarakkeessa ja poistaa kaikki kaksoiskappaleet.

Korostetaan siis pudotusvalikko ja valitaan Kohteet-ominaisuus. Sitten käytämme Distinct-funktiota ja viittaamme Taulukkoon 1 ja Sijaintiin.

Kun lukitsimme tämän kaavan, avattavassa valikossamme on nyt vain ainutlaatuisia kohteita ilman kaksoiskappaleita.

Jotta voimme helpottaa tämän avattavan valikon tietueiden selaamista, lajitellaan kohteet siten, että ne näkyvät aakkosjärjestyksessä. Käytämme toimintoa SortByColumn, joka yleensä vaatii lähteen. Tässä esimerkissä lähde olisi luettelomme eri kohteista Sijainti-sarakkeessa.

Se vaatii myös sarakkeen. Tässä tapauksessa haluamme funktion lajittelevan kohteet itse tuloksesta. Pohjimmiltaan tämä tulos tulee lähteestä, johon juuri viittasimme, joka on luettelomme erillisistä kohteista. Joten viittaamme tulokseen.

Nyt meillä on kaikki ainutlaatuiset sijaintimme lajiteltuina tähän avattavaan luetteloon.

Datataulukon yhdistäminen pudotusvalikkoon

Seuraava askel olisi tehdä tästä taulukosta riippuvainen pudotusvalikosta. Käytämme tähän suodatintoimintoa.

Korostetaan siis tietotaulukko ja siirrytään Items-ominaisuuteen ja käytetään Suodatin-toimintoa. Suodatintoiminto ottaa yleensä lähteen ja loogisen testin. Tässä tapauksessa lähdemme on Taulukko1. Mitä tulee loogiseen testiin, haluamme sen vastaavan mitä tahansa arvoa, jonka käyttäjä valitsee pudotusvalikosta.

Jos katsomme vasenta ruutua, huomaamme, että pudotusvalikko, johon haluamme viitata tässä, on Dropdown4.

Joten se on elementti, jota käytämme loogisessa testissämme. Käytämme pudotusvalikkoa4.Selected.Result, koska haluamme näyttää tulokset vain valitun kohteen perusteella.

Nyt, koska Australia on valittuna avattavasta valikosta, taulukko näyttää vain tietueet, joiden sijainti on Australia.

Lisätään toinen pudotusvalikko

Koska haluamme viime kädessä ketjuttaa avattavat valikot, tämä tarkoittaa, että tarvitsemme vähintään kaksi avattavaa valikkoa. Joten lisätään toinen pudotusvalikko. Tällä kertaa sitä käytetään tietueiden suodattamiseen VIP-tason perusteella.

Tässä esimerkissä uusi pudotusvalikko on Dropdown5.

Jälleen kerran meidän on napautettava tietolähdettä, joka on Taulukko1. Sitten käytämme arvona VIP-tasoa.

Koska VIP-taso-sarakkeen kohteilla on todennäköisesti myös kaksoiskappaleita, käytämme jälleen Distinct-toimintoa, jossa viitataan Taulukkoon 1 ja VIP-tasoon.

Tämä varmistaa, ettei avattavassa valikossa ole kaksoiskappaleita.

Laitetaan nyt myös nämä kohteet järjestykseen. Aivan kuten ensimmäinen pudotusvalikko, käytämme SortByColumnia, tällä kertaa viitaten VIPLeveliin Location sijaan.

Kun tämä kaava on käytössä, avattavan valikon kohteet ovat nyt oikeassa järjestyksessä.

Seuraavaksi meidän on palattava tietotaulukkoomme varmistaaksemme, ettemme suodata vain ensimmäisen pudotusvalikon, vaan myös toisen pudotusvalikon perusteella. Tietotaulukoiden ja suodatustoiminnon hyvä puoli on, että voimme lisätä niin monta suodatusehtoa kuin haluamme.

Joten jos siirrymme alkuperäiseen kaavaan, meidän tarvitsee vain lisätä VIPLevel = Dropdown5.Selected.Result.

Kun olemme tallentaneet kaavan, voimme nyt valita kohteita molemmista pudotusvalikoista ja tietotaulukkomme suodattaa tietueet molempien perusteella. Jos esimerkiksi valitsemme Singaporen avattavasta Sijainti-valikosta ja 1 VIP-tason avattavasta valikosta, saamme kaksi kyseisiä parametreja vastaavia merkintöjä.

Voimme muuttaa VIP-tason 4:ksi, ja se näyttää yhden suodattimiamme vastaavan tuloksen.

Huomaa nyt, kuinka pöytä tulee tyhjäksi, kun valitsemme VIP-tason 5 ja sijainniksi Singapore.

Tämä tarkoittaa, että Singaporessa ei ole ketään, joka kuuluisi VIP-tason 5 alle. Vaikka tämä on ymmärrettävää, haluamme, että 5 ei näy toisessa pudotusvalikossa, jos sitä vastaavaa tietuetta ei ole. Siitähän peräkkäisissä pudotusvalikoissa on kyse.

CSS-pudotusvalikoiden luominen

Tällä hetkellä toisen pudotusvalikon Items-ominaisuus tarkastelee taulukkoa 1, ottaa erilliset kohteet VIPLevel-sarakkeesta ja lajittelee ne todellisen tuloksen mukaan.

Haluamme, että tietolähde rajoitetaan ensimmäisestä pudotusvalikosta valittuun tietolähteeseen sen sijaan, että katsottaisiin koko taulukkoa1. Jos käyttäjä esimerkiksi valitsee Singaporen avattavasta Sijainti-valikosta, VIPLevel-pudotusvalikon tulisi näyttää vain Singaporea vastaavat kohteet, ei koko taulukkoa.

Joten aiomme lisätä tähän Suodatin-toiminnon varmistaen, että Taulukko1 suodatetaan sen ehdon perusteella, että sijainnin tulee olla yhtä suuri kuin Dropdown4.Selected.Result.

Jos tarkistamme pudotusvalikon nyt, huomaamme, että toisessa avattavassa valikossa ei ole enää 5, kun Singapore on valittuna ensimmäisestä avattavasta valikosta.

Jos tarkistamme Kanadan tällä kertaa, se osoittaa, että VIP-tason alapuolella ei ole 3.

Jos vertaamme tämän alkuperäiseen tietolähteeseen, joka on Taulukko 1, huomaamme, että Kanadassa ei todellakaan löydy VIP-tasolle 3 osumia. Tämä tarkoittaa, että kaavamme toimii.

Johtopäätös

CSS-pudotusvalikot voivat ehdottomasti parantaa loppukäyttäjän kokemusta, varsinkin jos käsittelet suuria tietomääriä. Näin loppukäyttäjien on helpompi löytää tarvitsemansa tietueet nopeammin, koska heidän ei tarvitse käsitellä ylimääräisiä kohteita, jotka eivät tuota mitään, kun he suodattavat tuloksia.

Huomaa, että voit pudottaa muita avattavia valikoita tarpeen mukaan. Sinun ei tarvitse rajoittua kahteen pudotusvalikkoon. Tämä tarkoittaa, että jos tietolähteessäsi on enemmän kenttiä, voit lisätä avattavia valikoita sen mukaan, kuinka tarkkoja haluat suodatuksen olevan.

Kaikki parhaat,

Henry