Zo benut je de kracht van SAP UI5 in SAP BPA
Paul van Rouwendaal - Senior SAP Invoice Management & SAP Master Data Governance Consultant
Geavanceerde workflow interface met maatwerkformulieren
Met onze ruime kennis en ervaring met SAP Business Workflow, is Avelon goed vertrouwd met de uitgebreide mogelijkheden om geavanceerde workflow-oplossingen te realiseren. Aangezien SAP Build Process Automation (BPA) de evolutie is van SAP Business Workflow, hebben wij de afgelopen periode ook ervaring opgedaan met BPA. Veel functionaliteit die voorheen beschikbaar was binnen SAP Business Workflow, is tegenwoordig ook beschikbaar in BPA, met als groot voordeel dat BPA aansluit bij een clean core- en cloudstrategie.
SAP BPA is een cloudservice binnen het SAP Business Technology Platform (BTP). Hiermee kun je zowel eenvoudige als complexere processen automatiseren, zoals een goedkeuringsproces van verkooporders of facturen. Met BPA kunnen workflows gemaakt worden met goedkeuringsstappen, automatische business rules (via decision tables), lezen en bijwerken van gegevens in SAP S/4HANA via OData-services, of het koppelen met andere systemen via webservices. Taken uit deze workflows worden centraal aangeboden aan gebruikers via de Task Center-app, geïntegreerd in SAP Work Zone (de cloudversie van de Fiori Launchpad).
In deze blog beschrijf ik hoe je één van die geavanceerde functionaliteiten van SAP BPA kunt toepassen om een unieke gebruikerservaring te realiseren: het maken van een aangepaste gebruikersinterface voor een workflowtaak in BPA, met behulp van een SAP UI5-applicatie die je ontwikkelt in SAP Business Application Studio (BAS).
Beperkte lay-out mogelijkheden met de standaard formuliereditor in BPA
Wanneer je een workflow proces in BPA maakt kun je eenvoudig een formuliertaak toevoegen. Daarna kun je via de ingebouwde WYSIWYG-editor (What You See Is What You Get) het formulier ontwerpen:
Op deze manier zet je snel en eenvoudig een formulier op, maar dit heeft één belangrijk nadeel. Zoals te zien is in onderstaande schermafbeelding, kun je standaard alleen teksten en velden onder elkaar in één kolom plaatsen.
SAP Joule
Wil je bijvoorbeeld twee invoervelden naast elkaar plaatsen, dan is dat niet mogelijk met deze standaard WYSIWYG-formuliereditor. Hierdoor zijn de lay-out mogelijkheden beperkt.
Voor eenvoudige formulieren is dit vaak voldoende. Heb je slechts enkele velden nodig in een workflow proces, dan is dit geen probleem. Wanneer je echter meer velden op het scherm wilt tonen, kun je de beschikbare ruimte veel efficiënter en effectiever benutten door de velden in twee of meer kolommen naast elkaar te plaatsen. Dit maakt het formulier overzichtelijker en gebruiksvriendelijker.
Eigen formulierontwerp met SAP UI5
Sinds Q3 2023 is het mogelijk om een volledig eigen ontwerp te maken voor gebruikerstaken in BPA. Dit geldt zowel voor goedkeuringstaken als voor andere typen gebruikerstaken, bijvoorbeeld voor het aanvullen van gegevens.
Hiervoor gebruik je SAP Business Application Studio (BAS) om eerst een SAP UI5-applicatie te ontwikkelen waarin je zelf de gebruikersinterface ontwerpt. Deze app moet voldoen aan een aantal specifieke kenmerken. Vervolgens kun je de applicatie als nieuw formulier importeren in de Process Designer van BPA en volledig integreren in je workflow proces.
Stappenplan: van UI5-app naar BPA-formulier
Hiervoor doorloop je de volgende stappen:
Maak in SAP BAS een nieuwe developer space aan met applicatietype SAP Fiori en de aanvullende extensie Workflow Module.
Binnen deze developer space maak je een Multi-Target Application (MTA)-project aan.
In dit project maak je twee modules aan met de MTA-templates Approuter Configuration en Workflow UI.
Hiermee wordt automatisch een SAP UI5-app gegenereerd met de specifieke kenmerken die nodig zijn om de applicatie later als formulier in BPA te kunnen importeren.
Formulierindeling met meerdere kolommen
In het bestand App.view.xml kun je vervolgens een formulier maken met een lay-out van bijvoorbeeld twee kolommen, door gebruik te maken van een SAP UI5 SimpleForm met een ColumnLayout:
In het bestand manifest.json moet een sap.bpa.task-codeblok aanwezig zijn. Hierin definieer je de actieknoppen en de invoer- en uitvoerparameters voor de gegevensstromen tussen de taak-context en de workflow-context in BPA.
Applicatie implementeren en importeren in BPA
Na het distribueren van de applicatie op SAP BTP wordt de SAP UI5-app zichtbaar in het overzicht van HTML5-applicaties binnen het subaccount.
Vanaf dat moment kun je de applicatie importeren binnen de Process Designer van BPA.
Via deze importeerfunctie wordt het manifest.json-bestand gebruikt om alle kenmerken van de taak te bepalen, zoals acties, invoer- en uitvoerparameters. Na de import kan het formulier eenvoudig als nieuwe taak aan het proces worden toegevoegd.
Je kunt vervolgens de inputs en outputs van de taak koppelen aan de workflowcontext en de uitkomsten van de taak (zoals goedkeuren en afwijzen) verder vormgeven.
Het eindresultaat: een betere gebruikerservaring
Als resultaat ziet de taak er zo uit in de My Inbox-app.
De zes formuliervelden worden nu netjes in twee kolommen weergegeven, in plaats van onder elkaar. Dit zorgt voor een overzichtelijker en prettiger gebruikersinterface.
Zelf aan de slag?
Hoe je dit zelf kunt uitproberen, staat uitgebreid beschreven in de volgende SAP Learning Journey: Create an SAP UI5 Task for a Business Process. Deze aanpak vereist wel de nodige ervaring met SAP BTP, SAP BAS, SAP UI5 en SAP BPA.
Meer informatie?
Avelon consultants beschikken over deze kennis en ervaring en denken graag met je mee over de mogelijkheden die deze oplossing jouw organisatie kan bieden.
Heb je vragen over dit onderwerp, wil je weten hoe Avelon jouw organisatie hierbij kan ondersteunen, of heb je interesse in andere onderwerpen zoals SAP Workflow? Neem dan gerust contact op met Sander van der Wijngaart.