The low-code platform Mendix brings a lot to the table, but eventually, once you start to develop more complex applications, you can be in a situation where something isn’t possible out-of-the-box. This is where custom widgets come in.
Custom widgets have previously been developed within the Dojo framework. Without going into further detail about it, I am happy to say it now has changed. The Mendix Studio Pro 8.0.0 release has introduced a new way of building custom widgets.
The now called Pluggable widgets are built with the React library. Mendix has stated that these widgets use simpler and more powerful Mendix APIs. This also comes with the powerful capability to use external dependencies and install them using npm.
Start building pluggable widgets
Mendix has provided a how-to for creating a simple widget yourself. Further documentation seems to be absent at the time of writing. As the how-to helps develop a simple widget step-by-step, I intend to make a very compact list of the steps.
Point 2 till 4 can be directly downloaded through the built-in command line from Visual Studio Code.
npm install npm@latest -g
npm install yo -g
npm install @mendix/generator-widget -g
Now that you’ve done all that, it’s time to create something new. The last program that you need to download, the Pluggable Widget Generator, helps to build from the root folder of an existing Mendix project. Open the project folder with Visual Studio Code. From the root, use the built-in command line:
yo @mendix/widget TextBox
Open the widget folder in VSCode and start the development process with the following command:
npm run dev
Now you're all set to develop the pluggable widget with React.
Work in progress
The pluggable widgets are brand new. Documentation is constantly being updated and new features come with the latest studio releases. With the latest release of Mendix 8.7, it is now possible to load your own list of data. Create your own custom carousel, listview, datagrid, … this is exciting!
This is a good time to start learning how to develop pluggable widgets. The documentation on the Mendix part is changing with every studio release and there is a ton of documentation on developing with React. This will be simpler to learn than the Dojo widgets. The Mendix Yeoman generator provides a good starting point.