Een app voor mobiel

Willemijn Noordermeer
24-sep-2019 8:39:00

Recent moest ik voor een klant een checklist digitaliseren. Op hun werkterrein gelden strikte regels met betrekking tot veiligheid. Door middel van diverse checklists controleren zij of iedereen zich aan de regels houdt en of er nog verbeteringen of instructrices nodig zijn. Dit gebeurde tot voor kort nog op papier, waarna de gegevens werden overgenomen in een Excelsheet. Veel handmatig werk, dus het werd tijd om dit proces te digitaliseren. Welke tool is daar nu beter voor dan Power Apps!?
De checklists moesten voldoen aan de volgende voorwaarden:

  • Eenvoudig in te vullen op een mobiele telefoon
  • Zowel in het Engels als Nederlands beschikbaar

Al met al, genoeg uitdaging voor dit project! Ik begon met een ‘Canvas app from blank’ voor een telefoon. Ik gebruik PowerApps in een Engelstalige browser omdat dit eenvoudiger is als je supportvragen moet opzoeken. Er is eenvoudigweg meer in het Engels te vinden dan in het Nederlands.  Daarnaast is de opmaak van formules ook verschillend in het Engels of Nederlands. Het scheidingsteken van variabelen in een functie is in het Engels een komma, waar in het Nederlands een puntkomma gebruikt wordt. Net zoals we dat in Excel ook zien. Meer van dit soort weetjes en tips lees je in '5 tips voor je eerste PowerApp'.

Dat terzijde, terug naar de app. Ik koos voor een phone layout, omdat de telefoon het apparaat is wat het meest gebruikt zal worden. De gegevens zullen worden opgeslagen in SharePoint en de basis voor de invoergegevens is dan ook een SharePoint lijst. Hierin heb ik alle gegevens opgenomen die moeten worden ingevoerd.

Ik heb gebruik gemaakt van een form component in PowerApps waar ik als dataconnectie de SharePointlijst heb toegevoegd. Hiermee wordt het formulier al voor je gevuld, dit is niet altijd zoals je zou willen, maar de voornaamste reden waarom ik hier toch voor een Form heb gekozen is, om in één keer het hele formulier te resetten als deze wordt opgeslagen.

Tip: De defaultMode van het formulier is standaard ‘Edit’, wijzig dit naar ‘New’:

Van standaard Edit naar New

Allereerst heb ik de datum en de persoon die de app start automatisch laten vullen. Dit doen we doormiddel van now() of today():

kies voor Now

Om de tekst ook in het Nederlandse format weer te geven kies je bij Format het volgende:

Nederlandse format weergeven

Omdat het veld ‘ingevuld door’ een Persoon veld is in SharePoint, is het niet mogelijk om alleen een naam in te vullen maar moet je aangeven wat je wilt invullen: 

Ingevuld door aangeven

Hierbij controleren we eerst of het formulier in bewerkmodus is geopend. Als dit het geval is, is de DisplayName van het SharePointveld gelijk aan de FullName van de ingelogde gebruiker. Op deze manier wordt de huidige gebruiker standaard gevuld als het formulier bewerkt wordt. Als een al eerder ingevulde checklist bekeken wordt, zal de gebruiker die dat formulier heeft ingevuld getoond worden. 

Omdat het teveel gegevens zijn om in één scherm te tonen moest de app uit meerdere schermen bestaan. Waarbij wel in één keer gegevens opgeslagen worden in SharePoint. Het moet namelijk wel mogelijk zijn om heen en weer te navigeren. Heen en weer navigeren is redelijk eenvoudig in PowerApps. Op de OnSelect property van de NextButton vul je het volgende in:

heen en weer navigeren in PowerApps

Op het volgende scherm vervangen we de ‘next button’ voor een ‘save button’. Deze moet het formulier opslaan in SharePoint als je klaar bent met invullen. Om dit te kunnen realiseren, moeten de gegevens d.m.v. ‘Patch’ meegenomen worden van het ene scherm naar het andere. Hiervoor moeten we eerst een collectie aanmaken waarin de gegevens tijdelijk opgeslagen worden. Waarna vervolgens bij opslaan van dit formulier alle gegevens vanuit deze collectie worden opgeslagen in een SharePoint lijst item.

Bij de App OnStart vul je het volgende in:

App OnStart

Hiermee zorgen we, dat als de app opgestart wordt, je naar het ‘gegevens scherm’ gaat en dat er een collectie wordt aangemaakt waarin de benodigde gegevens worden opgeslagen. De ‘_c’ die ik toevoeg aan de namen is om te herkennen dat het om de gegevens in de collectie gaat. De waarden achter de ':' zijn de default waarden voor in deze collectie.

Voor de Onselect property van de volgende knop in het gegevensscherm voegen we onderstaande formule toe:

formule Onselect property

Hiermee worden de default waarden overschreven met de daadwerkelijke ingevulde waarden en navigeer je naar het volgende scherm. 

In het Checklist scherm voegen we eenzelfde soort formule toe aan de save knop:

formule save knop

Met de eerste Patch formule worden ook de gegevens uit dit scherm toegevoegd aan de collectie (coll_ChecklistItem).

Vervolgens moeten we deze gegevens nu op gaan slaan in een SharePoint lijst. Dit gebeurt met een nieuwe Patch formule binnen een ForAll. Deze slaat de gegevens op in de gegevensbron ‘PowerAppPhone’, de SharePointlijst. Hiermee voeg ik alle gegevens vanuit de collectie toe aan de SharePoint lijst. 

Het resultaat: een PowerApp geschikt voor telefoon over meerdere schermen. Hoe ik de app ook meertalig maakte lees je in een volgende blog.

Ook interessant voor jou

These Stories on Power Apps

Nog geen reacties

Voel je vrij om te reageren...