Uploaden van documenten mét een groot preview-venster

SharePoint heeft in de basis uitstekende ‘document management’ functionaliteiten aan boord. Zaken als versiegeschiedenis, co-authoring, machtigingsbeheer, zoeken en filteren en het gebruik van metadata zijn hier de belangrijkste voorbeelden van. Microsoft heeft de laatste jaren extra veel aandacht besteed aan de mogelijkheden voor ontwikkelaars om de out-of-the-box functionaliteiten nog verder uit te kunnen breiden met (ontbrekende) functionaliteiten op maat.

Samen met onze partner Daad Legal hebben we een contractmanagement systeem ontwikkeld in SharePoint, dat later dit jaar/begin volgend jaar op de markt zal worden gebracht (meer details volgen!).

Zoals meestal met dit soort vragen kom je een heel eind met de standaard onderdelen van SharePoint en configuratiewerk. Daarnaast is Power Automate een solide oplossing om taken (zoals het genereren van unieke contractnummers of het versturen van reminders per e-mail of als Teams bericht) ‘weg’ te automatiseren. Toch is er voor de laatste 20% vaak nog maatwerk nodig.

In dit geval ging het om een functionaliteit die in SharePoint ontbreekt. Vanuit de klantvraag was duidelijk dat men een contract moest kunnen uploaden in SharePoint en dat daarbij een aantal zaken belangrijk waren:

• De doellocatie en bijbehorende metadata van het contract wordt pas bepaald nádat het contract geupload is (systeem gebruikt verschillende bibliotheken voor verschillende contract-typen)
• Bepaalde eigenschappen van het contract (metadata) zouden tijdens het uploaden zichtbaar moeten kunnen zijn, zodat men niet tussen vensters hoeft te schakelen

Om daarnaast te voorkomen dat medewerkers bestanden zonder metadata uploaden in het systeem is een maatwerk component ontwikkeld, met behulp van SharePoint Framework, TypeScript en React (zie onze eerdere blogs hierover).

De component bestaan uit een aantal onderdelen:

• Een knop ‘Nieuw Contract’ om de upload te starten, aanwezig op de voorpagina van de site

• Een paneel (volledige schermgrootte) om de ‘wizard’ te doorlopen van begin tot eind, met daarop:
  • Een drag-and-drop veld en een upload knop voor het slepen of selecteren van het te uploaden contract-bestand
  • Een groot preview scherm dat meteen na upload het bestand toont in een iFrame: de gebruiker kan dus rustig scrollen in het bestand en zelfs waarden kopiëren plakken vanuit de preview in een metadata veld
  • Een keuzelijst voor het selecteren van het type contract
  • Een dynamisch formulier dat vervolgens de eigenschappen tonen die horen bij het gekozen type contract

De contracten worden technisch gezien eerst naar een tijdelijke (voor de gebruiker onbereikbare) locatie geupload en pas bij het volledig doorlopen van alle invulstappen opgeslagen in de doellocatie. Wordt het paneel gesloten vóórdat de invulstappen voltooid zijn, dan blijft het contract in de tijdelijke locatie staan, waar het uiteindelijk zal worden gewist (Power Automate!).

De component past vanwege het gebruik van de Fluent UI bibliotheek voor de verschillende controls perfect in de gebruikersinterface die SharePoint/Office365 gebruikers gewend zijn, waardoor de overgang tussen out-of-the-box functionaliteiten en maatwerk functionaliteiten naadloos is.

In onderstaande video wordt de gehele component getoond.

Heeft u vragen over maatwerk in SharePoint, interesse in meer informatie over het Contractmanagement systeem (dat later dit jaar gelanceerd zal worden in samenwerking met Daad Legal) of wilt u gewoon een vrijblijvend gesprek met ons voeren, neem dan contact met ons op via info@jellybeanconsultancy.nl en we vertellen je graag meer!