Overview

The Course Content Navigator is a specialized, high-performance course outline widget for Mendix. Designed to be the ultimate companion to the Media Toolkit Player (or to function entirely standalone), it provides a fully featured, hierarchical menu system for enterprise Learning Management Systems (LMS), onboarding portals, and training dashboards.

Key Use Cases:

* Corporate Training & LMS: Build beautiful, deeply nested course curriculums inspired by platforms like Udemy or Coursera.

* Onboarding Portals: Guide users step-by-step through a structured series of articles, videos, and quizzes.

* Documentation Sites: Organize complex hierarchies of SOPs, tutorials, and manuals.

Core Capabilities:

* Deep Hierarchical Navigation: Group lessons into Modules, Sections, and sub-sections infinitely using a simple path string (e.g., 'Module 1/Section A/Lesson').

* Status Tracking & Locking: Visually display user progress with intuitive icons (Not Started, In Progress, Completed) and fully support locking future content based on status.

* Content Types & Icons: Automatically render specific UI icons based on the content type (Video, Article, Quiz, Resource, Assignment) to help users scan the curriculum.

* Active State Management: Accurately tracks the user's current lesson. The widget automatically expands the correct parent folders and highlights the current active item with a distinct styling.

* High Performance Virtualization: Built with React, it bypasses the DOM limitations of native Mendix List Views, allowing you to load hundreds of lessons without any browser lag.

Documentation

Typical usage scenario

The Course Content Navigator is designed for Mendix developers building enterprise Learning Management Systems (LMS), training portals, onboarding dashboards, and complex documentation sites. Building a hierarchical, dynamic course curriculum using standard Mendix List Views and Tree Nodes is often sluggish and difficult to style. This widget solves that problem by providing a high-performance, React-based navigation menu that supports deep module nesting, visual progress tracking, locked content states, and active item highlighting—all driven by a simple, flat database entity.

Features and limitations

Features:

* Deep Hierarchical Navigation: Group lessons into Modules, Sections, and sub-sections infinitely using a simple path string (e.g., 'Module 1/Section A/Lesson').

* Status Tracking & Locking: Visually display user progress with intuitive icons (Not Started, In Progress, Completed) and fully support locking future content (Padlock icon).

* Content Types & Icons: Automatically renders specific UI icons based on the content type (Video, Article, Quiz, Resource, Assignment).

* Active State Management: Accurately tracks the user's current lesson, highlighting it with distinct styling and automatically expanding parent folders when navigating.

* High Performance: Built with React, bypassing the DOM limitations of native Mendix List Views, allowing hundreds of lessons to load smoothly without UI lag.

Limitations:

* Designed strictly as a navigation/menu widget. It does not play videos or display articles on its own (it is designed to pair perfectly with the Media Toolkit Player).

* UI color themes must be overridden via standard CSS variables in your Mendix theme package.

Dependencies

* Mendix Studio Pro 9.24.0 or higher (Optimized for Mendix 10).

* No external Marketplace module dependencies required.

Installation

1. Click Download to import the widget into your Mendix project.

2. In Mendix Studio Pro, press F4 (App > Synchronize App Directory) to ensure the widget is registered.

3. Open a page in your app, search for Course Content Navigator in the Toolbox, and drag it onto your page.

Configuration

1. Context: Place the widget inside a DataView (e.g., a CourseSession entity).

2. Data Source: Map the Content Items property to the entity holding your course lessons.

3. Grouping: Map a string attribute to the Group Name property. Use forward slashes (/) to create nested folders dynamically (e.g., "Module 1/Basics").

4. Display Properties: Map the Title, Duration, and Description attributes to populate the rows.

5. Status & Type: Map the Status enumeration (NotStarted, InProgress, Completed, Locked) and Content Type enumeration (Video, Article, Quiz) to control the dynamic UI icons.

6. Actions: Go to the Events tab and configure the On Item Click action to trigger a Microflow or Nanoflow that opens the selected lesson in your main viewer.

Known bugs

* None reported.

Frequently Asked Questions

Q: How do I open a video when a user clicks a lesson?

A: In the widget's "Events" tab, configure the On Item Click action to call a Nanoflow or Microflow. The widget will pass the exact clicked Content Item object to that flow, allowing you to update your page's state or open a new page with the Media Toolkit Player.

Q: Can I use this without the Media Toolkit Player?

A: Absolutely! While they make a great pair, this widget simply acts as a powerful navigation menu. You can use it to navigate to standard Mendix pages, open PDFs, or display rich text articles.

Q: Does this widget actually play the videos?

A: No, the Course Content Navigator acts strictly as a high-performance navigation menu and progress tracker. To actually display and play the videos, you should download our companion widget: the Media Toolkit Player.

Q: How do I connect the Course Content Navigator to the Media Toolkit Player?

A: It's simple! Place both widgets on your Mendix page inside the same DataView. In the Navigator widget's "Events" tab, configure the "On Item Click" action to call a Nanoflow that updates the "Active Video" attribute on your context entity. The Media Toolkit Player will automatically detect this change and instantly start playing the new video.