Creating Custom Widgets in Mendix

Mendix is a powerful low-code development platform that allows users to create applications with minimal coding. However, sometimes, the default widgets do not fully meet your application's needs. In such cases, you can create custom widgets to extend Mendix's functionality.

At Eclantiqx, we specialize in leveraging Mendix's powerful capabilities to create custom widgets tailored to our clients' needs. With deep expertise in the platform, we consistently deliver innovative solutions that address complex challenges, providing an optimal experience across various industries.

In this guide, based on our expertise we have outlined the steps to develop a custom widget and provided example of in-house developed widgets and make them available in the Mendix application.

Prerequisites and Installations

Before you start developing a custom widget, you need to set up your development environment. Below are the required installations:

·?????? Mendix Studio Pro (Download from Mendix Marketplace)

·?????? Node.js and NPM (Download from Node.js website)

·?????? Mendix Pluggable Widgets Generator

Install globally using:

npm install -g yo @mendix/generator-widget

·?????? React and React DOM (for creating UI components)

Install in your project directory:

npm install react react-dom

·?????? A Code Editor (e.g., Visual Studio Code)

Creating a Custom Widget in Mendix

Step 1: Generate a Widget Project

First, create a new widget project using the Mendix Widget Generator using the below command in the CMD:

yo @mendix/widget MyCustomWidget

This will create a folder named MyCustomWidget with the necessary structure.

Step 2: Define the Widget Structure

Inside your MyCustomWidget/src/components folder, you will find a .tsx file. This is where you define your widget's logic and UI.

Example: Countdown Timer Widget

Let’s create a Countdown Timer Widget that accepts a start time (in seconds) as a property and counts down to zero.

1. Modify CountdownTimer.tsx

import { ReactElement, useEffect, useState } from "react"; import { CountdownTimerContainerProps } from "../typings/CountdownTimerProps"; export default function CountdownTimer({ startTime }: CountdownTimerContainerProps): ReactElement { ??? const [timeLeft, setTimeLeft] = useState(startTime); ??? useEffect(() => { ??????? if (timeLeft > 0) { ??????????? const timer = setTimeout(() => setTimeLeft(timeLeft - 1), 1000); ??????????? return () => clearTimeout(timer); ??????? } ??? }, [timeLeft]); ??? return <div className="countdown">Time Left: {timeLeft} seconds</div>; }

2. Define Widget Properties

Modify CountdownTimer.xml in the src directory to define the widget’s properties:

<widget id="countdown.timer" name="Countdown Timer" type="React"> ??? <property key="startTime" type="integer" required="true" defaultValue="60"/> </widget>

Step 3: Build and Test the Widget

Run the following command to build the widget:

npm run build

This will generate the necessary files inside the dist folder.

To test it, add the widget to a Mendix project and provide a start time value. The countdown should begin automatically.