Intro
Bij het maken van Fiori-applicaties hebben ontwikkelaars vaak de neiging om de herbruikbaarheid over het hoofd te zien. Concepten als aangepaste besturingselementen en besturingsbibliotheken zijn bekend in de UI5 community, maar het idee van herbruikbare componenten is meer een verborgen juweeltje. Het is alleen in de laatste paar jaar dat dit onderwerp wat meer aandacht kreeg door berichten van bekende communityleden en de UI5-kernontwikkelaars. Op UI5Con 2020 in Brussel gaf ik een sessie over dit onderwerp en in maart gaf ik een sessie op de Erasmushogeschool Brussel. Ook intern bij CANGURU is dezelfde sessie gegeven. Hieronder geef ik je een samenvatting van wat herbruikbare componenten zijn en wat deze voor jou kunnen betekenen.
Wat is een herbuikbare component?
Om deze vraag te beantwoorden, moeten we ons eerst afvragen wat een component is. Werkelijk elke UI5-toepassing is een component. We hebben altijd een bestand met de naam Component.js die de sap.ui.core.UIComponent uitbreid. De component is het startpunt van de applicatie, het bestaat uit 2 hoofdonderdelen:
De sectie van metagegevens bevat de link naar de toepassingsdescriptor (manifest.json)
De init-functie waarin modellen/router/etc kunnen worden geïnstantieerd
Wanneer we een UI5-toepassing maken, definiëren we meestal een rootView in de toepassings-descriptor, waarna de component deze rootView in de init-functie instantieert. Dit is echter niet de enige manier waarop we met componenten in UI5 kunnen werken. In andere frameworks, zoals bijvoorbeeld "React", zijn componenten onafhankelijke en herbruikbare stukjes code. Ze werken geïsoleerd en geven HTML terug. We kunnen hetzelfde concept toepassen in UI5: we kunnen een besturingselement retourneren als het startpunt voor een component, in tegenstelling tot de views die we gebruiken bij het ontwikkelen van onze applicaties. Dit root-besturingselement kan elk UI5-besturingselement uit het framework zijn, zolang het zich uitbreid van sap.ui.core.Control, denk bijvoorbeeld aan een knop of tabel.
Zo kunnen we kleine stukjes functionaliteit creëren die door meerdere applicaties kunnen worden hergebruikt. Herbruikbare componenten kunnen worden gezien als bouwstenen waarmee we onze applicatie kunnen maken.
Typische use-cases voor hen zijn:
Zoekhulpfunctie: bijvoorbeeld een pop-up waarin we materialen kunnen zoeken. Deze functionaliteit kan in meerdere applicaties worden hergebruikt, zoals een verkooporder- of inkooporderapplicatie bijvoorbeeld.
Lijsten en tabellen: we kunnen bijvoorbeeld een component maken die een lijst met werknemers in een tabel retourneert, we kunnen dezelfde tabel in meerdere applicaties gebruiken elke keer dat we deze in onze applicatie implementeren.
Andere gevallen zijn ook mogelijk, je kan je fantasie gebruiken!
Waarom is dit belangrijk?
Elke component kan zijn eigen speciale modellen hebben, zoals een OData-model. Je kan het zo bouwen dat het volledig op zichzelf kan staan. Door kleine, speciale componenten te maken die een specifiek probleem oplossen, kan je echt bouwstenen maken die in verschillende toepassingen kunnen hergebruikt worden.
De herbruikbare component kan via events communiceren met de bovenliggende component, zodat de herbruikbare component (mits goed geïmplementeerd) zich totaal niet bewust is van zijn bovenliggende component.
In het bovenstaande voorbeeld vindt je een heel eenvoudig voorbeeld van een herbruikbare component die is geïntegreerd in een Fiori-applicatie. Het startpunt van de component is de knop. Wanneer de gebruiker op de knop klikt, wordt de pop-up getoond. Wanneer de gebruiker een item in de pop-up selecteert, genereren we een gebeurtenis waarop de bovenliggende applicatie kan reageren. Dit is een heel eenvoudig voorbeeld, je kan je meer geavanceerde gevallen voorstellen en wij bij CANGURU kunnen jou helpen met de implementatie van deze componenten of uw Fiori-toepassingen.