Erilaisten muokattavien taulukoiden rakentaminen on yleistä Power Appseja toteutettaessa. Esimerkiksi taulukko, jossa muokataan tuotteiden määriä ja hintoja.

Näiden toteuttamisesta löytyy valtavasti erilaisia esimerkkejä. Valitettavasti esimerkit ovat usein rakennettu siten, että taulukossa muokataan yhden listan/entiteetin/taulun tietoja.

Tarve ei kuitenkaan ole aina tämä. Haluamme usein erottaa rivi- ja saraketiedot omiin entiteetteihinsä. Tällöin sarakkeita voi olla dynaaminen määrä.

Hyvä esimerkki tästä on projektivarausten teko. Meillä on

  • n kpl projekteja (Projects), joihin kuhunkin liittyy
  • n kpl varauksia (Allocations)

Haluamme syöttää projekteille varauksia tietenkin Excel-tyyliin.

Seuraavaksi tietenkin rakennamme Power Appsilla taulukon, jolla muokataan projektien varauksia.

Projektit

Luodaan ensimmäisenä lista, johon tallennetaan projektit.

Seuraavaksi tehdään Power Apps, jossa samaiset projektit esitetään galleriassa.

Seuraavan 12kk varaukset

Haluamme muokata projektien varauksia kuukausitasolla 12 kuukautta kerrallaan. Tarvitsemme käyttöömme tätä 12 kuukauden varausjaksoa vastaavan kokoelman (colPeriods).

Luodaan sovelluksen käynnistyksen yhteydessä (App OnStart) kahtatoista kuukautta vastaava taulukko.

Set(varPeriodsTable, [1,2,3,4,5,6,7,8,9,10,11,12]);

Varauksia tehdään kuluvasta kuukaudesta alkaen, eli aloituspäiväksi asetetaan kuluva päivä.

Set(varStartDate,Today());

Tämän jälkeen luomme kokoelman, joka sisältää 12 kuukautta alkaen kuluvasta päivästä. Kokoelma sisältää kustakin kuukaudesta

  • vuoden (year)
  • kuukauden (month)
  • kuukauden ensimmäisen päivän (periodStartDate)
ForAll(varPeriodsTable,
   Collect(colPeriods,
    {
      year: Year(DateAdd(varStartDate,Value - 1,Months)),
      month: Text(DateAdd(varStartDate,Value - 1,Months),"[$-en-US]mm"),
      periodStartDate: Date(
         Year(DateAdd(varStartDate,Value - 1,Months)),
         Month(DateAdd(varStartDate,Value - 1,Months)),
      1)
    }
  )
)

Lopputulos näyttää tältä.

Mikäli varauksia tehdään viikko tai päivätasolla, täytyy kokoelma muodostaa vastaamaan samaa tasoa.

12 kuukauden esittäminen galleriassa

Lisätään näytölle uusi vaakasuuntainen (blank horizontal) galleria. Asetetaan galleria esittämään juuri luomamme kokoelman (colPeriods) sisältö.

Lisätään galleriaan otsikko (label), jossa näytetään varattavan jakson kuukausi ja vuosi.


Haluamme tehdä varauksia myös pidemmälle kuin vain seuraavalle 12 kuukaudelle. Lisätään gallerian alkuun ja loppuun ikonit, joita painamalla voi siirtyä kalenterissa eteen ja taakse 12kk kerrallaan.

Ikonia painettaessa lisätään (tai vähennetään) tarkasteltavan ajanjakson ensimmäiseen päivään (varStartDate) 12 kuukautta.

Set(varStartDate,DateAdd(varStartDate,12,Months))

Tämän jälkeen muodostetaan colPerdiods -kokoelma uudelleen. Samalla myös otsikkogalleria päivittyy.

Kuukausittaisten varausten esittäminen

Ratkaisusta puuttuu vielä se hankalin osuus.

Miten ihmeessä esitämme riveillä projektien kuukausittaiset varaukset?

Punainen alue pitäisi siis täyttää oikeilla luvuilla.

Projektivaraukset-lista

Projektikohtaiset varaukset ovat omassa listassa/entiteettiissä/taulussa (Project allocations). Kustakin varauksesta on tallennetuna

  • Projekti, johon varaus liittyy (ProjectID)
  • Varausjaksoa vastaava vuosi (Year)
  • Varausjaksoa vastaava kuukausi (Month)
  • Varausjakson ensimmäinen päivä (FirstDayOfPerdio)
  • Varaus päivinä (Allocation)


