Kirjojen lainaus Power Appsilla

Viime viikon jutussa kävin lyhyesti läpi kesän julkistuksia. Näistä mielenkiintoisin on mielestäni uusi (model-driven) editori ja sen mukana tuleva komentorivin muokkaus (command bar edit) sekä räätälöidyt sivut (custom pages).

Parhaiten näiden uusien ominaisuuksien merkitys aukeaa esimerkillä, joten tehdään kertaa Power Appsilla yksinkertainen sovellus, jolla pyöritetään pientä kirjastoa.

Hyödynnettään canvas sovellusta kivannäköisen aloitusnäkymän ja helpon lainaus/palautus-kokemuksen tuottamiseen. Model-driven sovellusta käytetään tietojen ylläpitoon ja selailuun.

Aloitetaan!

Tarvittavat taulut

Ratkaisun tietomalli on yksinkertainen. Meillä on kirjoja (book), joihin liittyy kirjoittaja (author) sekä 0-n kappaletta lainauksia (booking).

Luodaan taulut Dataverseen normaaliin tapaan ratkaisupaketin sisään.

Kirjat (Book)

Kustakin kirjasta tallennetaan

• Nimi (Name)
• Viittaus kirjailijaan (Author, LookUp)
• Julkaisupäivä (Pubilcation Date)
• ISBN-koodi (ISBN)
• Niteen yksilöivä tunniste (Id)
• Linkki kansikuvaan (Image URL)
• Kirjan kunto (Condition)
• Onko kirja parhaillaan lainassa (Currently Booked)
• Viittaus viimeiseen lainaukseen (Last Booking, LookUp)
  

Kirjailijat (Author)

Kirjailijasta tallennetaan ainoastaan nimi.

Lainaukset (Booking)

Lainauksesta tallennamme

• Lainaajan nimen (Name)
• Lainauspäivän (Booking Date)
• Palautuspäivän (Returning Date)
• Viittaus lainattuun kirjaan (Book)

Näkymät ja lomakkeet

Muokataan taulujen lomakkeet ja näkymät sopiviksi perinteiseen tapaan.

Tähän asti kaikki on tehty vanhoilla tutuilla työvälineillä.

Model-driven sovellus

Luodaan seuraavaksi model-driven sovellus, jolla kirjoja, lainoja ja kirjailijoita ylläpidetään. Luonnin yhteydessä valitaan kumpaa työkalua haluamme käyttää. Valitaan uusi Modern app designer.

Lisätään sovellukseen juuri luomamme taulut. Tämä tehdään Add page -toiminnolla.

Olemme luomassa tauluihin pohjautuvia sivuja. Valitsemme vaihtoehdoista siis ensimmäisen (Table based view and form).

Poimitaan mukaan tarvittavat taulut.

Näin meille on syntynyt model-driven sovellus. Editorin keskellä on toimiva sovellus esikatseltavana.

Navigoinnin muotoilu on helpompaa kuin aiemmin. Vaihdetaan taulut loogisempaan järjestykseen navigaatiossa ja nimetään näytettävä otsikko kirjastoksi (Library).

Muutoinkin uusi editori on varsin looginen ja helppokäyttöinen. Varsinkin kun vertaa vanhaan.

Tähän mennessä emme ole tehneet mitään erikoista. Lopputuotos on sama vanha model-driven sovellus.

Haluamme kuitenkin luoda model-driven sovelluksen pääsivuksi visuaalisen gallerian kirjoista. Silloin esiin astuu räätälöidyt sivut. Eli käytännössä model-driven sovelluksen sisällä oleva canvas sovellus.

Kokeillaan.

Räätälöity sivu (Custom page)

Lisätään sovellukseen uusi sivu. Valitaan sen tyypiksi Custom.

Luodaan uusi sivu jolle annetaan nimeksi Book Gallery.

Meille avautuu canvas-editori, jossa on käytössä kaikki tutut ominaisuudet. Luodaan näytölle gallerianäkymä kirjoista ja toteutetaan seuraavat ominaisuudet

• Galleriaa voi suodattaa kirjan nimen perusteella
• Lainassa olevat kirjat näkyvät gallerissa violettina

Lisäksi niteitä voi hakea niiden tunnisteen avulla (oikean yläreunan hakukenttä ja painike). Mikäli löydetty nide on vapaa, sen voi merkitä lainatuksi avautuvasta dialogista.

Kirjaa lainatessa luodaan uusi rivi Bookings-tauluun. Samalla kirja merkitään tilaan ”lainassa” ja liitetään tuorein lainaus kirjan Last Booking -kenttään.

UpdateContext(
 {
   varBooking: Patch(
      Bookings, 
      varCurrentBook.'Last Booking',
      {
        Name: cmbUser.Selected.DisplayName,
        Book: varCurrentBook,
        'Booking date': Today()
      }
    )
 });

Patch(
  Books,
  varCurrentBook,
  {
    'Currently Booked': 'Currently Booked (Books)'.Yes,
    'Last Booking': varBooking
  });

UpdateContext({varShowDialog: false})

