NO PRODUCT SETTINGS FOUND FOR:

examples

Gentle remainder that the product name comes from the `origin` first subfolder (after `/pms` ).

Script Module Test

This page demonstrates the new SCRIPT_MODULE fragment type, which allows embedding JavaScript modules directly in PM pages. The script will dynamically add content after the table below.

Sample Data Table

This table will be targeted by our script module:

Programming Language	Difficulty Level	Learning Time	Best For
Python	Beginner	3-6 months	Data Science, Web Development
JavaScript	Intermediate	4-8 months	Web Development, Mobile Apps
Java	Intermediate	6-12 months	Enterprise Applications
C++	Advanced	12+ months	System Programming, Games
Rust	Advanced	8-15 months	System Programming, Performance

Interactive Script Module

The following YAML block contains a JavaScript module that will execute when the page loads:

Expected Behavior

When this page loads, you should see:

Console Messages: Check browser console for execution logs
Dynamic Content: A success panel should appear after the table
Interactive Buttons: Buttons to highlight the table and add rows
Visual Effects: Animations and styling changes when interacting

Technical Details

Fragment Type

Type: script_module_
YAML Key: fType: script_module_
Script Type: ES6 Module (type="module")
Content: Inline (content: |) or File Reference (src: path/to/file.js)

DOM Targeting

Uses data-f_type attributes to find fragments
Employs insertAdjacentElement() for precise placement
Leverages modern JavaScript features (arrow functions, template literals)

Security Notes

Content is processed through Jinja2's | safe filter
Runs in module context with natural scoping
Compatible with Content Security Policy

This demonstrates the power and flexibility of the new SCRIPT_MODULE fragment type for creating dynamic, interactive PM pages.

File Reference Example

The following example shows how to reference an external JavaScript file instead of embedding the script inline:

Enhanced Data Table

This table will be enhanced by an external script file:

Framework	Type	Performance	Learning Curve	Best For
React	Library	High	Medium	SPAs, Component-based UIs
Vue.js	Framework	High	Easy	Progressive enhancement
Angular	Framework	High	Steep	Enterprise applications
Svelte	Compiler	Very High	Easy	Performance-critical apps
Next.js	Meta-framework	Very High	Medium	Full-stack React apps

External Script Module

This script will: - Add sortable columns (click headers to sort) - Enable row highlighting and selection - Display table statistics - Provide export functionality - Allow adding sample rows

Comparison: Inline vs File Reference

Approach	Use Case	Advantages	Disadvantages
Inline Content	Simple scripts, page-specific logic	Easy to maintain, no external dependencies	Can make markdown files large
File Reference	Complex scripts, reusable modules	Better organization, reusability, syntax highlighting	Requires external file management

Best Practices

Use inline content for:
Simple DOM manipulations
Page-specific interactions
Quick prototypes
Use file references for:
Complex functionality
Reusable components
Scripts shared across multiple pages
When you need proper IDE support and debugging

This dual approach gives you maximum flexibility in how you organize and maintain your interactive PM content.