PowerApps training: Facturen maken met HTML & Flow voor gevordenen
PowerApps is een low code platform waarmee je zowel kleine eenvoudige apps als zeer complexe oplossingen kunt bouwen in no time. De complexe oplossingen kosten natuurlijk wat meer tijd. Als database gebruiken we vrijwel altijd een SQL server. Maar dat kunnen met hetzelfde gemak SharePoint lijsten zijn.
PowerApps heeft (nog) geen rapport generator zoals bijvoorbeeld Access dat heeft. Maar met HTML en Flow maak je goede rapporten, pakbonnen en facturen. Dit is een plan van aanpak om facturen te maken. Note: natuurlijk zijn er altijd verbeteringen mogelijk, tenslotte is dit document nu al gedateerd. Maar laten we eenvoudig beginnen. Metafoor: Als u van de lage duikplank een mooie salto kunt maken met een schroef en ook nog eens prettig te water komt… Klim dan verder naar de hoge duikplank. Veel plezier in deze PowerApps training!
DE ORDER DIE WE GAAN VERWERKEN NAAR EEN PDF DOCUMENT
HET IDEE ACHTER DEZE OPZET VAN DEZE POWERAPPS TUTORIAL
In dit voorbeeld maken we gebruik van een SQL server. Met de action “Execute a SQL query” halen we de records op. Met action “Compose Data Operation” configureren we de Tabellen om ze vervolgens met de action “Response Request” te verwerken en de data terug te sturen naar PowerApps.
- Trigger de Flow met Knop in PowerApps
- Definieer de Variabelen om te filteren
- Run de SQL query’s
- Componeer de tabellen
- Retourneer Data naar PowerApps
DE UITDAGING
U werkt met een relationele database. Zo zijn er detailregels met de artikelen die gerelateerd zijn aan de factuurgegevens. Bovendien hebben we ook nog eens te maken met Contactpersonen gerelateerd aan Relaties. In de opzet gebruiken we “Execute a SQL query” om de data op te halen voor de PowerApps Collections. Met één query kunnen we alle data voor de factuur natuurlijk niet opmaken. Maar is het mogelijk met één roundtrip alles op te halen wat de factuur aan data nodig heeft?
FACTUURHEADER
FACTUURDETAILS
FACTUURFOOTER
Denk even goed na welke data u wilt gebruiken in uw factuur. Het is waarschijnlijk wenselijk om met verschillende lay-out vormen te werken. Bijvoorbeeld als u korting geeft (wat u natuurlijk nooit moet doen) wilt u een andere lay-out. Of als u een contract wilt maken met een kolom periode.
HET VERZAMELEN VAN ALLE GEWENSTE DATA
De uitdaging in deze PowerApps tutorial: Hoe houden we de performance hoog?
Bijzonder is dat we voor het ophalen van de data maar één bezoek maken naar Flow en Flow ook maar eenmaal de SQL-server aanroept voor alles wat de factuur aan data nodig heeft. Hierdoor zijn de prestaties ongekend goed.
Met de action “Execute a SQL query…” halen we dus de records op. De verschillende Query’s voor de “Header”, “Details”,”Footer” kunt gewoon achter elkaar plakken. Als u de Flow wilt testen is het van belang dat u de variabelen definieert als string. Tijdens de test kunt u de ID opgeven.
Maar uiteraard zijn de de record id’s geen string, na de test zet u deze terug als Integer. Test iedere stap van de Flow zodat u zeker weet dat elke stap in de Flow succesvol is.
Let op dat velden geen “Null” waarden bevatten!
Bent u niet zo handig met SQL? Koppel dan Access aan de SQL server. Met de Access interface maakt u heel gemakkelijk uw query’s. Er zijn wel een aantal kleine verschillen. Ook kunt u alvast testen of zo’n query goed werkt. Sowieso kan een Access koppeling reuze handig zijn voor het bewerken van data.
OPMAKEN JSON STRING VOOR DE TABELLEN
Na de ‘Execute a SQL query’ actie kunt u een Compose actie toevoegen in Flow en het volgende toevoegen: “ResultSets Table 1…, ResultSets Table 2…, ResultSets Table 3…” Deze kunt u ophalen uit de “Dynamische Content”. Op deze manier maakt u in de Compose een Json string aan die alle tabellen bevat.
Op deze manier maakt u de “Compose Inputs, JSON” compleet en krijgen de tabellen de juiste namen. Test de Flow en kijk of de “Compse” actie de juiste tabellen en data bevat. Vervolgens gebruiken we de “Outputs” om het “Schema” te vullen voor de “Response” naar PowerApps.
FLOW TESTEN EN OUTPUT OPHALEN VOOR RESPONSE SCHEMA
Met de action “Response” sturen we de Tabellen naar PowerApps. Daarvoor heeft de “Response” actie een schema nodig. Die kunnen we triggeren met “Compose”. Nu testen we de Flow en we gaan een “Schema” op halen voor de “Response” action. Start de Flow. Selecteer alles van A-Z in het venster “Outputs”. En kopieer dit “Schema” naar Clipboard of kladblok.
RESPONSE OPMAKEN
Nu gaan we de response, Data, Tabellen doorgeven aan PowerApps. Daarvoor kunt u in Flow de “Response” action gebruiken. Voeg de action “Response Request” aan de Flow toe en selecteer in de “Dynamic Content” de “Outputs” van “Compose”.
Plak het “Schema” in “Insert a sample JSON Payload” in “Generate from sample” in “Advanced options”.
Dit was de finale stap, uw Flow is compleet. Uiteraard kunt u de Flow nog even testen en vergeet u niet de variabelen naar “Integer” te zetten en uw Flow op te slaan.
Bijzonder van deze opzet is dat we voor het ophalen van de data maar één bezoek maken naar Flow en Flow ook maar eenmaal de SQL-server aanroept voor alles wat de factuur aan data nodig heeft. Hierdoor zijn de prestaties ongekend goed.
U zult zien dat het ophalen van de data, het verwerken naar collecties en in dit voorbeeld het vullen van een HTML document nog geen seconden duurt.
AANMAKEN VAN DE COLLECTIONS MET HET GEBRUIK VAN ADDCOLUMS
Nu kunnen we de Flow in PowerApps activeren en de Data, Tabellen ophalen en de “Collections” aanmaken. “Collection” Factuur genereert 3 Tabellen. Voor het gemak splitsen we in de volgende stap de Tabellen en maken we 3 “Collections” voor de Header, Details, Footer. Nu kunnen we bovendien Kolommen toevoegen, rekenen en daarmee alle velden aanmaken die we in de verschillende lay-out vormen zouden willen gebruiken. De opzet is dat als je bijvoorbeeld een lay-out maakt zonder korting velden of kolommen, toch alle bedragen kloppen. In deze opzet laten we het rekenwerk over aan PowerApps. Dit is ook het moment om variabelen aan te maken voor bijvoorbeeld betaling condities die een gebruiker heeft geselecteerd bij het aanmaken van de order. De volgende stap is het “vullen” van het HTML document.
OPMAKEN VAN HET HTML DOCUMENT
Voeg het HTML element toe aan uw formulier en maak deze op in HTML. Voor het gemak werken we met Tabellen. U kunt werken met “Variabelen” en “Collections” om het document op te maken. Uiteraard wilt u in uw factuur Currency waarden. Denk er aan dat de browser bepaald hoe deze waarden eruit gaan zien, dus een punt of komma toont. In het voorbeeld twee “Collections” die verwerkt zijn in Tabellen.
HET RESULTAAT - FINALE
Dit is dan het formulier met het HTML element in PowerApps. U kunt er natuurlijk ook voor kiezen om het PDF document op te halen. Met de interface kunnen gebruikers kiezen om de PDF te genereren of de PDF te genereren en te verzenden per mail. Bovendien kan er een persoonlijke note worden meegegeven.
CONVERSIE HTML - PDF
De gebruiker triggert met een Flow de conversie van HTML naar PDF en het document wordt opgeslagen op One-Drive of een SharePoint bibliotheek.
Of
De gebruiker triggert met een Flow de conversie van HTML naar PDF en het document wordt opgeslagen op One-Drive of een SharePoint bibliotheek en de PDF wordt per mail verzonden aan de geselecteerde persoon met een persoonlijke notitie.
Natuurlijk hebt u vast een ander idee over de interface of de volgorde van de verwerking.
Wilt u een compleet voorbeeld van de HTML indeling, of een tip hoe je kunt werken met verschillende lay-out vormen of hoe je een logo kunt invoegen? Stuur gerust even een mail. Maar ik vertrouw er op dat u er met deze blog wel uit komt. Succes!
Note bij deze PowerApps voorbeelden. De performance van deze opzet is excellent en eenvoudig te implementeren, een paar kanttekeningen:
Een PDF document in PowerApps beschikbaar maken kan reuze handig zijn. Maar de vraag is of je de voorbeeld factuur op het scherm van een gebruiker moet laten zien. Het is een extra stap in de orderverwerking. Vooral bij grote aantallen facturen kunnen er stappen worden overgeslagen.
Het opmaken van een persoonlijke note en het selecteren van een contact kan natuurlijk ook gemakkelijk worden overgeslagen. Ik wilde laten zien hoe je met een interface het een en ander aan functies kunt toevoegen. Ik denk dat een persoonlijke “noot” aan een factuur toegevoegde waarde kan leveren.
De volgende PowerApps tutorial gaat over Populate a Word template!
Wil je daar meer van weten? Schrijf je dan nu in om het laatste nieuws over PowerApps te ontvangen.
Pas op: tot onze spijt kan de OPT-IN mail in uw spambox terecht komen.