Mikäli kirja on jo lainassa, sen voi merkitä palautetuksi. Tällöin lainaukseen lisätään palautuspäivä ja kirja päivitetään tilaan ”saatavilla”.

Molemmilla näytöillä voi päivittää tiedon kirjan kunnosta (tähtiluokitus 1-5).

Mutta kaikki tämä on tuttua canvas-tekijöille. Uutta on se, miten näiden kahden sovelluksen (canvas ja model-driven) välillä voi nyt navigoida.

Navigointi canvasista model-driven sovellukseen

Emme halua toteuttaa canvas sovellukseen kirjan perustietojen päivitys-lomaketta. Tällainen on jo model-driven sovelluksessa. Miten siis siirrymme galleriasta valitun kirjan muokkauslomakkeelle?

Näin.

OnSelect = Navigate(ThisItem)

Mitään muuta ei tarvitse. Power Apps tietää mihin tauluun galleria on kytketty ja osaa siirtyä oikealle lomakkeelle.

Lomakkeen takaisin-painikkeella palataan takaisin canvas sovellukseen (canvas käynnistyy tällöin aina uudelleen).

Voit myös navigoida canvasilta suoraan model-drivenin näkymiin

OnSelect = Navigate('Authors (Views)'.'Active Authors')

tai tietueen luontilomakkeelle.

OnSelect = Navigate(Defaults(Authors))

Tallennus ja julkaisu

Kun canvas on valmis se tallennetaan.

Ja tietenkin julkaistaan.

Ja julkaistaan vielä se model-driven sovelluskin…

Näin meillä on model-driven sovellus, jonka aloitussivuna on pykälää tyylikkäämpi canvasina toteutettu sivu (custom page). Etusivulta voi hoitaa helposti lainaukset ja palautukset. Perinteisillä sivuilla ylläpidetään kirjojen ja kirjailijoiden perustietoja.

Komentorivin muokkaaminen

Entä jos tarjoaisimme käyttäjälle mahdollisuuden merkitä kirja palautetuksi myös model-driven lomakkeelta? Eli täältä.

Palautuksen yhteydessä päivitetään sekä kyseisen kirjan tietoja, että siihen liittyvän lainauksen tietoja. Kuulostaa hankalalta.

Toiminto on kuitenkin helppo lisätä uuden komentorivin muokkausmahdollisuuden avulla.

Valitaan haluttu taulu (Book) ja avataan kolmen pisteen takaa komentorivieditori (Edit command bar).

Komentorivejä on neljässä eri paikassa. Haluamme muokata lomakkeen (Main form) komentoriviä.

Meille avautuu komentorivieditori.

• Lisätään uusi painike (1)
• Nimetään se (2)
• Valitaan sille sopiva ikoni (3)
• Määritellään toiminnoksi Power Fx -kaavan suoritus (4). Toinen vaihtoehto on suorittaa JavaScriptiä.
• Avataan kaavaeditori (5)
• Määritellään mitä painikkeesta tapahtuu (6)

Kaava on canvas-tekijöille tuttua Power Fx:ää. Helppoa kuin heinänteko! Kunhan muistaa että lomakkeen tietueeseen viitataan komennolla Self.Selected.Item.

Patch(Books, Self.Selected.Item, {'Currently Booked': 'Currently Booked (Books)'.No});
Patch(Bookings,Self.Selected.Item.'Last Booking',{'Returning date': Today()})

Kirjan voi luonnollisesti palauttaa ainoastaan mikäli se on lainassa. Määritellään painikkeen näkyvyys riippumaan kaavasta (Visibility = Show on condition from formula, 1).

Käytetään seuraavaa kaavaa (2).

Self.Selected.Item.'Currently Booked' = 'Currently Booked (Books)'.Yes

Painike näkyy siis ainoastaan kirjan ollessa lainassa.

Ja siellä se on!

Navigointi model-drivenistä canvas sovellukseen

Model-drivenin komentoriviltä on myös mahdollista avata räätälöityjä sivuja (custom page). Tarjolla on kolme tapaa.

Avataan sivu pääsivuksi

Avataan sivu modaalisena dialogina

Avataan sivu ns sivupanelina (side dialog)

Käytännössä navigointi toteutetaan (ainakin toistaiseksi) JavaScriptillä.

Yhteenveto

Valmis ratkaisu näyttää tältä.

Räätälöidyt sivut tulevat muuttamaan tekemistä. Nyt yhden sovelluksen sisällä voi aidosti yhdistää canvasin ja model-drivenin parhaat puolet.

Mallissa on vielä tekniset puutteensa. En kuitenkaan usko että se tulee olemaan este tekemiselle. Este (tai hidaste) tulee olemaan ratkaisuja suunnittelevien tekijöiden pään kääntäminen tähän uuteen asentoon. Tunnistamaan ne kohteet, johon tämä lähestyminen soveltuu paremmin kuin vanha totuttu.

Sekä varsinaisten tekijöiden löytäminen. Monet kovat canvasin tekijät tulevat Microsoft365-maailmasta. Kovat model-drivenien tekijät taas tulevat Dynamics365-maailmasta.

Nyt näiden kahden maailman tulisi vihdoin kohdata.