Varaukset-galleria

Lisätään projekti-gallerian sisään toinen galleria (varaukset). Vaakasuuntainen tyhjä galleria, jonka tietolähteenä on jälleen colPeriods-kokoelma. Eli sama kokoelma, jota käytetään kuukausiotsikoiden esittämiseen gallerian yläpuolella.

Varaukset-galleria sisältää ainoastaan yhden kontrollin, tekstin syöttökentän.

Näin meille syntyy jokaiselle projektiriville 12 tekstikenttää, jotka vastaavat otsikkorivin kuukausia.

Vielä pitäsi hakea näihin tyhjiin kenttiin oikeat arvot. Eli kyseistä projektiriviä ja otsikon kuukautta vastaava arvo ProjectAllocations-listalta.

Jakson varausten hakeminen kokoelmaan

Nyt tarkkana. Näytöllä on 5 projektia ja 12 kuukautta. Niitä vastaa yhteensä 60 riviä ProjectAllocations-listalla. Yksittäiset kyselyt ovat kalliita (=hitaita), joten emme voi tehdä kuuttakymmentä erillistä kyselyä tietovarastoomme.

Haetaankin kaikki tarkasteltavan ajanjakson varaukset yhteen kokoelmaan (colAllocations).

Set(varFilterDayStart, First(colPeriods).periodStartDate);
Set(varFilterDayEnd, Last(colPeriods).periodStartDate);
ClearCollect(colAllocations,
   Filter(
      'Project allocations',
      FirstDayOfPeriod >= varFilterDayStart And
      FirstDayOfPeriod <= varFilterDayEnd
   )
)

Sovelluksen App OnStart näyttää kokonaisuudessaan tältä.

Huom: Todellisuudessa varaustiedot haettaisiin ainoastaan projekteille, joita tällä hetkellä käsitellään. Oikaistaan kuitenkin yksinkertaisuuden nimissä ja jätetään tämä vaihe pois.

Projektien kuukausittaisten varaustietojen esittäminen

Lisätään projekti-galleriaan uusi kenttä (lblProjectID), jonka arvona on rivillä esitettävän projektin ID. Kentän voi halutessaan piilottaa.

Vihdoin pääsemme hakemaan varaus-gallerian tekstikentän oletusarvot (Default) colAllocations-kokoelmasta.

LookUp(colAllocations,
      FirstDayOfPeriod = ThisItem.periodStartDate And 
      ProjectID = Value(lblProjectID.Text)
      ).Allocation

Käytännössä näytämmä kussakin gallerian solussa ProjectAllocations-taulun rivin, jossa

  • ProjectID on sama kuin projekti-galleriassa esitettävän projektin ID ja
  • kausi (FirstDayOfPeriod) on sama kuin varaus-gallerian solun periodStartDate

Näin meillä on taulukko projekteista ja niiden kuukausikohtaisista varauksista. Mikäli kuukautta vastaavaa varausriviä ei löydy, on solu tyhjä.

Helppoa!

Mitä varauksia olen muokannut?

Käyttäjä voi lisätä projekteille puutuvia varauksia sekä muokata olemassa olevia. Soluja on paljon, joten on hyödyllistä näyttää käyttäjälle mitä soluja hän on muokannut.

Asetetaan solun taustaväri vaaleanharmaaksi, mikäli solun arvo poikkeaa kokoelman arvosta (eli alkuperäisestä arvosta). 

If(LookUp(colAllocations,
           FirstDayOfPeriod = ThisItem.periodStartDate 
           And ProjectID = value(lblProjectID.Text)
          ).Allocation = Value(Self.Text), 
    RGBA(255, 255, 255, 1), 
    LightGray
  )

Viimeistely

Siistitään gallerioita vielä lopuksi, jonka jälleen muokattava taulukkomme näyttää tältä.

Voimme syöttää projekteille varauksia vaikka sata vuotta eteenpäin.

Ensi viikolla jatkamme saman harjoituksen parissa. Silloin selviää miten

  • uudet ja muuttuneet varaukset tallennetaan tehokkaasti
  • projektilistan sijaan esitetään hierarkisesti yhden projektin vaiheet