Using Faker.JS With Mendix

The Mendix Fake car application

Sometimes you need to feed your application with data. A lot of data. You don't mind whether this data is real or not. You may intend to perform a load test in your application. How can you achieve this fast? The Javascript Faker.JS library can be the solution.

My Environment

• Mac Mini M2 — Sequoia 15.3.2
• Studio Pro 10.21.0 Beta for Mac
• Node v23.5.0

The Use Case

We will create a very simple application to generate fake vehicle data and show it on DataGrid2.

The Fake Vehicle Web Application

Procedure

[ 1 ] Create a New Application using the Blank Template.

[ 2 ] Create a Persistent Entity called Vehicle with the following attributes:

Vehicle attributes

[ 3 ] Create a Snippet and drop a DataGrid2 on it, then use the Vehicle entity as Datasource. Also, define a Variable called Count that will be used to create N Vehicles. This Count variable should be used as a Datasource for a TextBox.

Datagrid2 defined to use Vehicle as Datasource

The Studio Pro 10.21.0 most useful new feature IMHO: Snippet/Page Variables !!

[ 4 ] Create a Button Create N besides the TextBox. Define a new Nanoflow called ACT_Vehicle_Create as OnClick event. This nanoflow must have the variable Count as a parameter:

The ACT_Vehicle_Create requires a Count integer parameter

This nanoflow creates Count N Vehicles and adds each new Vehicle to a list retrieved from the Database. At the end, commit the newly created Vehicles to the Database.

ACT_Vehicle_Create nanoflow

Observe that here I'm using the very very useful variable $currentIndex as stop criteria for the while loop.

The very very useful $currentIndex variable

But how a new Vehicle is created? I've used a JavaScript Action that uses the Faker.JS package API to configure the fake data for this new Vehicle.

[ 5 ] Therefore, create a JavaScript called JSA_Vehicle_Create that returns a Vehicle object and shouldn't have any parameter:

JSA_Vehicle_Create returns a Vehicle object

[ 6 ] Before writing the javascript code, the Faker.JS library must be installed. Open a terminal at the JSA_Vehicle_Create path and run the command below:

npm install @faker-js/faker --save-dev

NPM command to install Faker.JS (in my case, the main module is called App)

After installing the Faker.JS package, you should have these files inside this folder:

[ 7 ] Let's code the script that creates the fake Vehicles! Firstly, the Faker.JS library must be imported:

import { faker } from '@faker-js/faker';

Then, we can use the Faker.JS API to get the fake vehicle data:

const name = faker.vehicle.vehicle();
const model = faker.vehicle.model();
const manufacturer = faker.vehicle.manufacturer();
const color = faker.vehicle.color();
const fuel = faker.vehicle.fuel();
const year = faker.date.past().getFullYear();
const vrm = faker.vehicle.vrm();

With these data available, we can create the MxObject Vehicle inside the JavaScript Action. Yes, this is possible! Check Mendix Documentation for details.

const newVehicle = await createMxObject("App.Vehicle");
newVehicle.set("Name", name);
newVehicle.set("Model", model);
newVehicle.set("Manufacturer", manufacturer);
newVehicle.set("Color", color);
newVehicle.set("Fuel", fuel);
newVehicle.set("Year", year);
newVehicle.set("Vrm", vrm);

In addition, I've created a helper function called createMxObject that effectively creates a new Object using the entityName given as a parameter:

async function createMxObject(entityName) {
 return new Promise(function(resolve, reject) {
  mx.data.create({
   entity: entityName,
   callback: function(mxObject) {
    resolve(mxObject);
   },
   error: function(e) {
    reject("Could not create object:" + e.message);
   }
  });
 });
}

The complete code is below so that you can copy/paste:

import "mx-global";
import { Big } from "big.js";
import { faker } from '@faker-js/faker';

// BEGIN EXTRA CODE
async function createMxObject(entityName) {
 return new Promise(function(resolve, reject) {
  mx.data.create({
   entity: entityName,
   callback: function(mxObject) {
    resolve(mxObject);
   },
   error: function(e) {
    reject("Could not create object:" + e.message);
   }
  });
 });
}
// END EXTRA CODE

/**
 * @returns {Promise.<MxObject>}
 */
export async function JSA_Vehicle_Create() {
 // BEGIN USER CODE
 const name = faker.vehicle.vehicle();
 const model = faker.vehicle.model();
 const manufacturer = faker.vehicle.manufacturer();
 const color = faker.vehicle.color();
 const fuel = faker.vehicle.fuel();
 const year = faker.date.past().getFullYear();
 const vrm = faker.vehicle.vrm();

 const newVehicle = await createMxObject("App.Vehicle");
 newVehicle.set("Name", name);
 newVehicle.set("Model", model);
 newVehicle.set("Manufacturer", manufacturer);
 newVehicle.set("Color", color);
 newVehicle.set("Fuel", fuel);
 newVehicle.set("Year", year);
 newVehicle.set("Vrm", vrm);

 return newVehicle;
 // END USER CODE
}

[ 8 ] With the Javascript Action ready, we can finalize ACT_Vehicle_Create so that the Create N button can now fulfill its purpose. Then, drop the Snippet created in the step [ 3 ] in the Home_Web page:

The Snippet placed in the Home_Web page

[ 9 ] Finally, let's run our application with F5:

The Faker.JS being used by our Mendix application

Comments & Conclusions

• The combination of the Mendix Low-Code with the power and flexibility of JavaScript is a winning solution. The key factor here is to define precisely the boundaries of each technology.
• In the current solution, I chose to create the Vehicle in JavaScript, so that by doing so I end up with just one call to JavaScript. Alternatively, I could just return the dummy data for each attribute and then create the Vehicle entity in a Nanoflow. I prefer the first option.
• This is my first app completely created in MacOS. But at the date this article was written, the MacOS version of Studio Pro was still in Beta, and with a lot of bugs, limitations, and instabilities. For example, you cannot use keyboard shortcuts on the JavaScript editor to copy/paste and you cannot dock the Variables and Debugger views side by side in the StudioPro Viewport. But there are improvements also: finally, we can use a structured mode when designing the pages!
• There's an alternative for creating Fake data using a Java library instead. This library is called Java Fake. Take a look at the module FakeData. Why I'm not using it? Because it is very old! The last commit was 4 years ago, and it seems to me a defunct library. Faker.JS on the other side is being actively developed (the latest commit was done a few weeks ago).
• This fact brings a frequently disregarded governance requirement: avoid the use of modules or widgets in which dependencies are very old. This can be a potential security risk for your application.

If you find an error or have a suggestion, please let me know in the comments!😉

References

Mendix Client API Documentation

FakerJS

Source Code

GitHub - vstram/mx_faker