Hoe overbrug je de kloof tussen SAP Fiori Elements en Freestyle UI5?

SAP Fiori Elements biedt veel standaardfunctionaliteit waarmee je snel een applicatie, zoals een List Report, kunt ontwikkelen. Maar wat als je nét wat meer wilt? Het SAP Flexible Programming Model maakt het mogelijk om eigen layouts en logica toe te voegen, zonder de stap naar volledig Freestyle UI5 development te hoeven zetten. Zo combineer je de snelheid van Fiori Elements met de flexibiliteit van maatwerk.

In dit artikel laat Ronald aan de hand van een Fiori Elements Bookshop-app zien hoe je het Flexible Programming Model toepast. De voorbeelden zijn ontwikkeld in Visual Studio Code en laten zien hoe je een List Report eenvoudig kunt uitbreiden met extra functionaliteit.

Gebruik Flexible Programming Model

Knop toevoegen op detail scherm

Via de app moet het mogelijk zijn om van een boek een aantal stuks te bestellen. Hiervoor moet op de detail pagina (Object page) een knop ‘Order’ worden toegevoegd. Dit kan worden gerealiseerd door op de detail pagina een Custom Section toe te voegen:

Door het toevoegen van deze custom section worden twee bestanden aangemaakt, namelijk een order fragment en order javascript handler. In het order fragment voeg je nog een UI control toe, waarmee je het aantal te bestellen boeken in kan geven:

In de javascript handler voeg je de code toe om de order daadwerkelijk aan te maken in de database.

Aan de detail pagina is nu het volgende toegevoegd:

Grafiek toevoegen op het detail scherm die de verkopen van een boek laat zien

Dit kun je realiseren door een nieuwe Custom section toe voegen met bijbehorende fragment:

Hierbij heeft element “contextPath” de waarde “sales”. Deze verwijst naar de verkochte boeken (relatie is vastgelegd in datamodel). Entiteit Sales bevat de omzet (prijs) van een verkocht boek.

Om de grafiek zichtbaar te maken moet aan bestand annotations.cds worden toegevoegd wat je wil tonen in de grafiek:

Hierin is gedefinieerd dat we een grafiek van het type ‘Line’ hebben, waarbij per dag (dimension) de omzet (prijs) (measurement) wordt gesommeerd van het boek. Het resultaat hiervan is dat de volgende grafiek wordt getoond:

Conclusie

Door het Flexible Progamming Model toe te passen kun je de functionaliteit van een Fiori Elements app gemakkelijk en snel uitbreiden, zonder dat je hoeft terug te grijpen op Freestyle UI5. Mocht je meer informatie willen dan kun je contact opnemen met McCoy & Partners of Ronald Janssen.