Custom widgets in Mendix

Met de low-code benadering in Mendix is het ontwikkelen van applicaties behoorlijk eenvoudig geworden. Zo zijn er verschillende bouwblokken in de software beschikbaar om een applicatie mee samen te stellen. De bouwblokken voor het inrichten van een pagina worden widgets genoemd. Hierbij kun je denken aan knoppen en formuliervelden. Wanneer de wensen voor je applicatie verder gaan dan de beschikbare widgets, is het mogelijk om andere widgets te gebruiken. Deze custom widgets of ‘pluggable widgets’ kun je bijvoorbeeld downloaden uit de Mendix Marketplace. Die zijn daar door Mendix en andere partijen gepubliceerd om vrij te kunnen gebruiken. En wat mooi is, het is ook mogelijk om zelf custom widgets te maken! Senior Consultant Laurens Offereins heeft er een aantal ontwikkeld en vertelt je er meer over in dit blog.

Custom widgets van E-mergo

Bij E-mergo maken we voor verschillende projecten gebruik van zelfgemaakte custom widgets. De widgets zijn extra krachtig wanneer ze voor een niet te specifiek doel zijn ontwikkeld. Dit maakt dat de widgets goed te gebruiken zijn in meerdere projecten. Van deze custom widgets hebben we er drie gepubliceerd in de Mendix Marketplace zodat ze door iedereen te gebruiken zijn:

Form Field Info Tooltip

Gebruik de Form Field Info Tooltip widget om bij een formulierveld een icoontje toe te voegen met contextuele informatie in een tooltip. Het icoontje wordt direct bij het inputveld getoond, zodat het netjes past in de layout van een formulier. In de configuratie van de widget kan onder andere gekozen worden welk icoontje wordt getoond en hoe en in welke richting de tooltip zichtbaar wordt.

Sortable List Input

Gebruik de Sortable List Input widget om een formulierveld te gebruiken waarin de gebruiker verschillende waarden kan sorteren met drag and drop. De sorteerbare waarden worden geselecteerd uit een object in het domein model. Het resultaat van de sortering wordt als een opsomming opgeslagen in het geselecteerde attribuut, zoals bij elk ander formulierveld.

Actions Dropdown Menu

Gebruik de Actions Dropdown Menu widget om een dropdownmenu te gebruiken waarin meerde menu-items en acties kunnen zijn. Voor elk menu-item kan ingesteld worden wat het dynamische label, de conditionele zichtbaarheid, de stijl en de actie om uit te voeren is. Ook is het mogelijk om submenus te maken. De combinaties van deze opties in één menu zijn standaard niet mogelijk in Mendix.

Zelf een custom widget maken

Wanneer je zelf een situatie hebt waarin een custom widget zou kunnen helpen, biedt de Mendix Marketplace een grote verzameling om in te zoeken. Niet gevonden wat je zoekt? Met behulp van de documentatie van Mendix is het ook mogelijk om zelf aan de slag te gaan. Mendix helpt bovendien bij het starten van de ontwikkeling met de tool Mendix Pluggable Widget Generator. Als je verder beschikt over de nodige kennis van web development en het React framework, is er veel mogelijk om nieuwe functionaliteiten te ontwikkelen voor je applicatie. Je kunt zelf de elementen voor de configuratie van je widget bepalen en met behulp van externe React libraries kan je bijna alles maken wat je maar kunt bedenken.

Mocht het niet lukken of doe je het liever niet zelf, dan hebben we bij E-mergo de kennis om je te helpen bij het ontwikkelen van een custom widget. Ook als je andere wensen hebt voor het snel en betrouwbaar realiseren van een applicatie, kan je altijd terecht bij ons low-code team van E-mergo.

Geschreven door Laurens Offereins
Senior Consultant