Zo combineer je low-code dashboards, tabellen en formulieren met rijkere, complexere interfaces waar dat nodig is. Het resultaat is een gebruikerservaring die bijna naadloos aanvoelt. Dat deden we onlangs voor een juridisch adviesbureau. Hun verhaal laat zien waar low-code ophoudt, en wat ervoor nodig is om low-code en maatwerkcode als één app te laten werken.
Wat had het juridisch adviesbureau nodig?
Het bureau beheerde alle klantdossiers in één systeem, maar dat systeem was end-of-life en kon niet langer gebruikt worden. Medewerkers planden klantafspraken en hielden gewerkte uren steeds vaker bij in Excel-sheets, en notities over de dossiergeschiedenis raakten verspreid over verschillende plekken. Het volledige beeld van een dossier stond niet meer op één plek.
Daarom vroeg het bureau ons bij Blis om een nieuw systeem op maat, ingericht rond hun eigen bedrijfsprocessen.
Gelukkig waren die processen goed gedefinieerd. Het bureau heeft drie soorten medewerkers: juridisch adviseurs, ondersteunend personeel en managers. De juridisch adviseurs werken in vaste diensten (ochtend, middag of avond) en kunnen op elk van de locaties van het bureau ingezet worden. Die locaties hebben niet allemaal dezelfde openingstijden. Het ondersteunend personeel beheert de klantafspraken voor de adviseurs, en managers hebben dashboards met managementinformatie nodig.
En dan is er natuurlijk nog afwezigheid. Als een juridisch adviseur afwezig is, moeten de afspraken toch doorgaan en de diensten gedekt worden. Iemand moet dus kunnen zien wat er geraakt wordt en het werk kunnen herverdelen over beschikbare collega's.
Kortom: het afsprakensysteem moest betrouwbare informatie tonen over waar medewerkers zijn, hoe hun lopende klantdossiers ervoor staan en wat de geschiedenis is.
Waar houdt low-code op? Zoek het vroeg uit
We kozen voor Power Apps, en dan specifiek een Model Driven App (het standaard, formuliergebaseerde app-type in Power Apps). Tijdens de discovery werd duidelijk dat die app klanten, dossiers en het grootste deel van de administratie aankon. De planning helaas niet, in elk geval niet op een manier die intuïtief is voor gebruikers.
Diensten, locaties, openingstijden en afwezigheid in standaard low-code tabellen en formulieren proppen, zou onhandige workarounds hebben opgeleverd. Daarom bepaalden we al tijdens de discovery welke delen van de app geschikt waren voor low-code en welke full code nodig hadden.
Eén eis gaf extra richting aan de oplossing. De tijdlijn van een dossier volgt een vast maar flexibel patroon, een proces. De app moest dat proces terug laten komen in hoe de gebruiker door de app navigeert. De custom full-code styling moest aansluiten op de standaard styling van low-code. Complexer was de eis dat full-code pagina's geïntegreerd moesten worden met low-code formulieren, zodat de overgang soepel verloopt zonder onverwachte navigatie.
Hoe zorg je dat het als één app voelt?
Als je maatwerkcode integreert met standaardcomponenten die hun beperkingen hebben, voelt een app al snel als een lappendeken. We bouwden de custom pagina's en componenten in React en vonden manieren om ze te integreren met de Model Driven App. Daardoor konden we kleine componenten in standaardformulieren plaatsen, die vervolgens full-code pagina's openen. Die pagina's verschijnen als pop-over boven het formulier, waardoor ze aanvoelen als onderdeel van dat formulier.
In de praktijk maakt iemand van het ondersteunend personeel een nieuw klantrecord aan via een standaardformulier. In dat formulier staat een overzichtstabel met de afspraken van die klant, die op dat moment nog leeg is.
Vervolgens boekt diegene de eerste afspraak voor die klant in een pop-over. Die opent vanuit het overzicht en bevat een uitgebreide agendapagina.
.png)
Sluit je de pop-over, dan ververst de overzichtstabel in het klantformulier vanzelf. De nieuwe afspraak staat er meteen tussen, met datum, type, medewerker, locatie en status. Je hoeft dus niet weg te navigeren of de pagina te herladen om te zien of de boeking gelukt is.
Voor de personeelsplanning bouwden we een aparte custom pagina: het rooster. Links staan alle medewerkers, met per persoon het aantal diensten per week en labels als 'Afwezig deze week' of 'Wijziging gepland'. Klik je op een medewerker, dan zie je drie blokken: het rooster, extra beschikbaarheid en afwezigheid.
Een nieuw rooster maak je in een paar stappen: je kiest de locatie, de dagen en of iemand 's ochtends, 's middags of 's avonds werkt. Elk rooster krijgt een periode mee, zodat je wijzigingen vooruit kunt plannen. Je ziet in één oogopslag welk rooster nu geldt en welk rooster vanaf een latere datum ingaat.
Afwezigheid, zoals een week vakantie, meld je in hetzelfde scherm. De app laat dan zien welke afspraken in die periode vallen, zodat het ondersteunend personeel ze direct kan herverdelen over collega's die wel beschikbaar zijn.
Grip op de ontwikkeling
Maatwerkcode binnen het Power Platform vraagt soms om creatieve oplossingen om het ontwikkelwerk makkelijker te maken.
Lokaal testen. Het Power Platform ondersteunt geen lokale database-ontwikkeling die je kunt uitrollen naar de gehoste omgevingen. Om tijdens het lokaal ontwikkelen van de frontend toch API-calls naar de gehoste database te kunnen doen, had een Blis-collega al een lokale proxy gebouwd voor de Power Pages API. Voor dit project pasten we die aan voor de Dataverse API, de low-code database van het Power Platform. Zo konden we onze code vanaf onze eigen laptops testen tegen Dataverse. Meer hierover lees je in onze blogserie over de Power Platform Development Toolkit.
Eén gedeelde codebase. Terwijl wij de planning bouwden, werkte een andere collega aan een tool voor notities en taakbeheer voor dezelfde app. De twee overlapten, dus voegden we ze samen in één repository. Beide tools delen nu bouwstenen, datadefinities en styling. Voor het beheer van dependencies gebruiken we Renovate.
Alleen uitrollen wat veranderd is. Een pipeline in Azure DevOps rolt de code uit naar de omgeving van de klant. Omdat meerdere mensen aan verschillende delen van dezelfde codebase werken, vergelijkt de pipeline elke nieuwe build met wat al gepubliceerd is en rolt alleen de onderdelen uit die veranderd zijn. Zo blijven deployments licht, ook als er een paar developers tegelijk aan werken.
Is deze aanpak iets voor jou?
Low-code en full code combineren in één app is zinvol als:
- het grootste deel van je proces past binnen de standaardoplossingen van Power Apps, maar één of meer onderdelen eisen hebben die dat niet doen
- je gebruikers in één flow moeten blijven in plaats van te schakelen tussen applicaties
- je low-code wilt houden voor het grootste deel van de app, zodat die makkelijk te onderhouden blijft, met de flexibiliteit om hem uit te breiden
Herken je dit in je eigen organisatie? Neem contact op met ons Low code & AI-team. We helpen je uitzoeken waar low-code voor jou ophoudt, en wat je eromheen bouwt.
FAQ
Veelgestelde vragen
Die beantwoorden we graag alvast. Staat je vraag er niet tussen, neem dan gerust contact op.
Low-code is ideaal voor formulieren, tabellen en dashboards die je snel wilt bouwen en makkelijk wilt onderhouden. Full code zet je in waar standaardcomponenten tekortschieten, zoals complexe planning of interfaces met veel logica.
Een PCF-component is een zelfgebouwd onderdeel, bijvoorbeeld in React, dat je via het Power Apps Component Framework in een app plaatst. Zo voeg je functionaliteit toe die de standaardcomponenten van Power Apps niet bieden.
Ja, als je de maatwerkcode beperkt tot de onderdelen die het echt nodig hebben. Het grootste deel van de app blijft low-code, en met één gedeelde codebase en een slimme pipeline houd je het maatwerk overzichtelijk.
Breng tijdens de discovery per onderdeel in kaart wat gebruikers moeten kunnen. Merk je dat je workarounds nodig hebt om iets in standaardtabellen en -formulieren te krijgen, dan is dat onderdeel vaak beter af met full code.
Ja. Je kunt een bestaande Model Driven App uitbreiden met custom componenten en pagina's, zonder de rest van de app opnieuw te bouwen. Dat maakt het mogelijk om eerst met low-code te starten en later maatwerk toe te voegen.
.jpeg)
