Overview

This allows Mendix developers to execute custom JavaScript code inside a web page or Mendix UI context.

Developers can embed JavaScript directly in the widget configuration and optionally include HTML content with script tags.

This is useful for:

• Running lightweight UI logic
• Injecting HTML and binding interactions
• Using jQuery conditionally
• Integrating small dynamic behaviors without full widget development

Documentation

Introduction:

The Custom JS Widget enables Mendix developers to execute custom JavaScript directly within a web page or Mendix UI context.

It allows you to embed JavaScript inside the widget configuration and optionally include HTML content together with

Key Features:

1.Execute any custom JavaScript inside your Mendix application

2.Render HTML content and automatically execute inline <script> tags

3.Write JavaScript safely using escaped braces ({{ and }}) to avoid Mendix errors

4.Access the widget container DOM directly using the container variable

5.Optional automatic jQuery 3.7.1 loading—enabled via configuration

6.Supports re-running the snippet when the Mendix context is refreshed

7.Fully compatible with offline-first apps

8.Simple, lightweight and flexible widget—no dependency on other modules

Execution Modes

This widget provides three distinct execution modes:

Mode 1 — Pure JavaScript

1.Runs plain JavaScript inside the browser

2.Requires brace escaping using {{ and }}

3.Targets elements already on the page

HTML:

<button class="hello-btn">Click (No jQuery)</button>

Js:

console.log("NO-JQUERY mode loaded");

const btn = document.querySelector(".hello-btn");

if (btn) {{

btn.onclick = () => {{

alert("Pure JS — Button clicked!");

}};

}} else {{

console.warn("Button not found");

}}

Mode 2 — jQuery Enabled (jQuery3)

1.Automatically loads jQuery 3.7.1

2.No escaping needed if no braces are used

HTML:

<button class="jq-btn">Click (jQuery)</button>

Jquery:

console.log("JQUERY mode loaded");

var btn = $(".jq-btn");

btn.click(() => alert("jQuery — Button clicked!"));

Mode 3 — HTML + JS Combined (htmljs)

1.HTML and JavaScript together in one snippet

2.HTML is rendered into the widget

3.<script> content executes automatically afterwards

4.Supports Mendix attributes: ${Name}, ${Attribute} etc.

HTML+JS:

<div>

<button class="mixed-btn">Click (HTML+JS)</button>

</div>

<script>

console.log("HTML+JS mode loaded — container:", container);

const btn = container?.querySelector(".mixed-btn");

if (btn) {{

btn.addEventListener("click", () => {{

alert("HTML+JS — Button clicked!");

}});

}} else {{

console.warn("Button not found inside container");

}}

</script>

Recommended Query API per Mode

Pure JS (no) → document.querySelector()

jQuery Mode (jQuery3) → $(".selector")

HTML+JS (htmljs) → container.querySelector()

Refer the example given and try to play in Front-end.