Sovelluksissa ohjataan käyttäjä usein tekemään valintoja hierarkian kautta.
Kuvan esimerkki on mobile.de -sivustolta. Käyttäjä valitsee ensin automerkin, jonka jälkeen hän valitsee oikean mallin. Miten tällaiset hierarkiset valintalistat (cascading dropdown lists) toteutetaan PowerAppsilla?
Katsotaan!
Hierarkian sisältö
Valintahierarkia tulee ensin tallennetaa jonnekin. Kullakin hierarkiatasolla voi olla oma taulunsa tai kaikki tasot tallennetaan vaihtoehtoisesti yhteen ja samaan. Käytetään tällä kertaa jälkimmäistä tapaa. Tallennuspaikkana toimii SharePoint -lista.
Listan sarakkeet ovat
- ID – Valinnan tunniste
- Title – Valinnan otsikko
- ParentID – Sen valinnan ID, jonka alle tämä valinta kuuluu.
- LevelID – Mille valintatasolle valinta kuuluu. Tätä ei käytetä ratkaisussa, mutta helpottaa hahmottamaan SharePoint -listan sisältöä.
Versio 1 – Perusratkaisu
Aloitetaan tyhjästä PowerAppsista, johon listätää tietolähteeksi (Data source) luomamme Sharepoint-lista.
Seuraavaksi lisätään näytölle kolme alasvetolistaa (dropdown).
Alasvetovalikoiden valintoina on jotain esimerkkihömppää. Vaihdetaan ensimmäisen valintalistan riveiksi SharePoint -listamme rivit, joiden ParentID = 0 (juuritaso). Samalla valitaan minkä sarakkeen arvo listalla näytetään. Valitaan Title.
Testataan ja todetaan toimivaksi.
Toisen ja kolmannen valintalistan arvot riippuvat aina edellisen valintalistan valinnasta. Tämä onnistuu suodattamalla Items-joukoksi rivit, joiden ParentID on sama kuin edellisestä valintalistasta valitun rivin ID.
Items = Filter(CascadingDropDownList, ParentID = ComboBox1.Selected.ID)
Eikä unohdeta valita Value-kentän arvoksi Title.
Tehdään sama temppu vielä kolmannellekin valintalistalle ja kokeillaan.
Toimii!
Ratkaisussa on kuitenkin kaksi puutetta.
- Listoilla on oletuksena valittuna ensimmäinen rivi.
- Käyttäjä ei voi hakea/suodattaa listojen arvoja.
Ensimmäisen puutteen voi korjata lisäämällä valintoihin ensimmäiseksi arvoksi ”Valitse x”. Vähän kökköä sekin.
Jatketaan kokeilua.
Versio 2 – Valintalistat haulla
Korvataan Dropdown -listat monipuolisemmilla Combobox -kontrolleilla.
Dropdown ja Combobox -kontrollien Items -ominaisuus on identtinen. Kopioidaan niihin arvot suoraan edellisestä esimerkistä. Combo boxille voi määritellä erikseen
- Mikä kenttä näytetään listalla (DisplayFields)
- Minkä kentän sisällöstä haetaan, kun käyttäjä filtteröi listan sisältöä (SearchFields)
Käytämme molemmissa tapauksissa SharePointin Title-kenttää, eli asetamme arvoiksi [”Title”].
Kokeillaan ja todetaan toimivaksi.
Versio 3 – Listojen enablointi/disablointi
Comboboxeja käyttämällä käyttäjä voi hakea haluamansa arvon listalta. Ominaisuuden vaihtokauppana tulee kuitenkin pientä säätöä.
Lähtötilanne näyttää sekavalta. Arvaatko että toiseen alasvetovalikkoon ilmestyy arvoja kun valitset ensimmäisestä jotain?
Määritellään alempien kontrollien DisplayMode:ksi Edit tai Disabled riippuen siitä onko edeltävästä valintalistasta valittu jotain vai ei.
Nyt valinnat aktivoituvat sitä mukaa kun käyttäjä valitsee arvoja. Huomattavasti parempi.
Versio 4 – Valintojen peruminen alemmilta tasoilta
Comboboxista voi poistaa tehdyn valinnan. Hierarkisissa valinnoissa tästä seuraa ongelmia. Alla olevassa kuvassa näkyy miten käy, kun valintojen jälkeen käydään poistamssa ensimmäinen valinta.
Alempien valintojen tulisi poistua, kun käyttäjä poistaa ylemmän valinnan.
Tätä varten tehdään kahdelle alemmalle valintalistalle omat muuttujat: varResetLevel2 ja varResetLevel3. Muuttujaa käytetään valintalistan Reset-ominaisuuden arvona.
Aina kun ylemmän valintalistan arvoa muutetaan, vaihdetaan muuttujan avulla seuraavan valintalistan Reset-ominaisuuden arvoksi ensin true ja sen jälkeen takaisin false. Tällä saadaan aikaiseksi valintalistan valinnan tyhjeneminen.
Versio 5 – Suorituskyvyn optimointi kokoelman avulla
Ratkaisun kaikki kolme valintalistaa käyttävät tietolähteenään (samaa) SharePoint-listaa. Tämä näkyy viiveenä valintalistan arvojoukkoa ladattaessa.
PowerAppsimme käyttö nopeutuu selvästi, jos lataamme sovelluksen käynnistyksen (OnStart) yhteydessä SharePoint-listan sisällön kokoelmaan (Collection). Tämä tehdään ClearCollect -komennolla.
ClearCollect(dropdowndata, CascadingDropDownList)
Nyt valintalistojen sisällöt voidaan rakentaa käyttäen muuttujaa, joka on valmiina muistissa. Vaihdetaan jokaisen valintalistan Items-ominaisuuden määritys käyttämään luotua kokoelmaa SharePoint-tietolähteen sijasta.
Nyt SharePoint-listasta haetaan arvot ainoastaan kerran. Vaikka käyttäjä pyörittelee valintoja miten päin tahansa.
Timo Pertilä 