Galleria on yksi PowerAppsin keskeisimmistä ja käytetyimmistä kontrolleista. Perusgalleriassa on kuitenkin yksi merkittävä puute. Gallerian rivit ovat nimittäin aina saman korkuisia.
Alla oleva kuva havainnollistaa ongelmaa hyvin. Galleriassa on kolme riviä, joista yksi sisältää pitkän tekstin. Rivien ollessa samankorkuisia, jää kahdelle ensimmäiselle riville huomattava määrä tyhjää.
Mitä tilan haaskausta.
Tämä on usein esteenä halutunlaisen käyttöliittymän rakentamiselle.
Tehdään edellisen kuvan galleriasta tiiviimpi versio. Näytetään riveistä ainoastaan otsikot. Show more -painikkeella käyttäjä saa esiin rivin kuvauksen.
Mutta rivin kuvausta näytettäessä kasvaa jokaisen rivin korkeus.
Ei kovin tyylikästä.
Onneksi tähän ei tarvitse tyytyä. PowerAppsista löytyy myös erikorkuisia rivejä (Flexible height) tukeva galleriatyyppi .
Sitä käyttäen alkuperäinen esimerkkimme näyttää tältä.
Mahtavaa!
Esimerkki
Katsotaan hieman tarkemmin, miten tätä galleriatyypiä voi hyödyntää. Tehdään galleria, jossa
- Näytetään jokaisesta rivistä ainoastaan otsikko
- Rivin voi ”avata”, jolloin näkyviin ilmestyy tekstikenttä lisätietojen syöttämiseksi
Aloitetaan lisäämällä näytölle korkeussuunnassa joustava galleria. Aseteteaan gallerian tietolähteeksi (data source) joku sopiva SharePoint-lista ja lisätään galleriaan otsikkoa varten teksikenttä (label), sekä lisätietojen antamiseksi tekstin syöttökenttä (text input).
Lisätään kuvauskentän viereen painikkeet tallentamiselle sekä muutosten perumiselle.
Ja niiden päälle vielä ikonit, joilla rivin voi avata ja sulkea.
Elementit ovat valmiina, siirrytään varsinaisen toiminnallisuuden toteuttamiseen.
Helpointa olisi säätää syöttökentän sekä painikkeiden näkyvyyttä sen mukaan, onko kyseinen gallerian rivi valittuna (Gallery.Selected). Tällöin galleriassa olisi aina joku rivi ”avattuna”, galleriassa kun on aina joku rivi valittuna.
Tämä ei meille kelpaa, joten ylläpidetääm itse tietoa siitä, mikä gallerian rivi kulloinkin on avattuna.
Käyttäjän klikatessa alaspäin osoittavaa väkästä, tallennetaan muuttujaan (ShowTextBoxOnItem) kyseisen rivin id.
UpdateContext({ShowTextBoxOnItem: ThisItem.ID})
Käyttäjän klikatessa ylöspäin osoittavaa väkästä, asetetaan muuttujan arvoksi -1. Galleriassa ei ole kyseistä riviä, joten tällöin mitään gallerian riviä ei esitetä avattuna.
UpdateContext({ShowTextBoxOnItem: -1})
Tämän jälkeen kaikki on helppoa. Asetetaan esiin ilmestyvien kontrollien näkyvyys riipuumaan siitä, onko kyseisen rivin kohdalla klikattu ikonia. Eli onko kysesen rivin ID sama kuin muuttujassamme oleva id.
Visible: ShowTextBoxOnItem = ThisItem.ID
Viritetään vielä väkäsistä näkymään kerrallaan vain toinen.
Väkänen ylös näkyy ainoastaan mikäli kyseinen rivi on avattuna.
Visibility: ThisItem.ID = ShowTextBoxOnItem
Väkänen alas näkyy ainoastaan mikäli kyseinen rivi on kiinni.
Visibility: ThisItem.ID <> ShowTextBoxOnItem
Lopuksi asetetaan väkäset päällekkäin jolloin lopputulos näyttää tältä.
Kaikki rivit kiinni.
Keskimmäinen rivi auki.
Timo Pertilä 