Creating Custom Widgets for Mendix

Custom widgets are used to solve specific UX needs. There are plenty of examples in the Mendix App Store that have been built over the years, such as the Rich Text Editor and the more recently added Chart.js.

As a community of Mendix developers, we can help each other build amazing apps by creating and sharing our own custom widgets. To show our appreciation, we’re giving out free Limited Edition Mendix Widget Builder T-shirts to all creators of new custom widgets. The day your new widget becomes available in the App Store, we’ll contact you to arrange delivery of your new Mendix swag!

In this post, Mendix R&D Developer and Architect Richard Edens, describes his process of setting a standard for Mendix widget creation, and building tools to automate the process.

When I started working at Mendix last year, I joined two departments at the same time. In the Expert Service (CSM – Customer Success Management) department, I would be an adviser, teacher, and developer of Custom Widgets. In the R&D department, I would help solve problems that involved Custom Widget work.

This unique position allowed me to learn a lot about Custom Widget development, including how our partners and clients were actually doing it. One of my specialties as a software developer and architect is to gather all information about the different processes people use, and come up with a new and improved (working) method.

Mendix decided to Open Source a selection of Custom Widgets we built in the past for the Mendix platform. We believe that once you share code for Custom Widgets, anyone can contribute and in the end deliver better products that complete more end user stories. Plus the development of Custom Widgets can be spread over a larger group of developers, creating a win-win situation for everyone who is part of the Mendix community.

Creating a Custom Widget Boilerplate

My first initiative was to create the “AppStoreWidgetBoilerplate.”  Building upon the Mendix Client API and examples of existing widgets I developed a Custom Widget boilerplate, inspired by the HTML boilerplate, maintained by Mathias Bynens and Hans Christian Reinl. This new boilerplate, however, would only be for a Custom Widget for the Mendix platform.

My goal was to make the new boilerplate the basis for each new widget built by Mendix. Furthermore, this would be the template that existing Custom Widgets could be ported to, so that each new and ported widget available in the Mendix GitHub would be of a certain quality. When that goal was reached, I started looking at the other processes that needed to be done to create a Custom Widget.

Creating a Widget Development Plugin for Brackets

Previously, getting a Custom Widget into a Mendix project involved a lot of tasks that needed to be repeated each time a change to the source code was made.

While I was solving tickets for Custom Widgets, I developed a Custom Widget workshop to share what I learned. This gave me the opportunity to develop a solution to this recurring working pattern: the Widget Development Plugin for Adobe Brackets, which turns Brackets into an IDE (Integrated Development Environment) for creating custom widgets for the Mendix platform. The plugin turned packing a widget based on the “AppStoreWidgetBoilerplate” into a one-click process inside Adobe Bracket.

The “AppStoreWidgetBoilerplate” and the “Widget Development Plugin for Brackets” enable you to quickly start extending Mendix with cool new User eXperiences! Again, if you’re interested in building custom widgets for Mendix, view this webinar on-demand. I demonstrate both of these tools by making a “Hello World” Mendix Custom Widget.

Frequently Asked Questions

Q: Who should build Custom Widgets?
A: This can be answered with: anyone who lives and breathes JavaScript / HTML and CSS! You can only build a Custom Widget based on these scripting languages. So learn them by heart before you start developing a Custom Widget for the Mendix platform. You also need a firm knowledge of the Mendix platform and how to model an app with it.

Q: What is a Custom Widget?
A: A Custom Widget is a DIJIT widget with Mendix Client API JavaScript functions running inside a Mendix modified DOJO environment. To actually write a proper DIJIT widget, you will need a firm understanding of JavaScript and design patterns of JavaScript and DOJO / DIJIT. Get started with a DIJIT widget by following this tutorial: https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

A: When should you build or use Custom Widgets?
Q: A Custom Widget is meant to provide a specific UX feature for your Mendix app(s). It gives you a solution if you need a special UX (User eXperience) that Mendix does not provide ‘out-of-the-box.’

Examples of a Custom Widget might be:

Assemble a car: Say you have an application where you want the ability to compose a car visually. At that point, you should think about building a Custom Widget.

A menu that alters based on a search filter value: If you want to have a dynamic menu to show page links based on a search result.

Drag and drop: If you want products to be dragged and dropped into a shopping cart.

Q: Is there an advanced Custom Widgets workshop offered as part of the Mendix Academy?
A: Yes! Mendix provides an advanced Custom Widget workshop called “Mastering the Art of Custom Widget Building”. If you want to get the most out of Custom Widget building, check when the next course will be offered in your corner of the world: https://academy.mendix.com/#1418913294132-2

Basic training of the Mendix Modeler
Custom Widget development for Mendix requires knowledge of the Mendix App Platform and Business Modeler. You can get started with the online course, or register for an in-person introduction course here: https://academy.mendix.com/#1418913294132-2

Where to find the AppStoreWidgetBoilerplate
You can find it at the following location: https://github.com/mendix/AppStoreWidgetBoilerplate

Mendix GitHub repository with Custom Widgets
Examples of widgets can be found at our GitHub repository: https://github.com/mendix/

Design patterns for JavaScript
An excellent book about JavaScript design patterns is the Open Source book written by Addy Osmani. You can find it here: https://addyosmani.com/resources/essentialjsdesignpatterns/book/

Writing your first dijit Widget
An excellent how-to to start writing dijit Widgets can be found here: https://dojotoolkit.org/reference-guide/1.10/quickstart/writingWidgets.html

Mendix Client API
The Mendix Client API can be found here: https://apidocs.mendix.com/5/client/